JonathanMcCaffrey/IGP-Fan-Reference
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(Navigation) Added a search button for desktop users

Browse Source
This commit is contained in:
Jonathan McCaffrey
2022-04-16 14:49:51 -04:00
parent 5d5a0bde59
commit b9e3633d1c
26 changed files with 578 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
IGP/App.razor
+2 -1
View File
@@ -1,4 +1,4 @@
@inject HttpClient HttpClient
@inject HttpClient httpClient
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
@@ -15,6 +15,7 @@
<EntityDialogPortal/>
<ToastPortal/>
<SearchPortal />
<style>
a {
IGP/Database.db
BIN
View File
Binary file not shown.
IGP/Dialog/SearchDialogComponent.razor
+172
View File
@@ -0,0 +1,172 @@
@implements IDisposable;
@inject ISearchService searchService
@inject IJSRuntime jsRuntime
@inject NavigationManager navigationManager
@if (searchService.IsLoaded())
{
<div class="searchBackground" onclick="@CloseDialog">
<div class="searchContainer"
@onclick:preventDefault="true"
@onclick:stopPropagation="true">
<FormLayoutComponent>
<FormTextComponent Placeholder="Search..." OnChange="SearchChanged"></FormTextComponent>
</FormLayoutComponent>
<div class="searchBox">
@if (SearchText.Length > 0)
{
foreach (var searchSection in searchService.Searches)
{
var searchPoints = searchSection.Value.FindAll(x => x.Title.ToLower().Contains(SearchText.ToLower()));
@if (searchPoints.Count > 0)
{
<div>
<div class="searchSectionTitle">
@searchSection.Key
</div>
<div class="searchContents">
@foreach (var searchPoint in searchPoints)
{
<button class="searchLink @searchPoint.PointType.ToLower()" @onclick="() => OnSearch(searchPoint)">@searchPoint.Title</button>
}
</div>
</div>
}
}
}
</div>
</div>
</div>
}
<style>
.pageContents * {
filter: blur(2px);
}
.searchBackground {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
}
.searchBox {
padding: 12px;
overflow-y: scroll;
overflow-x: hidden;
height: 530px;
border: 1px solid black;
border-radius: 2px;
}
.searchContents {
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start;
padding: 12px;
}
.searchSectionTitle {
font-weight: bolder;
}
.searchContainer {
margin-left: auto;
margin-right: auto;
margin-top: 64px;
width: 800px;
height: 600px;
background-color: var(--background);
border-width: var(--dialog-border-width);
border-style: solid;
border-color: var(--dialog-border-color);
border-radius: var(--dialog-radius);
padding: 8px;
box-shadow: 1px 2px 2px black;
}
.searchLink {
text-decoration: underline;
}
</style>
@code {
private ElementReference searchBox;
private string SearchText { get; set; } = "";
protected override void OnInitialized()
{
searchService.Subscribe(OnSearchChanged);
}
private void OnSearchChanged()
{
if (searchService.IsVisible)
{
jsRuntime.InvokeVoidAsync("SetFocusToElement", "search-dialog-input");
}
}
public void Dispose()
{
searchService.Unsubscribe(OnSearchChanged);
}
public void CloseDialog()
{
searchService.Hide();
}
public void NavigateTo(string url)
{
if (url.Contains("#"))
{
navigationManager.NavigateTo(url,
navigationManager.Uri.Split("#").First().Contains(url.Split("#").First()));
}
else
{
navigationManager.NavigateTo(url);
}
}
private void SearchChanged(ChangeEventArgs obj)
{
SearchText = obj.Value!.ToString()!;
}
private void OnSearch(SearchPointModel searchPoint)
{
NavigateTo(searchPoint.Href);
searchService.Hide();
}
}
IGP/Index.razor
+4
View File
@@ -2,4 +2,8 @@
@layout PageLayout
<DevOnlyComponent>
<SearchButtonComponent />
</DevOnlyComponent>
<HomePage/>
IGP/PageLayout.razor
+46 -25
View File
@@ -1,39 +1,36 @@
@inherits LayoutComponentBase;
@inject IJSRuntime jsRuntime
@inject ISearchService searchService
@inject IWebsiteService webService;
@implements IDisposable;
<div class="layoutContainer">
@if (!webService.IsLoaded())
{
<LoadingComponent/>
}
else
{
<div class="content">
@Body
</div>
<div class="pageContents">
<div class="layoutContainer">
@if (!webService.IsLoaded())
{
<LoadingComponent/>
}
else
{
<div class="content">
@Body
</div>
<DesktopNavComponent WebSections=webService.WebSectionModels
WebPages=webService.WebPageModels/>
<TabletNavComponent WebSections=webService.WebSectionModels
WebPages=webService.WebPageModels/>
<MobileNavComponent WebSections=webService.WebSectionModels
WebPages=webService.WebPageModels/>
}
<DesktopNavComponent WebSections=webService.WebSectionModels
WebPages=webService.WebPageModels/>
<TabletNavComponent WebSections=webService.WebSectionModels
WebPages=webService.WebPageModels/>
<MobileNavComponent WebSections=webService.WebSectionModels
WebPages=webService.WebPageModels/>
}
</div>
</div>
@code {
#if NO_SQL
#else
[Inject]
DatabaseContext Database { get; set; }
#endif
protected override void OnInitialized()
{
webService.Subscribe(HasChanged);
@@ -42,6 +39,19 @@
protected override async Task OnInitializedAsync()
{
await webService.Load();
await Focus();
}
private async Task Focus()
{
// await jsRuntime.InvokeVoidAsync("SetFocusToElement", pageContents);
}
protected override async void OnAfterRender(bool firstRender)
{
// await jsRuntime.InvokeVoidAsync("SetFocusToElement", pageContents);
}
void IDisposable.Dispose()
@@ -54,4 +64,15 @@
StateHasChanged();
}
private void HandleKeyDown(KeyboardEventArgs keyboardEventArgs)
{
if ((keyboardEventArgs.CtrlKey || keyboardEventArgs.MetaKey) && keyboardEventArgs.Key.ToLower() == "k")
{
searchService.Show();
}
Console.WriteLine(keyboardEventArgs.CtrlKey + " " + keyboardEventArgs.Key);
}
}
IGP/Pages/Database/DatabaseSinglePage.razor
+1 -1
View File
@@ -69,7 +69,7 @@
foreach (var e in DATA.Get().Values)
{
if (e.Info().Name.Equals(Text))
if (e.Info().Name.ToLower().Equals(Text!.ToLower()))
{
entity = e;
return;
IGP/Pages/RawDatabase.razor
-1
View File
@@ -5,7 +5,6 @@
<Title>Placeholders and Speculative</Title>
<Message>The data I am using contains placeholders and speculation on future mechanics. Ignore said data when using this JSON.</Message>
</AlertComponent>
<CodeComponent>
@DATA.AsJson()
</CodeComponent>
IGP/Portals/SearchPortal.razor
+28
View File
@@ -0,0 +1,28 @@
@implements IDisposable;
@inject ISearchService searchService
@if (searchService.IsVisible)
{
<SearchDialogComponent></SearchDialogComponent>
}
@code {
protected override void OnInitialized()
{
searchService.Subscribe(OnUpdate);
searchService.Load();
}
public void Dispose()
{
searchService.Unsubscribe(OnUpdate);
}
void OnUpdate()
{
StateHasChanged();
}
}
IGP/Program.cs
+1
View File
@@ -36,6 +36,7 @@ builder.Services.AddSingleton<IAgileService, AgileService>();
builder.Services.AddSingleton<IGitService, GitService>();
builder.Services.AddSingleton<INoteService, NoteService>();
builder.Services.AddSingleton<IDocumentationService, DocumentationService>();
builder.Services.AddSingleton<ISearchService, SearchService>();
builder.Services.AddSingleton(new HttpClient
{
IGP/wwwroot/content/notes/settings/hotkeys.md
+6 -7
View File
@@ -9,7 +9,7 @@ In the pre-alpha, IGP comes with some Unreal default hotkey setup.
This document will explain how to set up, modify, and use a new hotkey setup.
## Save the "Input.ini" file
# Save the "Input.ini" file
***Copy the below content and save the file as `Input.ini`.***
@@ -90,15 +90,14 @@ ActionMappings = (ActionName="UnitTypeSelectionModifier",bShift=False,bCtrl=Fals
***Copy the above content and save the file as `Input.ini`.***
## Understand the Input.ini
# Understand the Input.ini
You can notice a single line of this file can be broken down like this.
`ActionMappings=(ActionName="AttackMove",bShift=False,bCtrl=False,bAlt=False,bCmd=False,Key=A)`
- `ActionMappings=(***)`: Indicates content is an action mapping. i.e. a hotkey
- `ActionName="AttackMove"`: Indicates the name of the selected action. Here, we are using the `AttackMove` move action,
that forces your selected army to attack.
- `ActionName="AttackMove"`: Indicates the name of the selected action. Here, we are using the `AttackMove` move action, that forces your selected army to attack.
- `Key=A`: Indicates key being mapped to the action. Set to `Key=Tab` to require the Tab key to be pressed instead, to
perform the `AttackMove` action.
- `bShift=False`: Indicates that the Shift key is not held. Set to `bShift=True` to require a shift key held to
@@ -110,7 +109,7 @@ You can notice a single line of this file can be broken down like this.
- `bCmd=False`: Indicates that the Cmd key is not held. Set to `bCmd=True` to require a cmd key held to perform the
mapped action. (Macs not supported by IGP)
## Modify the Input.ini file
# Modify the Input.ini file
You are now going to want to modify the file with your own hotkey setup.
@@ -258,10 +257,10 @@ to use proper values for `YOUR_USER` and `CURRENT_IMMORTAL_CLIENT`.
There will be a blank `Input.ini` file in this folder. You can safely override it with your modified file.
## Testing
# Testing
Restart the IGP client, and try out your new hotkey setup!
## Trouble Shooting
# Trouble Shooting
If running into trouble, ask for help in the `hotkeys` channel in the IGP Discord.
IGP/wwwroot/generated/AgileTaskModels.json
+1 -1
View File
File diff suppressed because one or more lines are too long
IGP/wwwroot/generated/NoteContentModels.json
+1 -1
View File
@@ -1 +1 @@
[{"Id":1,"ParentId":null,"NoteSectionModelId":3,"Href":"holdout","CreatedDate":"2022-02-18T00:00:00","UpdatedDate":"2022-02-18T00:00:00","Name":"Coop Holdout, Some distant place (Nuath)","Description":"First coop test map in pre-alpha.","Content":"coop/holdout","IsHidden":"False","IsPreAlpha":"True","NoteContentModels":[],"Parent":null,"PageOrder":0},{"Id":2,"ParentId":null,"NoteSectionModelId":2,"Href":"hotkeys","CreatedDate":"2022-04-13T00:00:00","UpdatedDate":"2022-04-13T00:00:00","Name":"Custom HotKey Setup","Description":"Customize your hotkeys in the pre-alpha.","Content":"settings/hotkeys","IsHidden":"False","IsPreAlpha":"True","NoteContentModels":[],"Parent":null,"PageOrder":0},{"Id":3,"ParentId":null,"NoteSectionModelId":1,"Href":"armor-types","CreatedDate":"2022-04-13T00:00:00","UpdatedDate":"2022-04-13T00:00:00","Name":"Armor Types","Description":"Heavy, Medium, and Light. What does it mean?","Content":"the-basics/armor-types","IsHidden":"False","IsPreAlpha":"True","NoteContentModels":[],"Parent":null,"PageOrder":0}]
[{"Id":1,"ParentId":null,"NoteSectionModelId":3,"Href":"holdout","CreatedDate":"2022-02-18T00:00:00","UpdatedDate":"2022-02-18T00:00:00","Name":"Coop Holdout, Some distant place (Nuath)","Description":"First coop test map in pre-alpha.","Content":"coop/holdout","LoadedContent":null,"IsHidden":"False","IsPreAlpha":"True","NoteContentModels":[],"Parent":null,"PageOrder":0},{"Id":2,"ParentId":null,"NoteSectionModelId":2,"Href":"hotkeys","CreatedDate":"2022-04-13T00:00:00","UpdatedDate":"2022-04-13T00:00:00","Name":"Custom HotKey Setup","Description":"Customize your hotkeys in the pre-alpha.","Content":"settings/hotkeys","LoadedContent":null,"IsHidden":"False","IsPreAlpha":"True","NoteContentModels":[],"Parent":null,"PageOrder":0},{"Id":3,"ParentId":null,"NoteSectionModelId":1,"Href":"armor-types","CreatedDate":"2022-04-13T00:00:00","UpdatedDate":"2022-04-13T00:00:00","Name":"Armor Types","Description":"Heavy, Medium, and Light. What does it mean?","Content":"the-basics/armor-types","LoadedContent":null,"IsHidden":"False","IsPreAlpha":"True","NoteContentModels":[],"Parent":null,"PageOrder":0}]
IGP/wwwroot/generated/WebSectionModels.json
+1 -1
View File
@@ -1 +1 @@
[{"Id":1,"Name":"Tools","Description":"Tools Stuff","Href":null,"Order":1,"IsPrivate":"False","WebPageModels":[]},{"Id":2,"Name":"Resources","Description":"Resources Stuff","Href":null,"Order":2,"IsPrivate":"False","WebPageModels":[]},{"Id":3,"Name":"General","Description":"About Stuff","Href":null,"Order":3,"IsPrivate":"False","WebPageModels":[]},{"Id":4,"Name":"Development","Description":"Development Stuff","Href":null,"Order":4,"IsPrivate":"False","WebPageModels":[]},{"Id":5,"Name":"Settings","Description":"Settings Stuff","Href":null,"Order":5,"IsPrivate":"False","WebPageModels":[]}]
[{"Id":1,"Name":"Tools","Description":"Tools Stuff","Order":1,"IsPrivate":"False","WebPageModels":[]},{"Id":2,"Name":"Resources","Description":"Resources Stuff","Order":2,"IsPrivate":"False","WebPageModels":[]},{"Id":3,"Name":"General","Description":"About Stuff","Order":3,"IsPrivate":"False","WebPageModels":[]},{"Id":4,"Name":"Development","Description":"Development Stuff","Order":4,"IsPrivate":"False","WebPageModels":[]},{"Id":5,"Name":"Settings","Description":"Settings Stuff","Order":5,"IsPrivate":"False","WebPageModels":[]}]
IGP/wwwroot/index.html
+11
View File
@@ -36,6 +36,17 @@
applicationCulture: 'en-US'
});
</script>
<script>
window.getUserAgent = () => {
return navigator.userAgent;
};
</script>
<script>
window.SetFocusToElement = (elementId) => {
document.getElementById(elementId).focus();
};
</script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>