Browse Source

Add traffic lights to title bar

MrWillCom 3 years ago
parent
commit
355e7c1d3e

+ 3 - 2
src/main/frontend/components/header.css

@@ -2,8 +2,9 @@
   @apply shadow z-10;
   -webkit-app-region: drag;
   
-  padding-top: calc(var(--ls-headbar-inner-top-padding) + var(--ls-win32-title-bar-height));
-  height: calc(var(--ls-headbar-height) + var(--ls-headbar-inner-top-padding) + var(--ls-win32-title-bar-height));
+  padding-top: calc(var(--ls-headbar-inner-top-padding));
+  margin-top: var(--ls-win32-title-bar-height);
+  height: calc(var(--ls-headbar-height) + var(--ls-headbar-inner-top-padding));
   display: flex;
   align-items: center;
   justify-content: space-between;

+ 3 - 1
src/main/frontend/components/win32_title_bar.cljs

@@ -16,4 +16,6 @@
         "Logseq"]]
     [:div.right-side
       {}
-      []]])
+      [:div.minimize]
+      [:div.max-restore]
+      [:div.close]]])

+ 29 - 1
src/main/frontend/components/win32_title_bar.css

@@ -8,6 +8,7 @@
   display: flex;
   justify-content: space-between;
   user-select: none;
+  -webkit-app-region: drag;
 
   > .left-side {
     display: flex;
@@ -15,7 +16,6 @@
 
     > .logo {
       width: 50px;
-      height: var(--ls-win32-title-bar-height);
       display: flex;
       align-items: flex-end;
       justify-content: center;
@@ -25,6 +25,34 @@
       font-size: 12px;
     }
   }
+
+  > .right-side {
+    display: flex;
+    width: 138px;
+    -webkit-app-region: no-drag;
+
+    > * {
+      width: 100%;
+
+      &:hover {
+        background: var(--ls-tertiary-background-color);
+      }
+
+      &:active {
+        background: var(--ls-secondary-background-color);
+      }
+    }
+
+    > .close {
+      &:hover {
+        background: #c42b1c;
+      }
+
+      &:active {
+        background: #b3271c;
+      }
+    }
+  }
 }
 
 .is-win32.is-electron {