demo window example

maxence-charriere · Dec 12, 2018 · 5948e68 · 5948e68
1 parent 4caf56a
commit 5948e68
Show file tree

Hide file tree

Showing 10 changed files with 308 additions and 24 deletions.
diff --git a/examples/demo/hello.go b/examples/demo/hello.go
@@ -5,7 +5,7 @@ type Hello struct {
 	Name string
 }
 
-// Render returns a string that describes the component markup.
+// Render returns a html string that describes the component.
 func (h *Hello) Render() string {
 	return `
 <div class="Layout Hello">
@@ -19,7 +19,7 @@ func (h *Hello) Render() string {
 				world
 			{{end}}!
 		</h1>
-		<input class="Hello-Input" value="{{.Name}}" placeholder="Say something..." onchange="Name" autofocus>
+		<input class="Hello-Input" value="{{.Name}}" placeholder="Say something..." onchange="{{to "Name"}}" autofocus>
 	</div>
 </div>
 	`

diff --git a/examples/demo/main_darwin.go b/examples/demo/main_darwin.go
@@ -14,17 +14,19 @@ func main() {
 	app.Import(
 		&NavPane{},
 		&Hello{},
+		&Window{},
 	)
 
+	entryCompo := "window"
+
 	switch app.Kind {
 	case "web":
 		app.Run(&web.Driver{
-			URL: "/Hello",
+			URL: entryCompo,
 		})
 
 	default:
 		app.Run(&mac.Driver{
-			URL: "/Hello",
 			Settings: mac.Settings{
 				SupportedFiles: []mac.FileType{
 					{
@@ -36,6 +38,16 @@ func main() {
 				URLScheme: "goapp-demo",
 			},
 
+			OnRun: func() {
+				newWindow("main", entryCompo)
+			},
+
+			OnReopen: func(hasVisibleWindow bool) {
+				if !hasVisibleWindow {
+					newWindow("main", entryCompo)
+				}
+			},
+
 			OnFilesOpen: func(filenames []string) {
 				app.Log("opened from:", filenames)
 			},

diff --git a/examples/demo/main_js.go b/examples/demo/main_js.go
@@ -9,6 +9,7 @@ func main() {
 	app.Import(
 		&NavPane{},
 		&Hello{},
+		&Window{},
 	)
 
 	app.Run(&web.Driver{

diff --git a/examples/demo/main_windows.go b/examples/demo/main_windows.go
@@ -14,6 +14,7 @@ func main() {
 	app.Import(
 		&NavPane{},
 		&Hello{},
+		&Window{},
 	)
 
 	switch app.Kind {

diff --git a/examples/demo/navpane.go b/examples/demo/navpane.go
@@ -24,11 +24,11 @@ func (n *NavPane) Render() string {
 	return `
 <div class="NavPane">
 	<h1>Demo</h1>
-	<ul class="NavPane-List">
+	<ul>
 		{{$current := .Current}}
 
 		{{range .Examples}}
-		<li class="NavPane-Elem {{if eq . $current}}Selected{{end}}">
+		<li class="{{if eq . $current}}Selected{{end}}">
 			<a href="{{.}}">{{.}}</a>
 		</li>
 		{{end}}

diff --git a/examples/demo/resources/css/hello.css b/examples/demo/resources/css/hello.css
@@ -1,7 +1,7 @@
 .Hello {
     background-image: url('../space.jpg');
-    background-size: cover;
-    background-position: top;
+    background-size:cover;
+    background-position: right;
 }
 
 .Hello-Content {

diff --git a/examples/demo/resources/css/main.css b/examples/demo/resources/css/main.css
@@ -17,6 +17,21 @@ h1 {
     letter-spacing: 1px;
     font-weight: 200;
     text-transform: lowercase;
+    margin: 0;
+    padding: 38px 24px 0;
+}
+
+h2 {
+    font-weight: 200;
+    text-transform: lowercase;
+    margin: 0;
+    padding: 0 24px;
+}
+
+p {
+    padding: 6px 24px 0;
+    margin: 0;
+    outline: 0;
 }
 
 .Layout {
@@ -29,4 +44,32 @@ h1 {
 
 .Selected a {
     color: deepskyblue;
+}
+
+ul {
+    margin: 0;
+    padding: 12px 0 0;
+}
+
+ul li {
+    margin: 0;
+    padding: 6px 24px 3px;
+}
+
+table {
+    width: calc(100% - 48px);
+    border-collapse: collapse;
+    margin: 12px 24px;
+    table-layout: fixed;
+}
+
+td {
+    border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
+    padding: 12px;
+    text-align: center;
+    border-collapse: collapse;
+}
+
+tr:last-child td {
+    border-bottom: 0;
 }
diff --git a/examples/demo/resources/css/navpane.css b/examples/demo/resources/css/navpane.css
@@ -4,22 +4,6 @@
     background-color: rgba(0, 0, 0, 0.50);
 }
 
-.NavPane h1 {
-    margin: 0;
-    padding: 38px 24px 6px;
-}
-
-.NavPane-List {
-    margin: 3px 0 0;
-    padding: 0;
-    list-style: circle;
-}
-
-.NavPane-Elem {
-    margin: 0;
-    padding: 6px 24px 3px;
-}
-
 .NavPane-Elem a {
     display: block;
     width: 100%;

diff --git a/examples/demo/resources/css/window.css b/examples/demo/resources/css/window.css
@@ -0,0 +1,24 @@
+.Window-Tracking {
+    background-color: rgba(0, 0, 0, 0.25);
+    width: 400px;
+}
+
+.Window-Actions {
+    background-color: rgba(0, 0, 0, 0.5);
+    flex-grow: 1;
+}
+
+.Window-Action-List {
+    margin: 6px 0 0;
+}
+
+.Window-Action {
+    margin: 0;
+    padding: 12px 0;
+    cursor: pointer;
+    -webkit-user-select: none;
+}
+
+.Window-Action:hover {
+    background-color: deepskyblue;
+}