refactor(ui): make some buttons base on ui/button component

This commit is contained in:
charlie
2021-03-03 13:21:48 +08:00
committed by Tienson Qin
parent 2670862c27
commit eff41b7cae
4 changed files with 38 additions and 49 deletions

View File

@@ -55,7 +55,8 @@
(when (and (state/logged?) (not (util/electron?)))
(ui/button
"Add another git repo"
:href (rfe/href :repo-add nil {:graph-types "github"})))]
:href (rfe/href :repo-add nil {:graph-types "github"})
:intent "logseq"))]
(for [{:keys [id url] :as repo} repos]
(let [local? (config/local-db? url)]
[:div.flex.justify-between.mb-1 {:key id}

View File

@@ -81,10 +81,13 @@
(let [update-pending? (state/sub :electron/updater-pending?)
{:keys [type payload]} (state/sub :electron/updater)]
[:div.cp__settings-app-updater
[:button.ui__button_base.is-logseq.check-update
{:disabled update-pending?
:on-click #(js/window.apis.checkForUpdates false)}
(if update-pending? "Checking ..." "Check for updates")]
(ui/button
(if update-pending? "Checking ..." "Check for updates")
:intent "logseq"
:class "check-update"
:disabled update-pending?
:on-click #(js/window.apis.checkForUpdates false))
(when-not (or update-pending?
(string/blank? type))
[:div.update-state
@@ -121,12 +124,12 @@
[:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse
[:span.flex.w-full.rounded-md.sm:ml-3.sm:w-auto
[:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
{:type "button"
{:type "button"
:on-click user-handler/delete-account!}
(t :user/delete-account)]]
[:span.mt-3.flex.w-full.rounded-md.sm:mt-0.sm:w-auto
[:button.inline-flex.justify-center.w-full.rounded-md.border.border-gray-300.px-4.py-2.bg-white.text-base.leading-6.font-medium.text-gray-700.shadow-sm.hover:text-gray-500.focus:outline-none.focus:border-blue-300.focus:shadow-outline-blue.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
{:type "button"
{:type "button"
:on-click close-fn}
"Cancel"]]]]))
@@ -197,10 +200,10 @@
(assoc :selected "selected"))
(:label language)])]]]]
;; config.edn
;; config.edn
(when current-repo
[:div.mt-5.text-sm
[:a {:href (rfe/href :file {:path (config/get-config-path)})
[:a {:href (rfe/href :file {:path (config/get-config-path)})
:on-click #(js/setTimeout (fn [] (ui-handler/toggle-settings-modal!)))}
(t :settings-page/edit-config-edn)]])]
@@ -257,12 +260,12 @@
(let [value (not enable-timetracking?)]
(config-handler/set-config! :feature/enable-timetracking? value))))
;; (toggle "enable_block_time"
;; (t :settings-page/enable-block-time)
;; enable-block-time?
;; (fn []
;; (let [value (not enable-block-time?)]
;; (config-handler/set-config! :feature/enable-block-time? value))))
;; (toggle "enable_block_time"
;; (t :settings-page/enable-block-time)
;; enable-block-time?
;; (fn []
;; (let [value (not enable-block-time?)]
;; (config-handler/set-config! :feature/enable-block-time? value))))
(toggle "enable_journals"
(t :settings-page/enable-journals)
@@ -357,12 +360,11 @@
(user-handler/set-cors! server)
(notification/show! "Custom CORS proxy updated successfully!" :success)))))}]]]]
(ui/admonition
:important
[:p (t :settings-page/dont-use-other-peoples-proxy-servers)
[:a {:href "https://github.com/isomorphic-git/cors-proxy"
:target "_blank"}
"https://github.com/isomorphic-git/cors-proxy"]])
])
:important
[:p (t :settings-page/dont-use-other-peoples-proxy-servers)
[:a {:href "https://github.com/isomorphic-git/cors-proxy"
:target "_blank"}
"https://github.com/isomorphic-git/cors-proxy"]])])
(when logged?
[:div

View File

@@ -105,21 +105,21 @@
opts))
(defn button
[text & {:keys [background href intent]
[text & {:keys [background href class intent]
:as option}]
(let [class (if intent (str "is-" intent) ".bg-indigo-600.hover:bg-indigo-700.focus:border-indigo-700.active:bg-indigo-700")
class (if background (string/replace class "indigo" background) class)]
(let [klass (if-not intent ".bg-indigo-600.hover:bg-indigo-700.focus:border-indigo-700.active:bg-indigo-700")
klass (if background (string/replace klass "indigo" background) klass)]
(if href
[:a.ui__button.is-link
(merge
{:type "button"
:class (util/hiccup->class class)}
:class (str (util/hiccup->class klass) " " class)}
(dissoc option :background))
text]
[:button.ui__button
(merge
{:type "button"
:class (util/hiccup->class class)}
:class (str (util/hiccup->class klass) " " class)}
(dissoc option :background))
text])))

View File

@@ -95,37 +95,23 @@
text-sm leading-4 font-medium rounded-md text-white
focus:outline-none transition ease-in-out duration-150 mt-1;
&:disabled {
opacity: .5;
}
&.is-link {
@apply text-white;
}
&.is-logseq {
@apply focus:border-gray-500 hover:text-blue-600
dark:hover:text-gray-200;
&[intent='logseq'] {
@apply focus:border-gray-500 dark:hover:text-gray-200;
color: var(--ls-primary-text-color);
background: var(--ls-secondary-background-color);
}
}
.ui__button_base {
@apply inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4
font-medium rounded-md text-white
bg-gray-500 hover:bg-gray-700 active:bg-gray-700
focus:border-gray-700 focus:shadow-outline-gray
focus:outline-none transition
ease-in-out duration-150 mt-1;
&.is-logseq {
@apply focus:border-gray-500;
color: var(--ls-primary-text-color);
background: var(--ls-secondary-background-color);
}
&.is-primary {
@apply bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-700
focus:border-indigo-700 focus:shadow-outline-indigo;
&:hover {
color: var(--ls-link-text-color);
}
}
}