Polish titlebar style

Yukaii · Yukaii · commit 4d323f15527f · 2017-02-17T23:56:23.000+08:00
diff --git a/app.css b/app.css
@@ -16,27 +16,6 @@ webview {
 	flex: 1;
 }
 
-#title-bar {
-	-webkit-app-region: drag;
-	padding: 0.3em 0.7em;
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	background-color: #f8f8f8;
-	color: #484848;
-	transition: color 0.5s, background-color 0.5s;
-}
-
-#title-bar.dark {
-	background-color: #333333;
-	color: white;
-}
-
-#title-bar .window-control {
-	float: right;
-	-webkit-app-region: no-drag;
-}
-
 navbar {
 	height: 23px;
 	align-items: center;
@@ -56,6 +35,7 @@ navbar {
 	justify-content: space-between;
 	-webkit-user-select: none;
 	user-select: none;
+  padding: 0 2px;
 }
 
 navbar.dark {
@@ -68,10 +48,18 @@ navbar.dark .control-buttons>*:hover {
 }
 
 #navbar-container .control-buttons {
-	flex: 1;
 	display: flex;
 }
 
+#navbar-container .control-buttons:nth-child(2) {
+  padding-left: 2em;
+  flex: 1;
+}
+
+#navbar-container .control-buttons:nth-child(3) {
+  font-size: 1.3em;
+}
+
 #navbar-container .control-buttons>* {
 	margin: 0 .3em;
 	cursor: pointer;
diff --git a/index.html b/index.html
@@ -8,35 +8,23 @@
     <link rel="stylesheet" type="text/css" href="./app.css">
   </head>
   <body>
-    <div id="title-bar">
-      <div class="window-control">
-        <button id="menu-btn">
-          <i class="fa fa-bars" aria-hidden="true"></i>
-        </button>
-      </div>
-      <div class="window-control">
-        <button>
-          <i class="fa fa-minus" aria-hidden="true"></i>
-        </button>
-        <button>
-          <i class="fa fa-square-o" aria-hidden="true"></i>
-        </button>
-        <button>
-          <i class="fa fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-    </div>
     <navbar>
       <div id="navbar-container">
         <div class="control-buttons">
           <div class="home">HOME</div>
           <div class="refresh">REFRESH</div>
           <div class="navigate-back" style="margin: 0 1em;">&#x3C;</div>
           <div class="navigate-foward">&#x3E;</div>
+          <div class="more-menu">...</div>
         </div>
-        <div class="control-buttons" style="flex: 2">
+        <div class="control-buttons">
           <div class="title"></div>
         </div>
+        <div class="control-buttons">
+          <div class="minimize-window">-</div>
+          <div class="toggle-window">+</div>
+          <div class="close-window">x</div>
+        </div>
       </div>
     </navbar>
     <script src="renderer.js"></script>
diff --git a/renderer.js b/renderer.js
@@ -17,6 +17,7 @@ onload = () => {
 	/* inject mac specific styles */
 	if (isMac) {
 		document.querySelector('navbar').style.paddingLeft = '75px';
+		document.querySelector('#navbar-container .control-buttons:nth-child(3)').style.display = 'none';
 	}
 
 	if (window.location.search !== '') {
@@ -36,10 +37,8 @@ onload = () => {
 
 		// set dark theme if in home page
 		if (webview.getURL().split('?')[0].split('#')[0].match(/https:\/\/hackmd.io\/$/)) {
-			document.querySelector('#title-bar').className = 'dark';
 			document.querySelector('navbar').className = 'dark';
 		} else {
-			document.querySelector('#title-bar').className = '';
 			document.querySelector('navbar').className = '';
 		}
 
@@ -69,7 +68,7 @@ onload = () => {
 			new Notification('URL copied', { title: 'URL copied', body: webview.getURL() });
 		}
 
-		document.querySelector('button#menu-btn').onclick = () => {
+		document.querySelector('#navbar-container .more-menu').onclick = () => {
 			menu.popup(require('electron').remote.getCurrentWindow());
 		}
 		// webview.openDevTools();

Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@ onload = () => {`
`17`	`17`	`/* inject mac specific styles */`
`18`	`18`	`if (isMac) {`
`19`	`19`	`document.querySelector('navbar').style.paddingLeft = '75px';`
	`20`	`+ document.querySelector('#navbar-container .control-buttons:nth-child(3)').style.display = 'none';`
`20`	`21`	`}`
`21`	`22`
`22`	`23`	`if (window.location.search !== '') {`
`@@ -36,10 +37,8 @@ onload = () => {`
`36`	`37`
`37`	`38`	`// set dark theme if in home page`
`38`	`39`	`if (webview.getURL().split('?')[0].split('#')[0].match(/https:\/\/hackmd.io\/$/)) {`
`39`		`- document.querySelector('#title-bar').className = 'dark';`
`40`	`40`	`document.querySelector('navbar').className = 'dark';`
`41`	`41`	`} else {`
`42`		`- document.querySelector('#title-bar').className = '';`
`43`	`42`	`document.querySelector('navbar').className = '';`
`44`	`43`	`}`
`45`	`44`
`@@ -69,7 +68,7 @@ onload = () => {`
`69`	`68`	`new Notification('URL copied', { title: 'URL copied', body: webview.getURL() });`
`70`	`69`	`}`
`71`	`70`
`72`		`- document.querySelector('button#menu-btn').onclick = () => {`
	`71`	`+ document.querySelector('#navbar-container .more-menu').onclick = () => {`
`73`	`72`	`menu.popup(require('electron').remote.getCurrentWindow());`
`74`	`73`	`}`
`75`	`74`	`// webview.openDevTools();`