3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-20 20:47:01 +02:00
Code Issues Projects Releases Packages Wiki Activity

⚡ Improve css handling performance on title-bar component

Browse source
This commit is contained in:
Andrey Antukh 2023-07-13 15:34:28 +02:00
parent e8de8c2401
commit 00f4abbad9
1 changed files with 15 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/app/main/ui/components/title_bar.cljs
View file

@ -5,14 +5,14 @@
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.components.title-bar (ns app.main.ui.components.title-bar
(:require-macros [app.main.style :refer [css]]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data.macros :as dm]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc title-bar (mf/defc title-bar
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
(let [collapsable? (unchecked-get props "collapsable?") (let [collapsable? (unchecked-get props "collapsable?")
collapsed? (unchecked-get props "collapsed?") collapsed? (unchecked-get props "collapsed?")
@ -21,22 +21,20 @@
children (unchecked-get props "children") children (unchecked-get props "children")
on-btn-click (unchecked-get props "on-btn-click") on-btn-click (unchecked-get props "on-btn-click")
btn-children (unchecked-get props "btn-children") btn-children (unchecked-get props "btn-children")
klass (unchecked-get props "klass")] klass (dm/str (stl/css :title-bar) " "
(unchecked-get props "klass"))]
[:div {:class (dom/classnames (css :title-bar) true [:div {:class klass}
klass true)}
(if collapsable? (if collapsable?
[:button {:class (dom/classnames (css :toggle-btn) true) [:button {:class (stl/css :toggle-btn) :on-click on-collapsed}
:on-click on-collapsed} [:span {:class (stl/css-case
[:span {:class (dom/classnames (css :collased-icon) true :collased-icon true
(css :rotated) collapsed?)} :rotated collapsed?)}
i/arrow-refactor] i/arrow-refactor]
[:div {:class (dom/classnames (css :title) true)} [:div {:class (stl/css :title)} title]]
title]] [:div {:class (stl/css :title-only)} title])
[:div {:class (dom/classnames (css :title-only) true)}
title])
children children
(when (some? on-btn-click) (when (some? on-btn-click)
[:button {:class (dom/classnames (css :title-button) true) [:button {:class (stl/css :title-button)
:on-click on-btn-click} :on-click on-btn-click}
btn-children])])) btn-children])]))