greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

enhance(ui): polish the non-accent colors

pull/10897/head
charlie 2024-01-23 16:36:45 +08:00
parent ea6e07cd2e
commit 388e9f33fc
9 changed files with 58 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/css/shui.css
View File

@ -74,6 +74,10 @@ html {
}
#ui__ac-inner {}
.cp__cmdk {
--lx-gray-07: var(--rx-gray-07);
}
}
}

2
src/main/frontend/colors.cljs
View File

@ -3,7 +3,7 @@
(:require [clojure.string :as string]
[frontend.util :as util]))
(def color-list [:tomato :red :crimson :pink :plum :purple :violet :indigo :blue :cyan :teal :green :grass :orange :brown])
(def color-list [:tomato :red :crimson :pink :plum :purple :violet :indigo :blue :cyan :teal :green :grass :orange])
;(def color-list [:tomato :red :blue])
(defn variable

5
src/main/frontend/common.css
View File

@ -265,8 +265,7 @@ li p:last-child,
}
.admonition-icon {
border-right: 1px solid;
border-right-color: var(--ls-border-color, #ccc);
@apply border-r;
}
i.ti {
@ -527,7 +526,7 @@ svg.tip {
hr {
margin: 2rem 0;
border-color: var(--ls-border-color, #ccc);
border-color: var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05)));
}
.resize {

24
src/main/frontend/components/block.css
View File

@ -180,15 +180,21 @@
position: absolute;
border-radius: 2px;
opacity: 0.6;
}
border-left-color: var(--lx-gray-09, var(--ls-border-color, var(--rx-gray-09)));
.block-children-left-border:hover {
background-color: or(--ls-block-left-color, --lx-gray-11, --ls-primary-text-color);
&:hover {
background-color: var(--lx-gray-10, var(--ls-primary-text-color, var(--rx-gray-10)));
opacity: .7;
}
&:active {
opacity: 1;
}
}
.block-children {
border-left: 1px solid;
border-left-color: or(--lx-gray-04-alpha, --ls-guideline-color, #ddd) !important;
border-left-color: var(--lx-gray-04-alpha, var(--ls-guideline-color, var(--rx-gray-04-alpha))) !important;
padding-top: 2px;
padding-bottom: 3px;
@ -374,7 +380,7 @@
border-radius: 2px;
}
.bullet-container .selected {
span.bullet-container:not(.as-order-list) .selected {
border: 3px solid;
}
}
@ -574,11 +580,11 @@
&:not(.typed-list) {
&.bullet-closed {
background-color: or(--ls-bullet-closed-background, --lx-gray-04-alpha, --ls-block-bullet-border-color, #ced9e0);
background-color: var(--lx-gray-04-alpha, var(--ls-block-bullet-border-color, var(--rx-gray-04-alpha)));
}
.bullet {
background-color: or(--lx-gray-08, --ls-block-bullet-color, #394b59);
background-color: var(--lx-gray-08, var(--ls-block-bullet-color, var(--rx-gray-08)));
transition: transform 0.2s;
}
}
@ -597,11 +603,11 @@
color: var(--ls-primary-text-color);
&:hover > .bullet-container:not(.typed-list) {
background-color: or(--lx-gray-04-alpha, --ls-block-bullet-border-color, #ced9e0);
background-color: var(--lx-gray-04-alpha, var(--ls-block-bullet-border-color, var(--rx-gray-04-alpha)));
.bullet {
transform: scale(1.2);
background-color: or(--lx-gray-08, --ls-block-bullet-color, inherit) !important;
background-color: var(--lx-gray-08, var(--ls-block-bullet-color, var(--rx-gray-08))) !important;
}
}
}

2
src/main/frontend/components/journal.css
View File

@ -7,7 +7,7 @@
.journal-item {
border-top: 1px solid;
border-top-color: or(--ls-journal-page-rule, --lx-gray-07, --ls-border-color, #738694);
border-top-color: var(--lx-gray-07, var(--ls-border-color, var(--rx-gray-06)));
margin: 24px 0;
padding: 24px 0;
min-height: 250px;

43
src/main/frontend/components/settings.cljs
View File

@ -332,33 +332,26 @@
:action pick-theme
:desc (ui/render-keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-theme))})))
(defn accent-color-row []
(defn accent-color-row [_in-modal?]
(let [color-accent (state/sub :ui/radix-color)
pick-theme [:div.grid {:style {:grid-template-columns "repeat(5, 1fr)"
:gap "0.75rem"
:width "100%"
:max-width "16rem"}}
pick-theme [:div.cp__accent-colors-list-wrap
{:class (if _in-modal? "as-modal-picker" "")}
(for [color (concat [:none :logseq] colors/color-list)
:let [active? (= color color-accent)]]
[:div.flex.items-center {:style {:height 28}}
[:div {:class "w-5 h-5 rounded-full flex justify-center items-center transition ease-in duration-100 hover:cursor-pointer hover:opacity-100"
:title color
:style {:background-color (colors/variable color :09)
:outline-color (colors/variable color (if active? :07 :06))
:outline-width (if active? "4px" "1px")
:outline-style :solid
:opacity (if active? 1 0.5)}
:on-click (fn [_e] (state/set-color-accent! color))}
[:div {:class "w-2 h-2 rounded-full transition ease-in duration-100"
:style {:background-color (str "var(--rx-" (name color) "-07)")
:opacity (if active? 1 0)}}]]])
(when color-accent
[:div.col-span-5
(shui-ui/button
{:variant :secondary
:size :xs
:on-click (fn [_e] (state/unset-color-accent!))}
"Back to default color")])]]
[:div
{:class "w-5 h-5 rounded-full flex justify-center items-center transition ease-in duration-100 hover:cursor-pointer hover:opacity-100"
:title color
:tab-index -1
:style {:background-color (colors/variable color :09)
:outline-color (colors/variable color (if active? :07 :06))
:outline-width (if active? "4px" "1px")
:outline-style :solid
:opacity (if active? 1 0.5)}
:on-click (fn [_e] (state/set-color-accent! color))}
[:span {:class "w-2 h-2 rounded-full transition ease-in duration-100"
:style {:background-color (str "var(--rx-" (name color) "-07)")
:opacity (if active? 1 0)}}]]])]]
[:<>
(row-with-button-action {:left-label "Accent color"
@ -370,7 +363,7 @@
(rum/defc modal-accent-colors-inner
[]
[:div.cp__settings-accent-colors-modal-inner
(accent-color-row)])
(accent-color-row true)])
(defn file-format-row [t preferred-format]
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
@ -708,7 +701,7 @@
(language-row t preferred-language)
(theme-modes-row t switch-theme system-theme? dark?)
(when (and (util/electron?) (not util/mac?)) (native-titlebar-row t))
(when show-radix-themes? (accent-color-row))
(when show-radix-themes? (accent-color-row false))
(when (config/global-config-enabled?) (edit-global-config-edn))
(when current-repo (edit-config-edn))
(when current-repo (edit-custom-css))

10
src/main/frontend/components/settings.css
View File

@ -505,4 +505,14 @@ body[data-settings-tab=keymap] {
.panel-content {
@apply sm:min-w-[520px];
}
}
.cp__accent-colors {
&-list-wrap {
@apply grid grid-cols-8 gap-2 max-w-[250px];
&.as-modal-picker {
@apply grid-cols-8 gap-3 pt-1 pb-2 ml-8 max-w-none;
}
}
}

12
src/main/frontend/modules/shortcut/config.cljs
View File

@ -530,10 +530,10 @@
:editor/toggle-open-blocks {:binding "t o"
:fn editor-handler/toggle-open!}
:ui/cycle-color-off {:binding "c o"
:ui/accent-color-reset {:binding "c o"
:fn state/unset-color-accent!}
:ui/cycle-color {:binding "c c"
:ui/accent-colors-picker {:binding "c c"
:fn #(state/pub-event! [:modal/show-accent-colors-modal])}
:git/commit {:binding "mod+g c"
@ -736,8 +736,8 @@
:dev/show-block-ast
:dev/show-page-data
:dev/show-page-ast
:ui/cycle-color
:ui/cycle-color-off])
:ui/accent-colors-picker
:ui/accent-color-reset])
(with-meta {:before m/enable-when-not-editing-mode!}))
:shortcut.handler/misc
@ -851,8 +851,8 @@
:ui/toggle-right-sidebar
:ui/toggle-settings
:ui/toggle-contents
:ui/cycle-color-off
:ui/cycle-color]
:ui/accent-color-reset
:ui/accent-colors-picker]
:shortcut.category/whiteboard
[:editor/new-whiteboard

2
src/main/frontend/state.cljs
View File

@ -2227,7 +2227,7 @@ Similar to re-frame subscriptions"
(util/set-android-theme))
(defn unset-color-accent! []
(swap! state assoc :ui/radix-color nil)
(swap! state assoc :ui/radix-color :logseq)
(storage/remove :ui/radix-color)
(util/set-android-theme))