From 821e0295686231288a077549c2297a029b44c1c9 Mon Sep 17 00:00:00 2001 From: charlie Date: Thu, 2 Mar 2023 14:07:09 +0800 Subject: [PATCH] enhance(ui): move http apis server indicator to right side from toolbar --- src/main/frontend/components/header.cljs | 8 +- src/main/frontend/components/server.cljs | 113 ++++++++++++----------- src/main/frontend/components/server.css | 9 +- 3 files changed, 62 insertions(+), 68 deletions(-) diff --git a/src/main/frontend/components/header.cljs b/src/main/frontend/components/header.cljs index bbd5b3c82b6..8fc3bfaec71 100644 --- a/src/main/frontend/components/header.cljs +++ b/src/main/frontend/components/header.cljs @@ -220,10 +220,7 @@ (mobile-util/native-iphone?)) (state/set-left-sidebar-open! false)) (state/pub-event! [:go/search]))} - (ui/icon "search" {:size ui/icon-size})]))) - - (when (state/feature-http-server-enabled?) - (server/server-indicator (state/sub :electron/server)))]] + (ui/icon "search" {:size ui/icon-size})])))]] [:div.r.flex.drag-region (when (and current-repo @@ -241,6 +238,9 @@ (when config/lsp-enabled? (plugins/hook-ui-items :toolbar)) + (when (state/feature-http-server-enabled?) + (server/server-indicator (state/sub :electron/server))) + (when (util/electron?) (back-and-forward)) diff --git a/src/main/frontend/components/server.cljs b/src/main/frontend/components/server.cljs index 71fd5eba424..0d6fa983e8a 100644 --- a/src/main/frontend/components/server.cljs +++ b/src/main/frontend/components/server.cljs @@ -1,14 +1,14 @@ (ns frontend.components.server (:require - [clojure.string :as string] - [rum.core :as rum] - [electron.ipc :as ipc] - [medley.core :as medley] - [promesa.core :as p] - [frontend.state :as state] - [frontend.util :as util] - [frontend.handler.notification :as notification] - [frontend.ui :as ui])) + [clojure.string :as string] + [rum.core :as rum] + [electron.ipc :as ipc] + [medley.core :as medley] + [promesa.core :as p] + [frontend.state :as state] + [frontend.util :as util] + [frontend.handler.notification :as notification] + [frontend.ui :as ui])) (rum/defcs panel-of-tokens < rum/reactive @@ -125,61 +125,62 @@ [server-state] (rum/use-effect! - (fn [] - (ipc/ipc :server/load-state) - (let [t (js/setTimeout #(when (state/sub [:electron/server :autostart]) - (ipc/ipc :server/do :restart)) 1000)] - #(js/clearTimeout t))) - []) + (fn [] + (ipc/ipc :server/load-state) + (let [t (js/setTimeout #(when (state/sub [:electron/server :autostart]) + (ipc/ipc :server/do :restart)) 1000)] + #(js/clearTimeout t))) + []) (let [{:keys [status error]} server-state status (keyword (util/safe-lower-case status)) - running? (= :running status)] + running? (= :running status) + href (and running? (str "http://" (:host server-state) ":" (:port server-state)))] (rum/use-effect! - #(when error - (notification/show! (str "[Server] " error) :error)) - [error]) + #(when error + (notification/show! (str "[Server] " error) :error)) + [error]) [:div.cp__server-indicator - (ui/icon "api" {:size 24}) - [:code.text-sm.ml-1 - (if-not running? - (string/upper-case (or (:status server-state) "stopped")) - (let [href (str "http://" (:host server-state) ":" (:port server-state))] - [:a.hover:underline {:href href} href]))] - ;; settings menus (ui/dropdown-with-links - (fn [{:keys [toggle-fn]}] - [:span.opacity-50.hover:opacity-80.active:opacity-100 - [:button.button.icon.ml-1 + (fn [{:keys [toggle-fn]}] + [:button.button.icon {:on-click #(toggle-fn)} - (ui/icon "dots-vertical" {:size 16})]]) - ;; items - (->> [(cond - running? - {:title "Stop server" - :options {:on-click #(ipc/ipc :server/do :stop)} - :icon [:span.text-red-500.flex.items-center (ui/icon "player-stop")]} - - :else - {:title "Start server" - :options {:on-click #(ipc/ipc :server/do :restart)} - :icon [:span.text-green-500.flex.items-center (ui/icon "player-play")]}) - - {:title "Authorization tokens" - :options {:on-click #(state/set-modal! - (fn [close] - (panel-of-tokens close)) - {:center? true})} - :icon (ui/icon "key")} - - {:title "Server configurations" - :options {:on-click #(state/set-modal! - (fn [close] - (panel-of-configs close)) - {:center? true})} - :icon (ui/icon "server-cog")}]) - {})])) + (ui/icon (if running? "api" "api-off") {:size 22})]) + + ;; items + (->> [{:hr true} + + (cond + running? + {:title "Stop server" + :options {:on-click #(ipc/ipc :server/do :stop)} + :icon [:span.text-red-500.flex.items-center (ui/icon "player-stop")]} + + :else + {:title "Start server" + :options {:on-click #(ipc/ipc :server/do :restart)} + :icon [:span.text-green-500.flex.items-center (ui/icon "player-play")]}) + + {:title "Authorization tokens" + :options {:on-click #(state/set-modal! + (fn [close] + (panel-of-tokens close)) + {:center? true})} + :icon (ui/icon "key")} + + {:title "Server configurations" + :options {:on-click #(state/set-modal! + (fn [close] + (panel-of-configs close)) + {:center? true})} + :icon (ui/icon "server-cog")}]) + {:links-header + [:div.links-header.flex.justify-center.py-2 + [:span.ml-1.text-sm + (if-not running? + (string/upper-case (or (:status server-state) "stopped")) + [:a.hover:underline {:href href} href])]]})])) diff --git a/src/main/frontend/components/server.css b/src/main/frontend/components/server.css index 479890fd900..f38bd02c26f 100644 --- a/src/main/frontend/components/server.css +++ b/src/main/frontend/components/server.css @@ -1,15 +1,8 @@ .cp__server-indicator { - @apply flex items-center px-1 rounded-md - dark:border-gray-500; + @apply flex items-center rounded-md; .button.icon { width: auto; height: auto; } -} - -.ls-left-sidebar-open { - .cp__server-indicator { - @apply ml-[115px]; - } } \ No newline at end of file