enhance(ux): diagnosis for the shui popup trigger response is not immediate enough

enhance/e2e-browser
charlie 2024-03-29 16:40:30 +08:00
parent 29eaf03447
commit 833384a361
4 changed files with 61 additions and 55 deletions

View File

@ -99,9 +99,13 @@
(assoc :align (name align)))}))))
(defn hide!
([] (when-let [id (some-> (get-popups) (last) :id)] (hide! id)))
([id]
(update-popup! id :open? false)))
([] (when-let [id (some-> (get-popups) (last) :id)] (hide! id 0)))
([id] (hide! id 0))
([id delay]
(let [f #(update-popup! id :open? false)]
(if (and (number? delay) (> delay 0))
(js/setTimeout f delay)
(f)))))
(defn hide-all!
[]

View File

@ -190,7 +190,7 @@
(remove nil?)))]
[:button.button.icon.toolbar-dots-btn
{:title (t :header/more)
:on-click (fn [^js e]
:on-pointer-down (fn [^js e]
(shui/popup-show! (.-target e)
(fn [{:keys [id]}]
(for [{:keys [hr item title options icon]} (items)]
@ -238,8 +238,8 @@
[t]
(let [[downloaded, set-downloaded] (rum/use-state nil)
_ (rum/use-effect!
(fn []
(when-let [channel (and (util/electron?) "auto-updater-downloaded")]
(fn []
(when-let [channel (and (util/electron?) "auto-updater-downloaded")]
(let [callback (fn [_ args]
(js/console.debug "[new-version downloaded] args:" args)
(let [args (bean/->clj args)]

View File

@ -1068,24 +1068,25 @@
(remove nil?)))]
[:div.toolbar-plugins-manager
{:on-click (fn [^js e]
(shui/popup-show! (.-target e)
(fn [{:keys [id]}]
(for [{:keys [hr item title options icon]} (items)]
(let [on-click' (:on-click options)]
(if hr
(shui/dropdown-menu-separator)
(shui/dropdown-menu-item
(assoc options
:on-click (fn [^js e]
(when on-click'
(when-not (false? (on-click' e))
(shui/popup-hide! id)))))
(or item
[:span.flex.items-center.gap-1.w-full
icon [:div title]]))))))
{:as-dropdown? true
:content-props {:class "toolbar-plugins-manager-content"}}))}
{:on-pointer-down
(fn [^js e]
(shui/popup-show! (.-target e)
(fn [{:keys [id]}]
(for [{:keys [hr item title options icon]} (items)]
(let [on-click' (:on-click options)]
(if hr
(shui/dropdown-menu-separator)
(shui/dropdown-menu-item
(assoc options
:on-click (fn [^js e]
(when on-click'
(when-not (false? (on-click' e))
(shui/popup-hide! id)))))
(or item
[:span.flex.items-center.gap-1.w-full
icon [:div title]]))))))
{:as-dropdown? true
:content-props {:class "toolbar-plugins-manager-content"}}))}
[:a.button.relative.toolbar-plugins-manager-trigger
(ui/icon "puzzle" {:size 20})

View File

@ -281,37 +281,38 @@
(shui/trigger-as :a
{:tab-index 0
:class "item cp__repos-select-trigger"
:on-click (fn [^js e]
(check-multiple-windows? state)
(some-> (.-target e)
(.closest "a.item")
(shui/popup-show!
(fn [{:keys [id]}]
[:<>
(header-fn)
(for [{:keys [hr item hover-detail title options icon]} (items-fn)]
(let [on-click' (:on-click options)
href' (:href options)]
(if hr
(shui/dropdown-menu-separator)
(shui/dropdown-menu-item
(assoc options
:title hover-detail
:on-click (fn [^js e]
(when on-click'
(when-not (false? (on-click' e))
(shui/popup-hide! id)))))
(or item
(if href'
[:a.flex.items-center.w-full
{:href href' :on-click #(shui/popup-hide! id)
:style {:color "inherit"}} title]
[:span.flex.items-center.gap-1.w-full
icon [:div title]]))))))])
{:as-dropdown? true
:auto-focus? false
:align "start"
:content-props {:class "repos-list"}})))
:on-pointer-down
(fn [^js e]
(check-multiple-windows? state)
(some-> (.-target e)
(.closest "a.item")
(shui/popup-show!
(fn [{:keys [id]}]
[:<>
(header-fn)
(for [{:keys [hr item hover-detail title options icon]} (items-fn)]
(let [on-click' (:on-click options)
href' (:href options)]
(if hr
(shui/dropdown-menu-separator)
(shui/dropdown-menu-item
(assoc options
:title hover-detail
:on-click (fn [^js e]
(when on-click'
(when-not (false? (on-click' e))
(shui/popup-hide! id)))))
(or item
(if href'
[:a.flex.items-center.w-full
{:href href' :on-click #(shui/popup-hide! id)
:style {:color "inherit"}} title]
[:span.flex.items-center.gap-1.w-full
icon [:div title]]))))))])
{:as-dropdown? true
:auto-focus? false
:align "start"
:content-props {:class "repos-list"}})))
:title repo-name} ;; show full path on hover
[:div.flex.flex-row.items-center
[:div.flex.relative.graph-icon.rounded