Rearrange navigation menu; more npc types

qkmaxware · May 19, 2021 · bdf653e · bdf653e
1 parent aa58ab5
commit bdf653e
Show file tree

Hide file tree

Showing 10 changed files with 368 additions and 76 deletions.
diff --git a/TrekSharp.AdventureTools/Shared/FilePopup.razor b/TrekSharp.AdventureTools/Shared/FilePopup.razor
@@ -0,0 +1,68 @@
+@inherits AppComponentBase
+
+<Popup @ref=popup>
+    <div class="row w3-margin-bottom w3-margin-top">
+        <div class="hbar elbow-left knee-left" style="width: 32px;"></div>
+        <div class="typeface" style="margin-left: 10px; margin-right: 10px;">
+            <img src="assets/file.png" width="28" height="28"> FILES 
+        </div>
+        <div class="hbar row-fill elbow-right knee-right"></div>
+    </div>
+
+    <div class="w3-bar-block w3-padding w3-margin-bottom">
+        <div class="w3-button w3-bar-item" @onclick=createNewFile>
+            <img src="assets/new.png" width="32" height="32"> New Project
+        </div>
+        <div class="w3-button w3-bar-item" @onclick=loadExistingFile>
+            <img src="assets/load.png" width="32" height="32"> Open Project
+        </div>
+        <div class="w3-button w3-bar-item" @onclick=saveFile>
+            <img src="assets/save.png" width="32" height="32"> Save Project
+        </div>
+    </div>
+
+    <div class="w3-row w3-center w3-padding">
+        <button class="w3-button w3-red" @onclick="Close">Cancel</button>
+    </div>
+</Popup>
+
+<AssetImporter
+    @ref="importer"
+    TItem = "AppData"
+    Title ="Load"
+    OnLoad = "onAppDataLoaded"
+/>
+
+@code {
+    private Popup popup;
+    private AssetImporter<AppData> importer;
+
+    public void Open() {
+        popup.Open();
+    }
+
+    public void Close() {
+        popup.Close();
+    }
+
+    private void createNewFile() {
+        this.Data.Overwrite(new AppData());
+        this.NavigateHome();
+        Close();
+    }
+
+    private void loadExistingFile() {
+        importer?.Open();
+        Close();
+    }
+    private void onAppDataLoaded(AppData data) {
+        this.Data.Overwrite(data);
+        this.StateHasChanged();
+        this.NavigateHome();
+    }
+
+    private async Task saveFile() {
+        await Program.DownloadAppData(this.Data);
+        Close();
+    }
+}
diff --git a/TrekSharp.AdventureTools/Shared/HelpPopup.razor b/TrekSharp.AdventureTools/Shared/HelpPopup.razor
@@ -0,0 +1,51 @@
+@inherits AppComponentBase
+
+<Popup @ref=popup>
+    <div class="row w3-margin-bottom w3-margin-top">
+        <div class="hbar elbow-left knee-left" style="width: 32px;"></div>
+        <div class="typeface" style="margin-left: 10px; margin-right: 10px;">
+            <img src="assets/help.png" width="28" height="28"> HELP 
+        </div>
+        <div class="hbar row-fill elbow-right knee-right"></div>
+    </div>
+
+    <div class="w3-bar-block w3-padding w3-margin-bottom">
+        <a class="w3-button w3-bar-item" href="https://github.com/qkmaxware/TrekSharp/wiki" target="_blank">
+            Online Wiki
+        </a>
+    </div>
+
+    <div class="row w3-margin-bottom w3-margin-top">
+        <div class="hbar elbow-left knee-left" style="width: 32px;"></div>
+        <div class="typeface" style="margin-left: 10px; margin-right: 10px;">
+            <img src="assets/github.png" width="28" height="28"> CONTRIBUTE 
+        </div>
+        <div class="hbar row-fill elbow-right knee-right"></div>
+    </div>
+
+    <div class="w3-bar-block w3-padding w3-margin-bottom">
+        <a class="w3-button w3-bar-item" href="https://github.com/qkmaxware/TrekSharp" target="_blank">
+            View Source Code
+        </a>
+        <a class="w3-button w3-bar-item" href="https://github.com/qkmaxware/TrekSharp/issues/new/choose" target="_blank">
+            Submit Issue Report
+        </a>
+    </div>
+
+    <div class="w3-row w3-center w3-padding">
+        <button class="w3-button w3-red" @onclick="Close">Cancel</button>
+    </div>
+</Popup>
+
+
+@code {
+    private Popup popup;
+
+    public void Open() {
+        popup.Open();
+    }
+
+    public void Close() {
+        popup.Close();
+    }
+}
diff --git a/TrekSharp.AdventureTools/Shared/NavMenu.razor b/TrekSharp.AdventureTools/Shared/NavMenu.razor
@@ -6,19 +6,29 @@
     style="z-index: 2;" 
     id="mySidebar" 
 >
-    <div style="min-height: calc(100vh - 48px);">
-        <button class="w3-bar-item w3-button w3-large w3-hide-large" @onclick="CloseNavMenu">Close &times;</button>
-        <div class="w3-row">
-            <div class="w3-col" style="width: 48px;">
-                <NavLink class="w3-button w3-block" href="" Match="NavLinkMatch.All">
-                    <img src="assets/home.png" width=16 height=16>
-                </NavLink>
-            </div>
-            <div class="w3-rest w3-right-align w3-row">
-                <button class="w3-col s6 w3-button @(Data.IsGm ? "w3-blue" : "w3-black")" @onclick=@(() => Data.IsGm = true)>GM</button>
-                <button class="w3-col s6 w3-button @(!Data.IsGm ? "w3-blue" : "w3-black")" @onclick=@(() => Data.IsGm = false)>Player</button>
+    <div>
+        <div class="lcars-dark-blue">
+            <button class="w3-bar-item w3-button w3-large w3-hide-large" @onclick="CloseNavMenu">Close &times;</button>
+            <div class="w3-row">
+                <div class="w3-col" style="width: 48px;">
+                    <NavLink class="w3-button w3-block" href="" Match="NavLinkMatch.All">
+                        <img src="assets/home.png" width=16 height=16>
+                    </NavLink>
+                </div>
+                <div class="w3-rest w3-right-align w3-row">
+                    <button class="w3-col s6 w3-button @(Data.IsGm ? "w3-blue" : string.Empty)" @onclick=@(() => Data.IsGm = true)>GM</button>
+                    <button class="w3-col s6 w3-button @(!Data.IsGm ? "w3-blue" : string.Empty)" @onclick=@(() => Data.IsGm = false)>Player</button>
+                </div>
             </div>
         </div>
+        <div class="w3-bar lcars-disabled w3-margin-bottom">
+            <button class="w3-button w3-left-align" @onclick=@(() => files?.Open())>
+                File
+            </button>
+            <button class="w3-button w3-left-align" @onclick=@(() => help?.Open())>
+                Help
+            </button>
+        </div>
         <button class="w3-button w3-block w3-left-align lcars" @onclick="@(() => collapseCreateMenu = !collapseCreateMenu)"  style="padding-bottom: 0px;">
             <div class="row">
                 <div class="hbar knee-left" style="margin-right:10px;"></div>
@@ -119,45 +129,6 @@
             </div>
         </div>
     </div>
-    <div class="w3-padding w3-center" style="width: 100%; overflow: hidden;">
-        <button 
-            style="border: 0; padding: 0; background-color: inherit;"
-            title="New"
-            @onclick="newData"
-        >
-            <img src="assets/new.png" width="32" height="32">
-        </button>
-        <button 
-            style="border: 0; padding: 0; background-color: inherit;"
-            title="Save"
-            @onclick="downloadDataJson"
-        >
-            <img src="assets/save.png" width="32" height="32">
-        </button>
-        <button 
-            style="border: 0; padding: 0; background-color: inherit;"
-            title="Load"
-            @onclick="@(() => importer?.Open())"
-        >
-            <img src="assets/load.png" width="32" height="32">
-        </button>
-        <a 
-            href="https://github.com/qkmaxware/TrekSharp/wiki"
-            target="_blank"
-            style="border: 0; padding: 0; background-color: inherit; text-decoration: none; margin-left: 12px;"
-            title="Get Help"
-        >
-            <img src="assets/help.png" width="32" height="32">
-        </a>
-        <a 
-            href="https://github.com/qkmaxware/TrekSharp"
-            target="_blank"
-            style="border: 0; padding: 0; background-color: inherit; text-decoration: none;"
-            title="Contribute"
-        >
-            <img src="assets/github.png" width="32" height="32">
-        </a>
-    </div>
 </div>
 
 <div class="lcars no-print" style="position: absolute;">
@@ -169,15 +140,14 @@
 </div>
 </div>
 
-<AssetImporter
-    @ref="importer"
-    TItem = "AppData"
-    Title ="Load"
-    OnLoad = "loadAppData"
-/>
+<FilePopup @ref=files></FilePopup>
+<HelpPopup @ref=help></HelpPopup>
 
 @code {
 
+    private FilePopup files;
+    private HelpPopup help;
+
     private bool collapseNavMenu = true;
     private string NavMenuCssClass => collapseNavMenu ? "w3-hide" : "w3-show";
 
@@ -203,25 +173,6 @@
         collapseNavMenu = false;
     }
 
-    private AssetImporter<AppData> importer;
-
-    private void newData() {
-        this.Data.Overwrite(new AppData());
-        this.NavigateHome();
-    }
-
-    private void loadAppData(AppData newData) {
-        this.Data.Overwrite(newData);
-        this.StateHasChanged();
-        this.NavigateHome();
-    }
-
-    private async Task downloadDataJson() {
-        await Program.DownloadAppData(this.Data);
-        // Generate a text file
-        //await this.DownloadJson("adventure", Data);
-    }
-
     protected override void OnInitialized() {
         NavigationManager.LocationChanged += locationChanged;  
         base.OnInitialized();  

diff --git a/TrekSharp.AdventureTools/wwwroot/assets/file.png b/TrekSharp.AdventureTools/wwwroot/assets/file.png
diff --git a/TrekSharp.AdventureTools/wwwroot/assets/help.png b/TrekSharp.AdventureTools/wwwroot/assets/help.png
diff --git a/TrekSharp.AdventureTools/wwwroot/css/lcars.css b/TrekSharp.AdventureTools/wwwroot/css/lcars.css
@@ -7,6 +7,12 @@
     --lcars-foreground-highlight-colour: #4455BB;
 }
 
+.lcars-dark-blue {
+    background-color: rgb(19, 61, 135);
+}
+.lcars-disabled {
+    background-color: rgb(11, 36, 80);
+}
 
 body {
     background-color: var(--lcars-background-main-colour);

diff --git a/TrekSharp.AdventureTools/wwwroot/index.html b/TrekSharp.AdventureTools/wwwroot/index.html
@@ -51,6 +51,7 @@
         let newWorker;
         function reloadPwa() {
             if (newWorker) {
+                hidePwaUpdate();
                 newWorker.postMessage({ action: 'skipWaiting' });
             }
             return false;