refactor loader (#549)

- loader is in aside - loader appears above content
maxence-charriere · Jun 11, 2021 · d579cb2 · d579cb2
1 parent e2586e9
commit d579cb2
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 215 deletions.
diff --git a/docs/app.css b/docs/app.css
@@ -71,100 +71,6 @@
   font-weight: 100;
 }
 
-/* Menu */
-#app-contextmenu-background {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  left: 0;
-  top: 0;
-  z-index: 42000;
-}
-
-.goapp-contextmenu {
-  position: fixed;
-  min-width: 150px;
-  max-width: 480px;
-  padding: 6px 0;
-  border-radius: 6px;
-  border: solid 1px rgba(255, 255, 255, 0.1);
-  background-color: rgba(40, 38, 37, 0.97);
-  color: white;
-  -webkit-box-shadow: -1px 12px 38px 0px rgba(0, 0, 0, 0.6);
-  -moz-box-shadow: -1px 12px 38px 0px rgba(0, 0, 0, 0.6);
-  box-shadow: -1px 12px 38px 0px rgba(0, 0, 0, 0.6);
-}
-
-@media (prefers-color-scheme: light) {
-  .goapp-contextmenu {
-    color: black;
-    background-color: rgba(221, 221, 221, 0.97);
-    border: solid 1px rgba(0, 0, 0, 0.2);
-  }
-}
-
-.goapp-contextmenu-hidden {
-  display: none;
-}
-
-.goapp-contextmenu-visible {
-  display: block;
-}
-
-.goapp-menuitem {
-  display: flex;
-  align-items: center;
-  padding: 3px 24px;
-  margin: 0;
-  border: none;
-  width: 100%;
-  cursor: pointer;
-  outline: inherit;
-  background-color: transparent;
-  text-align: left;
-  color: currentColor;
-}
-
-.goapp-menuitem:hover {
-  background-color: deepskyblue;
-}
-
-.goapp-menuitem:disabled {
-  opacity: 0.15;
-  background-color: transparent;
-}
-
-.goapp-menuitem-separator {
-  width: 100%;
-  height: 0;
-  margin: 6px 0;
-  border-top: solid 1px rgba(255, 255, 255, 0.1);
-}
-
-@media (prefers-color-scheme: light) {
-  .goapp-menuitem-separator {
-    border-top: solid 1px rgba(0, 0, 0, 0.2);
-  }
-}
-
-.goapp-menuitem-label {
-  user-select: none;
-  flex-grow: 1;
-}
-
-.goapp-menuitem-keys {
-  flex-grow: 0;
-  margin-left: 12px;
-  text-transform: capitalize;
-}
-
-.goapp-menuitem-icon {
-  width: 18px;
-  height: 18px;
-  margin-right: 12px;
-}
-
 /*------------------------------------------------------------------------------
   Widget Layout
 ------------------------------------------------------------------------------*/

diff --git a/docs/web/app.wasm b/docs/web/app.wasm
diff --git a/docs/web/godoc.html b/docs/web/godoc.html
@@ -1401,7 +1401,7 @@ <h3>Package files</h3>
 
 				<a href="https://github.com/maxence-charriere/go-app/blob/master/pkg/app/scripts.go">scripts.go</a>
 
-				<a href="https://github.com/maxence-charriere/go-app/blob/master/pkg/app/shell-v2.go">shell-v2.go</a>
+				<a href="https://github.com/maxence-charriere/go-app/blob/master/pkg/app/shell.go">shell.go</a>
 
 				<a href="https://github.com/maxence-charriere/go-app/blob/master/pkg/app/stack.go">stack.go</a>
 
@@ -2687,7 +2687,7 @@ <h2 id="Dispatcher">type <a href="https://github.com/maxence-charriere/go-app/bl
 
 
 
-			<h2 id="Environment">type <a href="https://github.com/maxence-charriere/go-app/blob/master/pkg/app/http.go#L761">Environment</a>
+			<h2 id="Environment">type <a href="https://github.com/maxence-charriere/go-app/blob/master/pkg/app/http.go#L760">Environment</a>
 				<a class="permalink" href="#Environment" id="src-Environment">¶</a>
 
 
@@ -23169,7 +23169,7 @@ <h3 id="Handler.ServeHTTP">func (*Handler) <a href="https://github.com/maxence-c
 
 
 
-			<h2 id="Icon">type <a href="https://github.com/maxence-charriere/go-app/blob/master/pkg/app/http.go#L738">Icon</a>
+			<h2 id="Icon">type <a href="https://github.com/maxence-charriere/go-app/blob/master/pkg/app/http.go#L737">Icon</a>
 				<a class="permalink" href="#Icon" id="src-Icon">¶</a>
 
 
@@ -24237,7 +24237,7 @@ <h3 id="Text">func <a href="https://github.com/maxence-charriere/go-app/blob/mas
 
 
 
-			<h2 id="UIFlow">type <a href="https://github.com/maxence-charriere/go-app/blob/master/pkg/app/flow.go#L10">UIFlow</a>
+			<h2 id="UIFlow">type <a href="https://github.com/maxence-charriere/go-app/blob/master/pkg/app/flow.go#L4">UIFlow</a>
 				<a class="permalink" href="#UIFlow" id="src-UIFlow">¶</a>
 
 
@@ -24247,28 +24247,31 @@ <h2 id="UIFlow">type <a href="https://github.com/maxence-charriere/go-app/blob/m
 a flow.
 </p>
 <p>
-EXPERIMENTAL WIDGET.
+EXPERIMENTAL - Subject to change.
 </p>
 
 			<pre>type UIFlow interface {
     <a href="#UI" id="src-UI">UI</a>
 
-    <span class="comment">// Class adds a CSS class to the flow root HTML element class property.</span>
+    <span class="comment">// Sets the ID.</span>
+    ID(v <a href="https://golang.org/pkg/builtin/#string">string</a>) <a href="#UIFlow" id="src-UIFlow">UIFlow</a>
+
+    <span class="comment">// Sets the class. Multiple classes can be defined by successive calls.</span>
     Class(v <a href="https://golang.org/pkg/builtin/#string">string</a>) <a href="#UIFlow" id="src-UIFlow">UIFlow</a>
 
-    <span class="comment">// Content sets the content with the given UI elements.</span>
-    Content(elems ...<a href="#UI" id="src-UI">UI</a>) <a href="#UIFlow" id="src-UIFlow">UIFlow</a>
+    <span class="comment">// Sets the width in px for the content items.</span>
+    <span class="comment">// Default is 300px.</span>
+    ItemWidth(px <a href="https://golang.org/pkg/builtin/#int">int</a>) <a href="#UIFlow" id="src-UIFlow">UIFlow</a>
 
-    <span class="comment">// ID sets the flow root HTML element id property.</span>
-    ID(v <a href="https://golang.org/pkg/builtin/#string">string</a>) <a href="#UIFlow" id="src-UIFlow">UIFlow</a>
+    <span class="comment">// Sets the space between content elements in px.</span>
+    Spacing(px <a href="https://golang.org/pkg/builtin/#int">int</a>) <a href="#UIFlow" id="src-UIFlow">UIFlow</a>
 
-    <span class="comment">// ItemsWidth sets the items base width in px. Items size is adjusted to</span>
-    <span class="comment">// fit the space in the container. Default is 300px.</span>
-    ItemsWidth(px <a href="https://golang.org/pkg/builtin/#int">int</a>) <a href="#UIFlow" id="src-UIFlow">UIFlow</a>
+    <span class="comment">// Makes the items occupy all the available space when the content has only</span>
+    <span class="comment">// one row.</span>
+    StretchItems() <a href="#UIFlow" id="src-UIFlow">UIFlow</a>
 
-    <span class="comment">// StrechtOnSingleRow makes the items to occupy all the available space when</span>
-    <span class="comment">// the flow spreads on a single row.</span>
-    StrechtOnSingleRow() <a href="#UIFlow" id="src-UIFlow">UIFlow</a>
+    <span class="comment">// Sets the content.</span>
+    Content(elems ...<a href="#UI" id="src-UI">UI</a>) <a href="#UIFlow" id="src-UIFlow">UIFlow</a>
 }</pre>
 
 
@@ -24281,7 +24284,7 @@ <h2 id="UIFlow">type <a href="https://github.com/maxence-charriere/go-app/blob/m
 
 
 
-				<h3 id="Flow">func <a href="https://github.com/maxence-charriere/go-app/blob/master/pkg/app/flow.go#L34">Flow</a>
+				<h3 id="Flow">func <a href="https://github.com/maxence-charriere/go-app/blob/master/pkg/app/flow.go#L31">Flow</a>
 					<a class="permalink" href="#Flow" id="src-Flow">¶</a>
 
 
@@ -24291,7 +24294,7 @@ <h3 id="Flow">func <a href="https://github.com/maxence-charriere/go-app/blob/mas
 Flow creates a container that displays its items as a flow.
 </p>
 <p>
-EXPERIMENTAL WIDGET.
+EXPERIMENTAL - Subject to change.
 </p>
 
 
@@ -24302,7 +24305,7 @@ <h3 id="Flow">func <a href="https://github.com/maxence-charriere/go-app/blob/mas
 
 
 
-			<h2 id="UIShell">type <a href="https://github.com/maxence-charriere/go-app/blob/master/pkg/app/shell-v2.go#L3">UIShell</a>
+			<h2 id="UIShell">type <a href="https://github.com/maxence-charriere/go-app/blob/master/pkg/app/shell.go#L3">UIShell</a>
 				<a class="permalink" href="#UIShell" id="src-UIShell">¶</a>
 
 
@@ -24325,6 +24328,7 @@ <h2 id="UIShell">type <a href="https://github.com/maxence-charriere/go-app/blob/
     Class(v <a href="https://golang.org/pkg/builtin/#string">string</a>) <a href="#UIShell" id="src-UIShell">UIShell</a>
 
     <span class="comment">// Sets the width in px for the menu and index panes.</span>
+    <span class="comment">// Default is 270px.</span>
     PaneWidth(px <a href="https://golang.org/pkg/builtin/#int">int</a>) <a href="#UIShell" id="src-UIShell">UIShell</a>
 
     <span class="comment">// Customizes the hamburger menu button with the given element.</span>
@@ -24354,7 +24358,7 @@ <h2 id="UIShell">type <a href="https://github.com/maxence-charriere/go-app/blob/
 
 
 
-				<h3 id="Shell">func <a href="https://github.com/maxence-charriere/go-app/blob/master/pkg/app/shell-v2.go#L36">Shell</a>
+				<h3 id="Shell">func <a href="https://github.com/maxence-charriere/go-app/blob/master/pkg/app/shell.go#L37">Shell</a>
 					<a class="permalink" href="#Shell" id="src-Shell">¶</a>
 
 

diff --git a/pkg/app/gen/app.css b/pkg/app/gen/app.css
@@ -1,8 +1,11 @@
-/* Loader */
+/*------------------------------------------------------------------------------
+  Loader
+------------------------------------------------------------------------------*/
 .goapp-app-info {
   position: fixed;
   top: 0;
   left: 0;
+  z-index: 1000;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -61,8 +64,9 @@
   }
 }
 
-/* Not found */
-
+/*------------------------------------------------------------------------------
+  Not found
+------------------------------------------------------------------------------*/
 .goapp-notfound-title {
   display: flex;
   justify-content: center;
@@ -71,100 +75,6 @@
   font-weight: 100;
 }
 
-/* Menu */
-#app-contextmenu-background {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  left: 0;
-  top: 0;
-  z-index: 42000;
-}
-
-.goapp-contextmenu {
-  position: fixed;
-  min-width: 150px;
-  max-width: 480px;
-  padding: 6px 0;
-  border-radius: 6px;
-  border: solid 1px rgba(255, 255, 255, 0.1);
-  background-color: rgba(40, 38, 37, 0.97);
-  color: white;
-  -webkit-box-shadow: -1px 12px 38px 0px rgba(0, 0, 0, 0.6);
-  -moz-box-shadow: -1px 12px 38px 0px rgba(0, 0, 0, 0.6);
-  box-shadow: -1px 12px 38px 0px rgba(0, 0, 0, 0.6);
-}
-
-@media (prefers-color-scheme: light) {
-  .goapp-contextmenu {
-    color: black;
-    background-color: rgba(221, 221, 221, 0.97);
-    border: solid 1px rgba(0, 0, 0, 0.2);
-  }
-}
-
-.goapp-contextmenu-hidden {
-  display: none;
-}
-
-.goapp-contextmenu-visible {
-  display: block;
-}
-
-.goapp-menuitem {
-  display: flex;
-  align-items: center;
-  padding: 3px 24px;
-  margin: 0;
-  border: none;
-  width: 100%;
-  cursor: pointer;
-  outline: inherit;
-  background-color: transparent;
-  text-align: left;
-  color: currentColor;
-}
-
-.goapp-menuitem:hover {
-  background-color: deepskyblue;
-}
-
-.goapp-menuitem:disabled {
-  opacity: 0.15;
-  background-color: transparent;
-}
-
-.goapp-menuitem-separator {
-  width: 100%;
-  height: 0;
-  margin: 6px 0;
-  border-top: solid 1px rgba(255, 255, 255, 0.1);
-}
-
-@media (prefers-color-scheme: light) {
-  .goapp-menuitem-separator {
-    border-top: solid 1px rgba(0, 0, 0, 0.2);
-  }
-}
-
-.goapp-menuitem-label {
-  user-select: none;
-  flex-grow: 1;
-}
-
-.goapp-menuitem-keys {
-  flex-grow: 0;
-  margin-left: 12px;
-  text-transform: capitalize;
-}
-
-.goapp-menuitem-icon {
-  width: 18px;
-  height: 18px;
-  margin-right: 12px;
-}
-
 /*------------------------------------------------------------------------------
   Widget Layout
 ------------------------------------------------------------------------------*/

diff --git a/pkg/app/http.go b/pkg/app/http.go
@@ -593,8 +593,7 @@ func (h *Handler) servePage(w http.ResponseWriter, r *http.Request) {
 	}
 	body := Body().Body(
 		Div().Body(
-			Div().ID("app-pre-render").Body(content),
-			Div().
+			Aside().
 				ID("app-wasm-loader").
 				Class("goapp-app-info").
 				Body(
@@ -607,8 +606,8 @@ func (h *Handler) servePage(w http.ResponseWriter, r *http.Request) {
 						Class("goapp-label").
 						Text(page.loadingLabel),
 				),
+			Div().ID("app-pre-render").Body(content),
 		),
-		Div().ID("app-end"),
 	)
 	if err := mount(&disp, body); err != nil {
 		panic(errors.New("mounting pre-rendering container failed").

diff --git a/pkg/app/scripts.go b/pkg/app/scripts.go