➕ Make different styles depending on platform

Author: Bartozzz

src/scripts/components/App.jsx

@@ -4,6 +4,7 @@ import Header from "./Header";
 import Content from "./Content";
 import Footer from "./Footer";
 import EditorForumlaPopup from "./Editor/Formula";
+import { getPlatform } from "../utils/PlatformUtils";
 
 class App extends PureComponent {
     state = {
@@ -31,7 +32,7 @@ class App extends PureComponent {
     }
 
     render() {
-        const theme = className("app", "qilin-panel", {
+        const theme = className("app", "qilin-panel", `is-${getPlatform()}`, {
             "is-light": !this.state.isThemeToggled,
             "is-dark": this.state.isThemeToggled,
         });

src/scripts/components/Header.jsx

@@ -34,15 +34,15 @@ class Header extends PureComponent {
     }
 
     render() {
-        const themeIcon = className("qilin-button-icon", {
+        const themeButton = className("qilin-button", {
             "is-active": this.props.isThemeToggled,
         });
 
-        const forumlaIcon = className("qilin-button-icon", {
+        const formulaButton = className("qilin-button", {
             "is-active": this.props.isFormulaToggled,
         });
 
-        const previewIcon = className("qilin-button-icon", {
+        const previewButton = className("qilin-button", {
             "is-active": this.props.isPreviewToggled,
         });
 
@@ -59,16 +59,16 @@ class Header extends PureComponent {
                 </div>
 
                 <div className="app-header-buttons">
-                    <button className="qilin-button" onClick={this.props.toggleTheme} role="menuitem">
-                        <ReactSVG className={themeIcon} path={require("../../images/icons/menu/theme.svg")} />
+                    <button className={themeButton} onClick={this.props.toggleTheme} role="menuitem">
+                        <ReactSVG className="qilin-button-icon" path={require("../../images/icons/menu/theme.svg")} />
                     </button>
 
-                    <button className="qilin-button" onClick={this.props.toggleFormula} role="menuitem">
-                        <ReactSVG className={forumlaIcon} path={require("../../images/icons/menu/formula.svg")} />
+                    <button className={formulaButton} onClick={this.props.toggleFormula} role="menuitem">
+                        <ReactSVG className="qilin-button-icon" path={require("../../images/icons/menu/formula.svg")} />
                     </button>
 
-                    <button className="qilin-button" onClick={this.props.togglePreview} role="menuitem">
-                        <ReactSVG className={previewIcon} path={require("../../images/icons/menu/preview.svg")} />
+                    <button className={previewButton} onClick={this.props.togglePreview} role="menuitem">
+                        <ReactSVG className="qilin-button-icon" path={require("../../images/icons/menu/preview.svg")} />
                     </button>
                 </div>
             </div>

src/scripts/utils/PlatformUtils.js

@@ -0,0 +1,14 @@
+import os from "os";
+
+export function getPlatform() {
+    switch (os.platform()) {
+    case "android":
+        return "android";
+    case "win32":
+        return "windows";
+    case "darwin":
+        return "darwin";
+    default:
+        return "linux";
+    }
+}

src/styles/components/_app.scss

@@ -7,12 +7,10 @@
 
     &-header {
         display: grid;
+        grid-template-areas: "a b c";
         grid-template-columns: 1fr auto 1fr;
 
-        align-items: center;
-        justify-content: center;
-
-        height: 50px;
+        height: auto;
         width: 100vw;
 
         -webkit-app-region: drag;
@@ -23,20 +21,6 @@
             display: flex;
             outline: none;
         }
-
-        &-controls {
-            justify-self: start;
-        }
-
-        &-title {
-            justify-self: center;
-        }
-
-        &-buttons {
-            justify-self: end;
-
-            margin: 0 11px;
-        }
     }
 
     &-content {
@@ -51,7 +35,7 @@
 
             .is-preview-hidden {
                 .Pane1 { width: 100% !important; }
-                .Pane2 { width: 0    !important; }
+                .Pane2 { width: 0 !important; }
             }
         }
     }

src/styles/components/_controls.scss

@@ -1,20 +1,13 @@
 .controls-container {
-    display: flex;
-
-    margin: 0 18px;
-    padding: 0;
+    display: grid;
+    grid-template-areas: "a b c";
+    grid-template-columns: auto auto auto;
 
     .control-close,
     .control-maximize,
     .control-minimize {
         content: "";
 
-        width: 14px;
-        height: 14px;
-
-        margin: 0 10px 0 0;
-        padding: 0;
-
         outline: none;
         transition: all 100ms ease;
 

src/styles/components/_editor-preview.scss

@@ -7,4 +7,20 @@
 
     padding: 1rem;
     margin: 0;
+
+    pre {
+        margin: 1rem 0;
+        padding: .5rem;
+
+        overflow-x: scroll;
+        overflow-y: scroll;
+
+        code {
+            padding: 0;
+            margin: 0;
+
+            // Resizing bug:
+            width: 0;
+        }
+    }
 }

src/styles/components/qilin/_button.scss

@@ -3,32 +3,26 @@
     align-items: center;
     justify-content: center;
 
-    min-width: 26px;
-    min-height: 20px;
-
-    margin: 7px;
-
-    border-width: 0;
-    border-radius: 4px;
-    border-style: solid;
+    border: none;
+    outline: none;
+    cursor: pointer;
 
     overflow-x: hidden;
     overflow-y: hidden;
 
-    outline: none;
-    cursor: pointer;
-
     -webkit-appearance: none;
     -webkit-app-region: no-drag;
 
+    transition: all 100ms ease;
+
     &.is-big {
         padding: .5rem 1rem;
     }
 
     &-icon {
-        height: 14px;
+        height: 15px;
         width: auto;
 
-        transition: all 300ms ease;
+        transition: all 100ms ease;
     }
 }

src/styles/platforms/darwin/components/_app.scss

@@ -0,0 +1,20 @@
+.app {
+    &-header {
+        height: 50px;
+
+        &-controls,
+        &-buttons,
+        &-title {
+            justify-content: center;
+            align-items: center;
+        }
+
+        &-buttons {
+            margin: 0 11px;
+        }
+
+        &-controls  { grid-area: a; justify-self: start; }
+        &-buttons   { grid-area: c; justify-self: end; }
+        &-title     { grid-area: b; justify-self: center; }
+    }
+}

src/styles/platforms/darwin/components/_controls.scss

@@ -0,0 +1,18 @@
+.controls-container {
+    margin: 0 18px;
+    padding: 0;
+
+    .control-close,
+    .control-maximize,
+    .control-minimize {
+        width: 14px;
+        height: 14px;
+
+        margin: 0 10px 0 0;
+        padding: 0;
+    }
+
+    .control-close      { grid-area: a; }
+    .control-minimize   { grid-area: b; }
+    .control-maximize   { grid-area: c; }
+}

src/styles/platforms/darwin/components/qilin/_button.scss

@@ -0,0 +1,6 @@
+.qilin-button {
+    min-width: 25px;
+    min-height: 20px;
+
+    margin: 7px;
+}