mirror of
https://github.com/penpot/penpot.git
synced 2025-06-04 00:01:38 +02:00
530 lines
18 KiB
Clojure
530 lines
18 KiB
Clojure
;; 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/.
|
|
;;
|
|
;; Copyright (c) UXBOX Labs SL
|
|
|
|
(ns app.main.ui.dashboard.sidebar
|
|
(:require
|
|
[app.common.data :as d]
|
|
[app.common.data.macros :as dm]
|
|
[app.common.spec :as us]
|
|
[app.config :as cf]
|
|
[app.main.data.dashboard :as dd]
|
|
[app.main.data.events :as ev]
|
|
[app.main.data.messages :as msg]
|
|
[app.main.data.modal :as modal]
|
|
[app.main.data.users :as du]
|
|
[app.main.refs :as refs]
|
|
[app.main.store :as st]
|
|
[app.main.ui.components.dropdown :refer [dropdown]]
|
|
[app.main.ui.dashboard.comments :refer [comments-section]]
|
|
[app.main.ui.dashboard.inline-edition :refer [inline-edition]]
|
|
[app.main.ui.dashboard.project-menu :refer [project-menu]]
|
|
[app.main.ui.dashboard.team-form]
|
|
[app.main.ui.icons :as i]
|
|
[app.util.dom :as dom]
|
|
[app.util.dom.dnd :as dnd]
|
|
[app.util.i18n :as i18n :refer [tr]]
|
|
[app.util.keyboard :as kbd]
|
|
[app.util.object :as obj]
|
|
[app.util.router :as rt]
|
|
[beicon.core :as rx]
|
|
[cljs.spec.alpha :as s]
|
|
[goog.functions :as f]
|
|
[rumext.alpha :as mf]))
|
|
|
|
(mf/defc sidebar-project
|
|
[{:keys [item selected?] :as props}]
|
|
(let [dstate (mf/deref refs/dashboard-local)
|
|
selected-files (:selected-files dstate)
|
|
selected-project (:selected-project dstate)
|
|
edit-id (:project-for-edit dstate)
|
|
|
|
local (mf/use-state
|
|
{:menu-open false
|
|
:menu-pos nil
|
|
:edition? (= (:id item) edit-id)
|
|
:dragging? false})
|
|
|
|
on-click
|
|
(mf/use-callback
|
|
(mf/deps item)
|
|
(fn []
|
|
(st/emit! (dd/go-to-files (:id item)))))
|
|
|
|
on-menu-click
|
|
(mf/use-callback
|
|
(fn [event]
|
|
(let [position (dom/get-client-position event)]
|
|
(dom/prevent-default event)
|
|
(swap! local assoc
|
|
:menu-open true
|
|
:menu-pos position))))
|
|
|
|
on-menu-close
|
|
(mf/use-callback #(swap! local assoc :menu-open false))
|
|
|
|
on-edit-open
|
|
(mf/use-callback #(swap! local assoc :edition? true))
|
|
|
|
on-edit
|
|
(mf/use-callback
|
|
(mf/deps item)
|
|
(fn [name]
|
|
(st/emit! (-> (dd/rename-project (assoc item :name name))
|
|
(with-meta {::ev/origin "dashboard:sidebar"})))
|
|
(swap! local assoc :edition? false)))
|
|
|
|
on-drag-enter
|
|
(mf/use-callback
|
|
(mf/deps selected-project)
|
|
(fn [e]
|
|
(when (dnd/has-type? e "penpot/files")
|
|
(dom/prevent-default e)
|
|
(when-not (dnd/from-child? e)
|
|
(when (not= selected-project (:id item))
|
|
(swap! local assoc :dragging? true))))))
|
|
|
|
on-drag-over
|
|
(mf/use-callback
|
|
(fn [e]
|
|
(when (dnd/has-type? e "penpot/files")
|
|
(dom/prevent-default e))))
|
|
|
|
on-drag-leave
|
|
(mf/use-callback
|
|
(fn [e]
|
|
(when-not (dnd/from-child? e)
|
|
(swap! local assoc :dragging? false))))
|
|
|
|
on-drop-success
|
|
(mf/use-callback
|
|
(mf/deps (:id item))
|
|
(st/emitf (msg/success (tr "dashboard.success-move-file"))
|
|
(dd/go-to-files (:id item))))
|
|
|
|
on-drop
|
|
(mf/use-callback
|
|
(mf/deps item selected-files)
|
|
(fn [_]
|
|
(swap! local assoc :dragging? false)
|
|
(when (not= selected-project (:id item))
|
|
(let [data {:ids selected-files
|
|
:project-id (:id item)}
|
|
mdata {:on-success on-drop-success}]
|
|
(st/emit! (dd/move-files (with-meta data mdata)))))))]
|
|
|
|
[:*
|
|
[:li {:class (if selected? "current"
|
|
(when (:dragging? @local) "dragging"))
|
|
:on-click on-click
|
|
:on-double-click on-edit-open
|
|
:on-context-menu on-menu-click
|
|
:on-drag-enter on-drag-enter
|
|
:on-drag-over on-drag-over
|
|
:on-drag-leave on-drag-leave
|
|
:on-drop on-drop}
|
|
(if (:edition? @local)
|
|
[:& inline-edition {:content (:name item)
|
|
:on-end on-edit}]
|
|
[:span.element-title (:name item)])]
|
|
[:& project-menu {:project item
|
|
:show? (:menu-open @local)
|
|
:left (:x (:menu-pos @local))
|
|
:top (:y (:menu-pos @local))
|
|
:on-edit on-edit-open
|
|
:on-menu-close on-menu-close}]]))
|
|
|
|
(mf/defc sidebar-search
|
|
[{:keys [search-term team-id] :as props}]
|
|
(let [search-term (or search-term "")
|
|
focused? (mf/use-state false)
|
|
emit! (mf/use-memo #(f/debounce st/emit! 500))
|
|
|
|
on-search-focus
|
|
(mf/use-callback
|
|
(mf/deps team-id)
|
|
(fn [event]
|
|
(reset! focused? true)
|
|
(let [value (dom/get-target-val event)]
|
|
(dom/select-text! (dom/get-target event))
|
|
(emit! (dd/go-to-search value)))))
|
|
|
|
on-search-blur
|
|
(mf/use-callback
|
|
(fn [_]
|
|
(reset! focused? false)))
|
|
|
|
on-search-change
|
|
(mf/use-callback
|
|
(mf/deps team-id)
|
|
(fn [event]
|
|
(let [value (dom/get-target-val event)]
|
|
(emit! (dd/go-to-search value)))))
|
|
|
|
on-clear-click
|
|
(mf/use-callback
|
|
(mf/deps team-id)
|
|
(fn [_]
|
|
(let [search-input (dom/get-element "search-input")]
|
|
(dom/clean-value! search-input)
|
|
(dom/focus! search-input)
|
|
(emit! (dd/go-to-search)))))
|
|
|
|
on-key-press
|
|
(mf/use-callback
|
|
(fn [e]
|
|
(when (kbd/enter? e)
|
|
(dom/prevent-default e)
|
|
(dom/stop-propagation e))))]
|
|
|
|
[:form.sidebar-search
|
|
[:input.input-text
|
|
{:key "images-search-box"
|
|
:id "search-input"
|
|
:type "text"
|
|
:placeholder (tr "dashboard.search-placeholder")
|
|
:default-value search-term
|
|
:auto-complete "off"
|
|
:on-focus on-search-focus
|
|
:on-blur on-search-blur
|
|
:on-change on-search-change
|
|
:on-key-press on-key-press
|
|
:ref #(when % (set! (.-value %) search-term))}]
|
|
|
|
(if (or @focused? (seq search-term))
|
|
[:div.clear-search
|
|
{:on-click on-clear-click}
|
|
i/close]
|
|
|
|
[:div.search
|
|
{:on-click on-clear-click}
|
|
i/search])]))
|
|
|
|
(mf/defc teams-selector-dropdown
|
|
[{:keys [profile] :as props}]
|
|
(let [teams (mf/deref refs/teams)
|
|
|
|
on-create-clicked
|
|
(mf/use-callback
|
|
(st/emitf (modal/show :team-form {})))
|
|
|
|
team-selected
|
|
(mf/use-callback
|
|
(fn [team-id]
|
|
(st/emit! (dd/go-to-projects team-id))))]
|
|
|
|
[:ul.dropdown.teams-dropdown
|
|
[:li.title (tr "dashboard.switch-team")]
|
|
[:hr]
|
|
[:li.team-name {:on-click (partial team-selected (:default-team-id profile))}
|
|
[:span.team-icon i/logo-icon]
|
|
[:span.team-text (tr "dashboard.your-penpot")]]
|
|
|
|
(for [team (remove :is-default (vals teams))]
|
|
[:li.team-name {:on-click (partial team-selected (:id team))
|
|
:key (dm/str (:id team))}
|
|
[:span.team-icon
|
|
[:img {:src (cf/resolve-team-photo-url team)}]]
|
|
[:span.team-text {:title (:name team)} (:name team)]])
|
|
|
|
[:hr]
|
|
[:li.action {:on-click on-create-clicked :data-test "create-new-team"}
|
|
(tr "dashboard.create-new-team")]]))
|
|
|
|
(s/def ::member-id ::us/uuid)
|
|
(s/def ::leave-modal-form
|
|
(s/keys :req-un [::member-id]))
|
|
|
|
(mf/defc team-options-dropdown
|
|
[{:keys [team profile] :as props}]
|
|
(let [go-members (st/emitf (dd/go-to-team-members))
|
|
go-invitations (st/emitf (dd/go-to-team-invitations))
|
|
go-settings (st/emitf (dd/go-to-team-settings))
|
|
|
|
members-map (mf/deref refs/dashboard-team-members)
|
|
members (vals members-map)
|
|
can-rename? (or (get-in team [:permissions :is-owner]) (get-in team [:permissions :is-admin]))
|
|
|
|
on-success
|
|
(fn []
|
|
(st/emit! (dd/go-to-projects (:default-team-id profile))
|
|
(modal/hide)
|
|
(du/fetch-teams)))
|
|
|
|
on-error
|
|
(fn [{:keys [code] :as error}]
|
|
(condp = code
|
|
:no-enough-members-for-leave
|
|
(rx/of (msg/error (tr "errors.team-leave.insufficient-members")))
|
|
|
|
:member-does-not-exist
|
|
(rx/of (msg/error (tr "errors.team-leave.member-does-not-exists")))
|
|
|
|
:owner-cant-leave-team
|
|
(rx/of (msg/error (tr "errors.team-leave.owner-cant-leave")))
|
|
|
|
(rx/throw error)))
|
|
|
|
leave-fn
|
|
(fn [member-id]
|
|
(let [params (cond-> {} (uuid? member-id) (assoc :reassign-to member-id))]
|
|
(st/emit! (dd/leave-team (with-meta params
|
|
{:on-success on-success
|
|
:on-error on-error})))))
|
|
delete-fn
|
|
(fn []
|
|
(st/emit! (dd/delete-team (with-meta team {:on-success on-success
|
|
:on-error on-error}))))
|
|
on-rename-clicked
|
|
(fn []
|
|
(st/emit! (modal/show :team-form {:team team})))
|
|
|
|
on-leave-clicked
|
|
(st/emitf (modal/show
|
|
{:type :confirm
|
|
:title (tr "modals.leave-confirm.title")
|
|
:message (tr "modals.leave-confirm.message")
|
|
:accept-label (tr "modals.leave-confirm.accept")
|
|
:on-accept leave-fn}))
|
|
|
|
on-leave-as-owner-clicked
|
|
(fn []
|
|
(st/emit! (dd/fetch-team-members)
|
|
(modal/show
|
|
{:type :leave-and-reassign
|
|
:profile profile
|
|
:team team
|
|
:accept leave-fn})))
|
|
|
|
leave-and-close
|
|
(st/emitf (modal/show
|
|
{:type :confirm
|
|
:title (tr "modals.leave-confirm.title")
|
|
:message (tr "modals.leave-and-close-confirm.message" (:name team))
|
|
:scd-message (tr "modals.leave-and-close-confirm.hint")
|
|
:accept-label (tr "modals.leave-confirm.accept")
|
|
:on-accept delete-fn}))
|
|
|
|
on-delete-clicked
|
|
(st/emitf
|
|
(modal/show
|
|
{:type :confirm
|
|
:title (tr "modals.delete-team-confirm.title")
|
|
:message (tr "modals.delete-team-confirm.message")
|
|
:accept-label (tr "modals.delete-team-confirm.accept")
|
|
:on-accept delete-fn}))]
|
|
|
|
[:ul.dropdown.options-dropdown
|
|
[:li {:on-click go-members :data-test "team-members"} (tr "labels.members")]
|
|
[:li {:on-click go-invitations :data-test "team-invitations"} (tr "labels.invitations")]
|
|
[:li {:on-click go-settings :data-test "team-settings"} (tr "labels.settings")]
|
|
[:hr]
|
|
(when can-rename?
|
|
[:li {:on-click on-rename-clicked :data-test "rename-team"} (tr "labels.rename")])
|
|
|
|
(cond
|
|
(= (count members) 1)
|
|
[:li {:on-click leave-and-close} (tr "dashboard.leave-team")]
|
|
|
|
(get-in team [:permissions :is-owner])
|
|
[:li {:on-click on-leave-as-owner-clicked :data-test "leave-team"} (tr "dashboard.leave-team")]
|
|
|
|
(> (count members) 1)
|
|
[:li {:on-click on-leave-clicked} (tr "dashboard.leave-team")])
|
|
|
|
|
|
(when (get-in team [:permissions :is-owner])
|
|
[:li.warning {:on-click on-delete-clicked :data-test "delete-team"} (tr "dashboard.delete-team")])]))
|
|
|
|
|
|
(mf/defc sidebar-team-switch
|
|
[{:keys [team profile] :as props}]
|
|
(let [show-team-opts-ddwn? (mf/use-state false)
|
|
show-teams-ddwn? (mf/use-state false)]
|
|
|
|
[:div.sidebar-team-switch
|
|
[:div.switch-content
|
|
[:div.current-team {:on-click #(reset! show-teams-ddwn? true)}
|
|
(if (:is-default team)
|
|
[:div.team-name
|
|
[:span.team-icon i/logo-icon]
|
|
[:span.team-text (tr "dashboard.default-team-name")]]
|
|
[:div.team-name
|
|
[:span.team-icon
|
|
[:img {:src (cf/resolve-team-photo-url team)}]]
|
|
[:span.team-text {:title (:name team)} (:name team)]])
|
|
|
|
[:span.switch-icon
|
|
i/arrow-down]]
|
|
|
|
(when-not (:is-default team)
|
|
[:div.switch-options {:on-click #(reset! show-team-opts-ddwn? true)}
|
|
i/actions])]
|
|
|
|
;; Teams Dropdown
|
|
[:& dropdown {:show @show-teams-ddwn?
|
|
:on-close #(reset! show-teams-ddwn? false)}
|
|
[:& teams-selector-dropdown {:team team
|
|
:profile profile}]]
|
|
|
|
[:& dropdown {:show @show-team-opts-ddwn?
|
|
:on-close #(reset! show-team-opts-ddwn? false)}
|
|
[:& team-options-dropdown {:team team
|
|
:profile profile}]]]))
|
|
|
|
(mf/defc sidebar-content
|
|
[{:keys [projects profile section team project search-term] :as props}]
|
|
(let [default-project-id
|
|
(->> (vals projects)
|
|
(d/seek :is-default)
|
|
(:id))
|
|
|
|
projects? (= section :dashboard-projects)
|
|
fonts? (= section :dashboard-fonts)
|
|
libs? (= section :dashboard-libraries)
|
|
drafts? (and (= section :dashboard-files)
|
|
(= (:id project) default-project-id))
|
|
|
|
go-projects
|
|
(mf/use-callback
|
|
(mf/deps team)
|
|
(st/emitf (rt/nav :dashboard-projects {:team-id (:id team)})))
|
|
|
|
go-fonts
|
|
(mf/use-callback
|
|
(mf/deps team)
|
|
(st/emitf (rt/nav :dashboard-fonts {:team-id (:id team)})))
|
|
|
|
go-drafts
|
|
(mf/use-callback
|
|
(mf/deps team default-project-id)
|
|
(fn []
|
|
(st/emit! (rt/nav :dashboard-files
|
|
{:team-id (:id team)
|
|
:project-id default-project-id}))))
|
|
go-libs
|
|
(mf/use-callback
|
|
(mf/deps team)
|
|
(st/emitf (rt/nav :dashboard-libraries {:team-id (:id team)})))
|
|
|
|
pinned-projects
|
|
(->> (vals projects)
|
|
(remove :is-default)
|
|
(filter :is-pinned))]
|
|
|
|
[:div.sidebar-content
|
|
[:& sidebar-team-switch {:team team :profile profile}]
|
|
[:hr]
|
|
[:& sidebar-search {:search-term search-term
|
|
:team-id (:id team)}]
|
|
[:div.sidebar-content-section
|
|
[:ul.sidebar-nav.no-overflow
|
|
[:li.recent-projects
|
|
{:on-click go-projects
|
|
:class-name (when projects? "current")}
|
|
[:span.element-title (tr "labels.projects")]]
|
|
|
|
[:li {:on-click go-drafts
|
|
:class-name (when drafts? "current")}
|
|
[:span.element-title (tr "labels.drafts")]]
|
|
|
|
|
|
[:li {:on-click go-libs
|
|
:class-name (when libs? "current")}
|
|
[:span.element-title (tr "labels.shared-libraries")]]]]
|
|
|
|
[:hr]
|
|
|
|
[:div.sidebar-content-section
|
|
[:ul.sidebar-nav.no-overflow
|
|
[:li
|
|
{:on-click go-fonts
|
|
:data-test "fonts"
|
|
:class-name (when fonts? "current")}
|
|
[:span.element-title (tr "labels.fonts")]]]]
|
|
|
|
[:hr]
|
|
[:div.sidebar-content-section {:data-test "pinned-projects"}
|
|
(if (seq pinned-projects)
|
|
[:ul.sidebar-nav
|
|
(for [item pinned-projects]
|
|
[:& sidebar-project
|
|
{:item item
|
|
:key (dm/str (:id item))
|
|
:id (:id item)
|
|
:team-id (:id team)
|
|
:selected? (= (:id item) (:id project))}])]
|
|
[:div.sidebar-empty-placeholder
|
|
[:span.icon i/pin]
|
|
[:span.text (tr "dashboard.no-projects-placeholder")]])]]))
|
|
|
|
|
|
(mf/defc profile-section
|
|
[{:keys [profile team] :as props}]
|
|
(let [show (mf/use-state false)
|
|
photo (cf/resolve-profile-photo-url profile)
|
|
|
|
on-click
|
|
(mf/use-callback
|
|
(fn [section event]
|
|
(dom/stop-propagation event)
|
|
(if (keyword? section)
|
|
(st/emit! (rt/nav section))
|
|
(st/emit! section))))]
|
|
|
|
[:div.profile-section
|
|
[:div.profile {:on-click #(reset! show true)
|
|
:data-test "profile-btn"}
|
|
[:img {:src photo}]
|
|
[:span (:fullname profile)]]
|
|
|
|
[:& dropdown {:on-close #(reset! show false)
|
|
:show @show}
|
|
[:ul.dropdown
|
|
[:li {:on-click (partial on-click :settings-profile)
|
|
:data-test "profile-profile-opt"}
|
|
[:span.icon i/user]
|
|
[:span.text (tr "labels.your-account")]]
|
|
[:li.separator {:on-click #(dom/open-new-window "https://help.penpot.app")
|
|
:data-test "help-center-profile-opt"}
|
|
[:span.icon i/help]
|
|
[:span.text (tr "labels.help-center")]]
|
|
[:li {:on-click #(dom/open-new-window "https://penpot.app/libraries-templates.html")
|
|
:data-test "libraries-templates-profile-opt"}
|
|
[:span.icon i/download]
|
|
[:span.text (tr "labels.libraries-and-templates")]]
|
|
;;[:li {:on-click #(dom/open-new-window "https://penpot.app?no-redirect=1")
|
|
[:li {:on-click #(dom/open-new-window "https://landing-next.penpot.app?no-redirect=1")
|
|
:data-test "about-penpot-profile-opt"} ;; Parameter ?no-redirect is to force stay in landing page
|
|
[:span.icon i/logo-icon] ;; instead of redirecting to app
|
|
[:span.text (tr "labels.about-penpot")]]
|
|
|
|
(when (contains? @cf/flags :user-feedback)
|
|
[:li.separator {:on-click (partial on-click :settings-feedback)
|
|
:data-test "feedback-profile-opt"}
|
|
[:span.icon i/msg-info]
|
|
[:span.text (tr "labels.give-feedback")]])
|
|
|
|
[:li.separator {:on-click #(on-click (du/logout) %)
|
|
:data-test "logout-profile-opt"}
|
|
[:span.icon i/exit]
|
|
[:span.text (tr "labels.logout")]]]]
|
|
|
|
(when (and team profile)
|
|
[:& comments-section {:profile profile
|
|
:team team}])]))
|
|
|
|
(mf/defc sidebar
|
|
{::mf/wrap-props false
|
|
::mf/wrap [mf/memo]}
|
|
[props]
|
|
(let [team (obj/get props "team")
|
|
profile (obj/get props "profile")]
|
|
[:div.dashboard-sidebar
|
|
[:div.sidebar-inside
|
|
[:> sidebar-content props]
|
|
[:& profile-section
|
|
{:profile profile
|
|
:team team}]]]))
|