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

🐤 tabs component

Browse source
This commit is contained in:
alonso.torres 2020-03-23 11:33:31 +01:00
parent 2c1919117d
commit c09fe46790
5 changed files with 94 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/styles/main.scss
View file

@ -67,6 +67,7 @@
@import 'main/partials/context-menu';
@import 'main/partials/debug-icons-preview';
@import 'main/partials/editable-label';
@import 'main/partials/tab-container';
//#################################################
// Resources

1
frontend/resources/styles/main/partials/sidebar.scss
View file

@ -78,6 +78,7 @@
flex-wrap: wrap;
overflow-y: auto;
padding-bottom: $medium;
height: 100%;
}
&#layers {

31
frontend/resources/styles/main/partials/tab-container.scss Normal file
View file

@ -0,0 +1,31 @@
.tab-container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.tab-container-tabs {
background: $color-gray-60;
cursor: pointer;
display: flex;
flex-direction: row;
font-size: 12px;
height: 2.5rem;
}
.tab-container-tab-title {
align-items: center;
background: $color-gray-60;
border-radius: 2px 2px 0px 0px;
color: $color-white;
display: flex;
justify-content: center;
margin: 0.5rem 0.25rem 0 0.25rem ;
width: 100%;
&.current{
background: $color-gray-50;
}
}

22
frontend/src/uxbox/main/ui/components/tab_container.cljs Normal file
View file

@ -0,0 +1,22 @@
(ns uxbox.main.ui.components.tab-container
(:require [rumext.alpha :as mf]))
(mf/defc tab-element
[{:keys [children id title]}]
[:div.tab-element
[:div.tab-element-content children]])
(mf/defc tab-container
[{:keys [children selected]}]
(.log js/console (map #(-> % .-props .-title) children))
(let [first-id (-> children first .-props .-id)
state (mf/use-state {:selected first-id})]
[:div.tab-container
[:div.tab-container-tabs
(for [tab children]
[:div.tab-container-tab-title
{:on-click #(swap! state assoc :selected (-> tab .-props .-id))
:class (when (= (:selected @state) (-> tab .-props .-id)) "current")}
(-> tab .-props .-title)])]
[:div.tab-container-content
(filter #(= (:selected @state) (-> % .-props .-id)) children)]]))

39
frontend/src/uxbox/main/ui/workspace/sidebar/libraries.cljs Normal file
View file

@ -0,0 +1,39 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; This Source Code Form is "Incompatible With Secondary Licenses", as
;; defined by the Mozilla Public License, v. 2.0.
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns uxbox.main.ui.workspace.sidebar.libraries
(:require
[lentes.core :as l]
[rumext.alpha :as mf]
[uxbox.common.data :as d]
[uxbox.builtins.icons :as i]
[uxbox.main.data.workspace :as dw]
[uxbox.main.refs :as refs]
[uxbox.main.store :as st]
[uxbox.main.ui.keyboard :as kbd]
[uxbox.main.ui.shapes.icon :as icon]
[uxbox.main.ui.workspace.sortable :refer [use-sortable]]
[uxbox.util.dom :as dom]
[uxbox.util.uuid :as uuid]
[uxbox.util.i18n :as i18n :refer [t]]
[uxbox.main.ui.components.tab-container :refer [tab-container tab-element]]))
(mf/defc libraries-toolbox
[]
(let [locale (i18n/use-locale)]
[:div#libraries.tool-window
[:div.tool-window-bar
[:div "Libraries"]
[:div "All libraries"]]
[:div.tool-window-content
[:& tab-container {:selected :icons :on-change-tab #(println "Change tab")}
[:& tab-element {:id :icons :title "Icons"}
[:p "ICONS TAB"]]
[:& tab-element {:id :images :title "Images"}
[:p "IMAGES TAB"]]]]]))