3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-31 16:46:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

👹 layout for library

Browse source
This commit is contained in:
alonso.torres 2020-03-13 13:12:02 +01:00
parent e79b190975
commit e700f937db
14 changed files with 492 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/uxbox/builtins/icons.cljs
View file

@ -17,6 +17,7 @@
(def align-right (icon-xref :align-right))
(def alignment (icon-xref :alignment))
(def arrow (icon-xref :arrow))
(def arrow-down (icon-xref :arrow-down))
(def arrow-end (icon-xref :arrow-end))
(def arrow-slide (icon-xref :arrow-slide))
(def artboard (icon-xref :artboard))

3
frontend/src/uxbox/main/ui.cljs
View file

@ -90,7 +90,8 @@
(:dashboard-search
:dashboard-team
:dashboard-project)
:dashboard-project
:dashboard-library)
(mf/element dashboard #js {:route route})
:workspace

6
frontend/src/uxbox/main/ui/dashboard.cljs
View file

@ -16,11 +16,11 @@
[uxbox.common.exceptions :as ex]
[uxbox.common.spec :as us]
[uxbox.main.refs :as refs]
[uxbox.main.ui.dashboard.header :refer [header]]
[uxbox.main.ui.dashboard.sidebar :refer [sidebar]]
[uxbox.main.ui.dashboard.search :refer [search-page]]
[uxbox.main.ui.dashboard.project :refer [project-page]]
[uxbox.main.ui.dashboard.recent-files :refer [recent-files-page]]
[uxbox.main.ui.dashboard.library :refer [library-page]]
[uxbox.main.ui.dashboard.profile :refer [profile-section]]
[uxbox.main.ui.messages :refer [messages-widget]]))
@ -66,7 +66,6 @@
:search-term search-term
:section section}]
[:div.dashboard-content
[:& header]
(case section
:dashboard-search
(mf/element search-page #js {:team-id team-id :search-term search-term})
@ -74,6 +73,9 @@
:dashboard-team
(mf/element recent-files-page #js {:team-id team-id})
:dashboard-library
(mf/element library-page #js {:team-id team-id})
:dashboard-project
(mf/element project-page #js {:team-id team-id
:project-id project-id}))]]])

15
frontend/src/uxbox/main/ui/dashboard/components/context_menu.cljs Normal file
View file

@ -0,0 +1,15 @@
(ns uxbox.main.ui.dashboard.components.context-menu
(:require
[rumext.alpha :as mf]
[uxbox.util.uuid :as uuid]))
(mf/defc context-menu
[{ :keys [ is-open options ]}]
[:div.context-menu
{ :class-name (when is-open "is-open")}
[:ul.context-menu-items
(for [[action-name action-handler] options]
[:li.context-menu-item
{ :key (uuid/next)}
[:a.context-menu-action {:on-click action-handler} action-name]])]])

2
frontend/src/uxbox/main/ui/dashboard/elements.cljs
View file

@ -12,7 +12,7 @@
[uxbox.builtins.icons :as i]
[rumext.core :as mx :include-macros true]
[uxbox.main.ui.lightbox :as lbx]
[uxbox.main.ui.dashboard.header :refer (header)]
#_[uxbox.main.ui.dashboard.header :refer (header)]
[uxbox.util.dom :as dom]))
;; --- Page Title

26
frontend/src/uxbox/main/ui/dashboard/header.cljs
View file

@ -1,26 +0,0 @@
;; 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) 2015-2020 Andrey Antukh <niwi@niwi.nz>
;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns uxbox.main.ui.dashboard.header
(:require
[rumext.alpha :as mf]
[uxbox.util.i18n :as i18n :refer [t]]
[uxbox.main.ui.dashboard.profile :refer [profile-section]]))
;; --- Component: Header
(mf/defc header
[{:keys [profile] :as props}]
(let [locale (i18n/use-locale)]
[:header#main-bar.main-bar
[:h1.dashboard-title "Personal"]
[:a.btn-dashboard "+ New project"]]))

136
frontend/src/uxbox/main/ui/dashboard/library.cljs Normal file
View file

@ -0,0 +1,136 @@
;; 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) 2015-2020 Andrey Antukh <niwi@niwi.nz>
;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns uxbox.main.ui.dashboard.library
(:require
[lentes.core :as l]
[rumext.alpha :as mf]
[uxbox.builtins.icons :as i]
[uxbox.main.store :as st]
[uxbox.main.refs :as refs]
[uxbox.util.i18n :as i18n :refer [t tr]]
[uxbox.main.ui.dashboard.components.context-menu :refer [context-menu]]))
(mf/defc library-header
[{:keys [profile] :as props}]
(let [locale (i18n/use-locale)]
[:header#main-bar.main-bar
[:h1.dashboard-title "Libraries"]
[:nav.library-header-navigation
[:a.library-header-navigation-item "Icons"]
[:a.library-header-navigation-item "Images"]
[:a.library-header-navigation-item "Colors"]]]))
(mf/defc library-sidebar
[]
[:aside.library-sidebar
[:button.library-sidebar-add-item
{:type "button"}
"+ New icon library"]
[:ul.library-sidebar-list
[:li.library-sidebar-list-element [:a "Ecometer"]]
[:li.library-sidebar-list-element [:a "Tipi"]]
[:li.library-sidebar-list-element [:a "Taiga (inspirational)"]]
[:li.library-sidebar-list-element [:a "DKT photo assets"]]]])
(mf/defc library-top-menu
[]
(let [state (mf/use-state {:is-open false})]
[:header.library-top-menu
[:div.library-top-menu-current-element
[:h2.library-top-menu-current-element-name "UXBOX"]
[:a.library-top-menu-current-action
{ :on-click #(swap! state update :is-open not)}
[:span i/arrow-down]]
[:& context-menu {:is-open (:is-open @state)
:options [["Rename" #(println "Rename")]
["Delete" #(println "Delete")]]}]]
[:div.library-top-menu-actions
[:a i/trash]
[:a.btn-dashboard "+ New icon"]]]))
(mf/defc library-icon-card []
(let [state (mf/use-state {:is-open false})]
[:div.library-card.library-icon
[:div.input-checkbox.check-primary
[:input {:type "checkbox"
:id "card"
:on-change #(println "toggle-selection")
#_(:checked false)}]
[:label {:for "card"}]]
[:div.library-card-image i/trash]
[:div.library-card-footer
[:div.library-card-footer-name "my-dear-icon.svg"]
[:div.library-card-footer-timestamp "Less than 5 seconds ago"]
[:div.library-card-footer-menu
{ :on-click #(swap! state update :is-open not) }
i/actions]
[:& context-menu {:is-open (:is-open @state)
:options [["Delete" #(println "Delete")]]}]]]))
(mf/defc library-image-card []
(let [state (mf/use-state {:is-open false})]
[:div.library-card.library-image
[:div.input-checkbox.check-primary
[:input {:type "checkbox"
:id "card"
:on-change #(println "toggle-selection")
#_(:checked false)}]
[:label {:for "card"}]]
[:div.library-card-image
[:img {:src "https://www.placecage.com/200/200"}]]
[:div.library-card-footer
[:div.library-card-footer-name "my-dear-icon.svg"]
[:div.library-card-footer-timestamp "Less than 5 seconds ago"]
[:div.library-card-footer-menu
{ :on-click #(swap! state update :is-open not) }
i/actions]
[:& context-menu {:is-open (:is-open @state)
:options [["Delete" #(println "Delete")]]}]]]))
(mf/defc library-color-card []
(let [state (mf/use-state {:is-open false})]
[:div.library-card.library-color
[:div.input-checkbox.check-primary
[:input {:type "checkbox"
:id "card"
:on-change #(println "toggle-selection")
#_(:checked false)}]
[:label {:for "card"}]]
[:div.library-card-image
{ :style { :background-color "#9B78FF" }}]
[:div.library-card-footer
#_[:*
[:div.library-card-footer-name "my-dear-icon.svg"]
[:div.library-card-footer-timestamp "Less than 5 seconds ago"]]
[:*
[:div.library-card-footer-name "#9B78FF"]
[:div.library-card-footer-color
[:span.library-card-footer-color-label "RGB"]
[:span.library-card-footer-color-rgb "128, 128, 128"]]]
[:div.library-card-footer-menu
{ :on-click #(swap! state update :is-open not) }
i/actions]
[:& context-menu {:is-open (:is-open @state)
:options [["Delete" #(println "Delete")]]}]]]))
(mf/defc library-page
[{:keys [team-id]}]
[:div.library-page
[:& library-header]
[:& library-sidebar]
[:section.library-content
[:& library-top-menu]
[:div.library-page-cards-container
(for [_ (range 0 10)]
#_[:& library-icon-card]
#_[:& library-image-card]
[:& library-color-card])]]])

25
frontend/src/uxbox/main/ui/dashboard/recent_files.cljs
View file

@ -39,7 +39,14 @@
(-> (l/key :recent-files)
(l/derive st/state)))
;; --- Component: Drafts Page
;; --- Component: Recent files
(mf/defc recent-files-header
[{:keys [profile] :as props}]
(let [locale (i18n/use-locale)]
[:header#main-bar.main-bar
[:h1.dashboard-title "Recent"]
[:a.btn-dashboard "+ New project"]]))
(mf/defc recent-project
[{:keys [project files first? locale] :as props}]
@ -70,11 +77,13 @@
recent-files (mf/deref recent-files-ref)
locale (i18n/use-locale)]
(when (and projects recent-files)
[:section.recent-files-page
(for [project projects]
[:& recent-project {:project project
:locale locale
:key (:id project)
:files (get recent-files (:id project))
:first? (= project (first projects))}])])))
[:*
[:& recent-files-header]
[:section.recent-files-page
(for [project projects]
[:& recent-project {:project project
:locale locale
:key (:id project)
:files (get recent-files (:id project))
:first? (= project (first projects))}])]])))

5
frontend/src/uxbox/main/ui/dashboard/sidebar.cljs
View file

@ -24,7 +24,6 @@
[uxbox.main.ui.keyboard :as kbd]
[uxbox.main.ui.confirm :refer [confirm-dialog]]
[uxbox.main.ui.dashboard.common :as common]
[uxbox.main.ui.dashboard.header :refer [header]]
[uxbox.main.ui.messages :refer [messages-widget]]
[uxbox.util.dom :as dom]
[uxbox.util.i18n :as i18n :refer [t tr]]
@ -96,6 +95,8 @@
drafts? (and (= selected-section :dashboard-project)
(= selected-team-id (:default-team-id profile))
(= selected-project-id (:default-project-id profile)))
library? (and (= selected-section :dashboard-library)
(= selected-team-id (:default-team-id profile)))
locale (i18n/use-locale)]
[:ul.library-elements
[:li.recent-projects
@ -113,6 +114,8 @@
[:li
{:on-click #(st/emit! (rt/nav :dashboard-library {:team-id team-id}))
:class-name (when library? "current")}
i/icon-set
[:span.element-title (t locale "dashboard.sidebar.libraries")]]