Merge pull request #25 from unisonweb/settings-menu

Move settings from window menu into the app

Author: hojberg

elm-git.json

@@ -1,7 +1,7 @@
 {
     "git-dependencies": {
         "direct": {
-            "https://github.com/unisonweb/ui-core": "6b84c5a4df3a1c5f48f12f1414af11974f5f8e0e"
+            "https://github.com/unisonweb/ui-core": "b172cbdb17eba02f64edfef92a4e4e3d117ea636"
         },
         "indirect": {}
     }

elm.json

@@ -17,6 +17,7 @@
             "elm/parser": "1.1.0",
             "elm/regex": "1.0.0",
             "elm/svg": "1.0.1",
+            "elm/time": "1.0.0",
             "elm/url": "1.0.0",
             "elm-community/html-extra": "3.4.0",
             "elm-community/json-extra": "4.3.0",
@@ -36,7 +37,6 @@
             "elm/bytes": "1.0.8",
             "elm/file": "1.0.5",
             "elm/random": "1.0.0",
-            "elm/time": "1.0.0",
             "elm/virtual-dom": "1.0.3",
             "fredcy/elm-parseint": "2.0.1"
         }

src/Ucm/WelcomeScreen.elm

@@ -230,11 +230,11 @@ view appContext model =
         |> Window.withTitlebarRight
             [ Button.iconThenLabel_ Link.docs Icon.graduationCap "Unison Docs"
                 |> Button.small
-                |> Button.outlined
+                |> Button.subdued
                 |> Button.view
             , Button.iconThenLabel_ Link.share Icon.browse "Find libraries on Unison Share"
                 |> Button.small
-                |> Button.outlined
+                |> Button.subdued
                 |> Button.view
             ]
         |> Window.withoutTitlebarBorder

src/Ucm/WindowMenu.ts

@@ -44,8 +44,8 @@ async function init(appSettings: AppSettings.AppSettings): Promise<Menu> {
         action: async (_) => window.location.reload()
       }),
       await MenuItem.new({
-        id: "clear-app-settings",
-        text: "Clear App Settings",
+        id: "reset-to-factory-settings",
+        text: "Reset to factory settings",
         action: async (_) => {
           await AppSettings.clear();
           window.location.reload();

src/Ucm/WorkspaceScreen.elm

@@ -39,6 +39,7 @@ type alias Model =
     , switchBranch : SwitchBranch.Model
     , modal : WorkspaceScreenModal
     , sidebarVisible : Bool
+    , settingsMenuVisible : Bool
     , keyboardShortcut : KeyboardShortcut.Model
     }
 
@@ -64,6 +65,7 @@ init appContext workspaceContext =
       , switchBranch = SwitchBranch.init
       , modal = NoModal
       , sidebarVisible = True
+      , settingsMenuVisible = False
       , keyboardShortcut = KeyboardShortcut.init appContext.operatingSystem
       }
     , Cmd.batch

src/Window.elm

@@ -1,4 +1,4 @@
-module Window exposing (..)
+port module Window exposing (..)
 
 import Browser
 import Html
@@ -15,7 +15,12 @@ import Html
 import Html.Attributes exposing (attribute, class, classList, id)
 import SplitPane.SplitPane as SplitPane
 import UI
+import UI.ActionMenu as ActionMenu
+import UI.Button as Button
+import UI.Click as Click
+import UI.Icon as Icon
 import UI.Modal as Modal exposing (Modal)
+import Ucm.Link as Link
 
 
 
@@ -24,6 +29,7 @@ import UI.Modal as Modal exposing (Modal)
 
 type alias Model =
     { splitPane : SplitPane.State
+    , isSettingsMenuOpen : Bool
     }
 
 
@@ -32,6 +38,7 @@ init =
     { splitPane =
         SplitPane.init SplitPane.Horizontal
             |> SplitPane.configureSplitter (SplitPane.px 256 Nothing)
+    , isSettingsMenuOpen = False
     }
 
 
@@ -41,6 +48,10 @@ init =
 
 type Msg
     = SplitPaneMsg SplitPane.Msg
+    | ToggleSettingsMenu
+    | ChangeTheme String
+    | ReloadApp
+    | ResetToFactorySettings
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
@@ -56,6 +67,31 @@ update msg model =
             , Cmd.none
             )
 
+        ToggleSettingsMenu ->
+            ( { model | isSettingsMenuOpen = not model.isSettingsMenuOpen }, Cmd.none )
+
+        ChangeTheme theme ->
+            ( model, saveTheme theme )
+
+        ReloadApp ->
+            ( model, reloadApp () )
+
+        ResetToFactorySettings ->
+            ( model, clearSettings () )
+
+
+
+-- PORTS
+
+
+port saveTheme : String -> Cmd msg
+
+
+port reloadApp : () -> Cmd msg
+
+
+port clearSettings : () -> Cmd msg
+
 
 
 -- SUBSCRIPTIONS
@@ -395,8 +431,8 @@ windowControls =
 -- VIEW
 
 
-viewWindowTitlebar : String -> WindowTitlebar msg -> Html msg
-viewWindowTitlebar id_ titlebar_ =
+viewWindowTitlebar : Html msg -> String -> WindowTitlebar msg -> Html msg
+viewWindowTitlebar settingsMenu id_ titlebar_ =
     let
         { left, center, right, transparent, border } =
             case titlebar_ of
@@ -411,15 +447,15 @@ viewWindowTitlebar id_ titlebar_ =
                 WindowTitlebar cfg ->
                     { left = cfg.left
                     , center = cfg.center
-                    , right = cfg.right
+                    , right = cfg.right ++ [ settingsMenu ]
                     , transparent = False
                     , border = cfg.border
                     }
 
                 TextWindowTitlebar cfg ->
                     { left = []
                     , center = [ text cfg.label ]
-                    , right = []
+                    , right = [ settingsMenu ]
                     , transparent = False
                     , border = cfg.border
                     }
@@ -460,6 +496,27 @@ viewWindowFooter id_ footer_ =
 view : (Msg -> msg) -> Model -> Window msg -> Browser.Document msg
 view toMsg model win =
     let
+        settingsMenu =
+            ActionMenu.items
+                (ActionMenu.titleItem "Theme")
+                [ ActionMenu.optionItem Icon.computer "System" (Click.onClick (ChangeTheme "system"))
+                , ActionMenu.optionItem Icon.sun "Unison Light" (Click.onClick (ChangeTheme "unison-light"))
+                , ActionMenu.optionItem Icon.moon "Unison Dark" (Click.onClick (ChangeTheme "unison-dark"))
+                , ActionMenu.dividerItem
+                , ActionMenu.titleItem "Resources"
+                , ActionMenu.optionItem Icon.graduationCap "Unison Docs" Link.docs
+                , ActionMenu.optionItem Icon.browse "Unison Share" Link.share
+                , ActionMenu.dividerItem
+                , ActionMenu.titleItem "Debug"
+                , ActionMenu.optionItem Icon.refresh "Reload" (Click.onClick ReloadApp)
+                , ActionMenu.optionItem Icon.x "Reset to factory settings" (Click.onClick ResetToFactorySettings)
+                ]
+                |> ActionMenu.fromIconButton ToggleSettingsMenu Icon.cog
+                |> ActionMenu.withButtonColor Button.Subdued
+                |> ActionMenu.shouldBeOpen model.isSettingsMenuOpen
+                |> ActionMenu.view
+                |> Html.map toMsg
+
         mainContent =
             case win.leftSidebar of
                 NoWindowSidebar ->
@@ -509,9 +566,9 @@ view toMsg model win =
                 Nothing ->
                     UI.nothing
     in
-    { title = "UCM"
+    { title = "Unison Codebase Manager"
     , body =
-        [ viewWindowTitlebar win.id win.titlebar
+        [ viewWindowTitlebar settingsMenu win.id win.titlebar
         , mainContent
         , viewWindowFooter win.id win.footer
         , modal

src/css/unison-dark.css

@@ -206,6 +206,10 @@ body.unison-dark {
   --u-shadow: var(--color-gray-darken-30-20pct);
 }
 
+.unison-dark .button.subdued {
+  --color-button-default-text: var(--u-color_text);
+}
+
 /* TODO: these component overwrites shouldn't be needed... */
 .unison-dark .definition-doc {
   --color-doc-bg: transparent;
@@ -224,3 +228,6 @@ body.unison-dark {
   --c-color_anchored-overlay_sheet_border: var(--u-color_border);
 }
 
+.unison-dark .action-menu {
+  --c-color_action-menu_sheet_border: var(--u-color_border);
+}

src/css/unison-light.css

@@ -206,21 +206,28 @@ body.unison-light {
   --u-shadow: var(--color-gray-darken-30-20pct);
 }
 
+.unison-light .button.subdued {
+  --color-button-default-text: var(--u-color_text);
+}
+
 /* TODO: these component overwrites shouldn't be needed... */
-.unison-dark .definition-doc {
+.unison-light .definition-doc {
   --color-doc-bg: transparent;
   --color-doc-focus-bg: transparent;
 }
 
-.unison-dark .definition-doc .copyable-source .copy-on-click {
+.unison-light .definition-doc .copyable-source .copy-on-click {
   background: transparent;
 }
 
-.unison-dark .tooltip {
+.unison-light .tooltip {
   --color-tooltip-border: var(--u-color_border);
 }
 
-.unison-dark .anchored-overlay {
+.unison-light .anchored-overlay {
   --c-color_anchored-overlay_sheet_border: var(--u-color_border);
 }
 
+.unison-light .action-menu {
+  --c-color_action-menu_sheet_border: var(--u-color_border);
+}

src/css/window.css

@@ -55,14 +55,6 @@ body:has(.window-footer) {
   padding-left: calc(calc(4rem - 1px) + 0.75rem);
 }
 
-.windows .window-titlebar,
-.linux .window-titlebar {
-  /* 5rem is the distance of the left edge of the traffic control to the very
-   * right edge of the window. The 1px accounts for the border), and 0.75 is the
-   * spacing between the traffic controls and other titlebar controls. */
-  padding-right: calc(calc(5rem - 1px) + 0.75rem);
-}
-
 .window-titlebar.window-titlebar_transparent {
   border: 0;
   background: transparent;

src/main.ts

@@ -29,14 +29,17 @@ try {
 
   // -- AppSettings -----------------------------------------------------------
   const appSettings = await AppSettings.init();
+  const operatingSystem = detectOs(window.navigator);
 
   // -- WindowMenu ------------------------------------------------------------
-  const menu = await WindowMenu.init(appSettings);
-  WindowMenu.mount(menu);
+  if (operatingSystem && operatingSystem === "macOS") {
+    const menu = await WindowMenu.init(appSettings);
+    WindowMenu.mount(menu);
+  }
 
   // -- Elm -------------------------------------------------------------------
   const flags = {
-    operatingSystem: detectOs(window.navigator),
+    operatingSystem: operatingSystem,
     basePath: "",
     apiUrl: "http://127.0.0.1:5858/codebase/api",
     workspaceContext: appSettings.workspaceContexts[0],
@@ -54,9 +57,14 @@ try {
     app.ports.saveTheme?.subscribe(async (theme: Theme.Theme) => {
       appSettings.theme = theme
       AppSettings.save(appSettings);
+      Theme.mount(theme);
     });
 
-    app.ports.clearSettings?.subscribe(AppSettings.clear);
+    app.ports.reloadApp?.subscribe((_: unknown) => window.location.reload());
+    app.ports.clearSettings?.subscribe((_: unknown) => {
+      AppSettings.clear();
+      window.location.reload();
+    });
   }
 
   // -- CSS env classes -------------------------------------------------------