Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-27 15:11:26 -05:00
Code Issues Activity

💄 Move styles to modules

Browse source
This commit is contained in:
alonso.torres 2023-11-17 09:37:36 +01:00
parent c98f2628f0
commit e3b096110f
42 changed files with 14966 additions and 1776 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
frontend/resources/styles/main/layouts/main-layout.scss
View file

@ -53,7 +53,7 @@
// NEW DASHBOARD CSS
.dashboard-layout-refactor {
.delete-me-dashboard-layout-refactor {
background-color: $db-primary;
display: grid;
grid-template-rows: 50px 1fr;
@ -828,7 +828,7 @@
// Dashboard content
.dashboard-project-row .project {
background-color: transparent;
h2 {
color: $df-primary;
font-weight: 400;
@ -852,7 +852,7 @@
border-color: transparent;
margin: 0.8rem 15px;
}
.icon {
svg {
fill: $df-secondary;
@ -871,21 +871,21 @@
}
}
.btn-secondary {
background-color: $db-tertiary;
text-transform: uppercase;
border: none;
color: $df-primary;
border-radius: 8px;
&:hover {
background-color: $db-cuaternary;
color: $da-primary;
svg {
fill: $da-primary;
}
}
}
.btn-secondary {
background-color: $db-tertiary;
text-transform: uppercase;
border: none;
color: $df-primary;
border-radius: 8px;
&:hover {
background-color: $db-cuaternary;
color: $da-primary;
svg {
fill: $da-primary;
}
}
}
// File cards
.dashboard-grid {

239
frontend/src/app/main/ui/components/context_menu_a11y.cljs
View file

@ -5,7 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.components.context-menu-a11y
(:require-macros [app.main.style :refer [css]])
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
@ -66,7 +66,6 @@
left (gobj/get props "left" 0)
fixed? (gobj/get props "fixed?" false)
min-width? (gobj/get props "min-width?" false)
workspace? (gobj/get props "workspace?" false)
origin (gobj/get props "origin")
route (mf/deref refs/route)
new-css-system (mf/use-ctx ctx/new-css-system)
@ -192,107 +191,149 @@
(tm/schedule-on-idle
#(dom/focus! (dom/get-element (first ids)))))
(when (and open? (some? (:levels @local)))
[:> dropdown' props
(if new-css-system
(when (and open? (some? (:levels @local)))
[:> dropdown' props
(let [level (-> @local :levels peek)
original-options (:options level)
parent-original (:parent-option level)]
[:div {:class (stl/css-case :is-selectable is-selectable
:context-menu true
:is-open open?
:fixed fixed?)
:style {:top (+ top (:offset-y @local))
:left (+ left (:offset-x @local))}
:on-key-down (on-key-down original-options parent-original)}
(let [level (-> @local :levels peek)]
[:ul {:class (stl/css-case :min-width min-width?
:context-menu-items true)
:role "menu"
:ref check-menu-offscreen}
(when-let [parent-option (:parent-option level)]
[:*
[:& context-menu-a11y-item
{:id "go-back-sub-option"
:class (stl/css :context-menu-item)
:tab-index "0"
:on-key-down (fn [event]
(dom/prevent-default event))}
[:div {:class (stl/css :context-menu-action :submenu-back)
:data-no-close true
:on-click exit-submenu}
[:span {:class (stl/css :submenu-icon-back)} i/arrow-refactor]
parent-option]]
(let [level (-> @local :levels peek)
original-options (:options level)
parent-original (:parent-option level)]
[:div {:class (if (and new-css-system workspace?)
(dom/classnames (css :is-selectable) is-selectable
(css :context-menu) true
(css :is-open) open?
(css :fixed) fixed?)
(dom/classnames :is-selectable is-selectable
[:li {:class (stl/css :separator)}]])
(for [[index option] (d/enumerate (:options level))]
(let [option-name (:option-name option)
id (:id option)
sub-options (:sub-options option)
option-handler (:option-handler option)
data-test (:data-test option)]
(when option-name
(if (= option-name :separator)
[:li {:key (dm/str "context-item-" index)
:class (stl/css :separator)}]
[:& context-menu-a11y-item
{:id id
:key id
:class (stl/css-case
:is-selected (and selected (= option-name selected))
:selected (and selected (= data-test selected))
:context-menu-item true)
:key-index (dm/str "context-item-" index)
:tab-index "0"
:on-key-down (fn [event]
(dom/prevent-default event))}
(if-not sub-options
[:a {:class (stl/css :context-menu-action)
:on-click #(do (dom/stop-propagation %)
(on-close)
(option-handler %))
:data-test data-test}
(if (and in-dashboard? (= option-name "Default"))
(tr "dashboard.default-team-name")
option-name)
(when (and selected (= data-test selected))
[:span {:class (stl/css :selected-icon)} i/tick-refactor])]
[:a {:class (stl/css :context-menu-action :submenu)
:data-no-close true
:on-click (enter-submenu option-name sub-options)
:data-test data-test}
option-name
[:span {:class (stl/css :submenu-icon)} i/arrow-refactor]])]))))])])])
;; OLD
(when (and open? (some? (:levels @local)))
[:> dropdown' props
(let [level (-> @local :levels peek)
original-options (:options level)
parent-original (:parent-option level)]
[:div {:class (dom/classnames :is-selectable is-selectable
:context-menu true
:is-open open?
:fixed fixed?))
:style {:top (+ top (:offset-y @local))
:left (+ left (:offset-x @local))}
:on-key-down (on-key-down original-options parent-original)}
(let [level (-> @local :levels peek)]
[:ul {:class (if (and new-css-system workspace?)
(dom/classnames (css :min-width) min-width?
(css :context-menu-items) true)
(dom/classnames :min-width min-width?
:context-menu-items true))
:role "menu"
:ref check-menu-offscreen}
(when-let [parent-option (:parent-option level)]
[:*
[:& context-menu-a11y-item
{:id "go-back-sub-option"
:class (dom/classnames (css :context-menu-item) (and new-css-system workspace?))
:tab-index "0"
:on-key-down (fn [event]
(dom/prevent-default event))}
[:div {:class (if (and new-css-system workspace?)
(dom/classnames (css :context-menu-action) true
(css :submenu-back) true)
(dom/classnames :context-menu-action true
:submenu-back true))
:data-no-close true
:on-click exit-submenu}
[:span {:class (dom/classnames (css :submenu-icon-back) (and new-css-system workspace?))}
(if (and new-css-system workspace?)
i/arrow-refactor
i/arrow-slide)]
parent-option]]
[:li {:class (if (and new-css-system workspace?)
(dom/classnames (css :separator) true)
(dom/classnames :separator true))}]])
(for [[index option] (d/enumerate (:options level))]
(let [option-name (:option-name option)
id (:id option)
sub-options (:sub-options option)
option-handler (:option-handler option)
data-test (:data-test option)]
(when option-name
(if (= option-name :separator)
[:li {:key (dm/str "context-item-" index)
:class (if (and new-css-system workspace?)
(dom/classnames (css :separator) true)
(dom/classnames :separator true))}]
[:& context-menu-a11y-item
{:id id
:key id
:class (if (and new-css-system workspace?)
(dom/classnames (css :is-selected) (and selected (= option-name selected))
(css :selected) (and selected (= data-test selected))
(css :context-menu-item) true)
(dom/classnames :is-selected (and selected (= option-name selected))))
:key-index (dm/str "context-item-" index)
:tab-index "0"
:on-key-down (fn [event]
(dom/prevent-default event))}
(if-not sub-options
[:a {:class (if (and new-css-system workspace?)
(dom/classnames (css :context-menu-action) true)
(dom/classnames :context-menu-action true))
:on-click #(do (dom/stop-propagation %)
(on-close)
(option-handler %))
:data-test data-test}
(if (and in-dashboard? (= option-name "Default"))
(tr "dashboard.default-team-name")
option-name)
:fixed fixed?)
:style {:top (+ top (:offset-y @local))
:left (+ left (:offset-x @local))}
:on-key-down (on-key-down original-options parent-original)}
(let [level (-> @local :levels peek)]
[:ul {:class (dom/classnames :min-width min-width?
:context-menu-items true)
:role "menu"
:ref check-menu-offscreen}
(when-let [parent-option (:parent-option level)]
[:*
[:& context-menu-a11y-item
{:id "go-back-sub-option"
:tab-index "0"
:on-key-down (fn [event]
(dom/prevent-default event))}
[:div {:class (dom/classnames :context-menu-action true
:submenu-back true)
:data-no-close true
:on-click exit-submenu}
[:span i/arrow-slide]
(when (and new-css-system selected (= data-test selected))
[:span {:class (dom/classnames (css :selected-icon) true)}
i/tick-refactor])]
[:a {:class (if (and new-css-system workspace?)
(dom/classnames (css :context-menu-action) true
(css :submenu) true)
(dom/classnames :context-menu-action true
:submenu true))
:data-no-close true
:on-click (enter-submenu option-name sub-options)
:data-test data-test}
option-name
[:span {:class (dom/classnames (css :submenu-icon) (and new-css-system workspace?))}
(if (and new-css-system workspace?)
i/arrow-refactor
i/arrow-slide)]])]))))])])])))
parent-option]]
[:li.separator]])
(for [[index option] (d/enumerate (:options level))]
(let [option-name (:option-name option)
id (:id option)
sub-options (:sub-options option)
option-handler (:option-handler option)
data-test (:data-test option)]
(when option-name
(if (= option-name :separator)
[:li.separator {:key (dm/str "context-item-" index)}]
[:& context-menu-a11y-item
{:id id
:key id
:class (dom/classnames :is-selected (and selected (= option-name selected)))
:key-index (dm/str "context-item-" index)
:tab-index "0"
:on-key-down (fn [event]
(dom/prevent-default event))}
(if-not sub-options
[:a {:class (dom/classnames :context-menu-action true)
:on-click #(do (dom/stop-propagation %)
(on-close)
(option-handler %))
:data-test data-test}
(if (and in-dashboard? (= option-name "Default"))
(tr "dashboard.default-team-name")
option-name)]
[:a.context-menu-action.submenu
{:data-no-close true
:on-click (enter-submenu option-name sub-options)
:data-test data-test}
option-name
[:span i/arrow-slide]])]))))])])]))))
(mf/defc context-menu-a11y
{::mf/wrap-props false}

226
frontend/src/app/main/ui/dashboard.cljs
View file

@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.dashboard
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.spec :as us]
@ -52,7 +53,8 @@
(mf/defc dashboard-content
[{:keys [team projects project section search-term profile] :as props}]
(let [container (mf/use-ref)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
container (mf/use-ref)
content-width (mf/use-state 0)
project-id (:id project)
team-id (:id team)
@ -81,60 +83,118 @@
(mf/use-effect on-resize)
[:div.dashboard-content {:on-click clear-selected-fn :ref container}
(case section
:dashboard-projects
[:*
[:& projects-section
{:team team
:projects projects
:profile profile
:default-project-id default-project-id}]
(when (contains? cf/flags :dashboard-templates-section)
[:& templates-section {:profile profile
:project-id project-id
:team-id team-id
:default-project-id default-project-id
:content-width @content-width}])]
:dashboard-fonts
[:& fonts-page {:team team}]
:dashboard-font-providers
[:& font-providers-page {:team team}]
:dashboard-files
(when project
(if new-css-system
[:div {:class (stl/css :dashboard-content)
:on-click clear-selected-fn :ref container}
(case section
:dashboard-projects
[:*
[:& files-section {:team team :project project}]
[:& projects-section
{:team team
:projects projects
:profile profile
:default-project-id default-project-id}]
(when (contains? cf/flags :dashboard-templates-section)
[:& templates-section {:profile profile
:team-id team-id
:project-id project-id
:team-id team-id
:default-project-id default-project-id
:content-width @content-width}])])
:content-width @content-width}])]
:dashboard-search
[:& search-page {:team team
:search-term search-term}]
:dashboard-fonts
[:& fonts-page {:team team}]
:dashboard-libraries
[:& libraries-page {:team team}]
:dashboard-font-providers
[:& font-providers-page {:team team}]
:dashboard-team-members
[:& team-members-page {:team team :profile profile}]
:dashboard-files
(when project
[:*
[:& files-section {:team team :project project}]
(when (contains? cf/flags :dashboard-templates-section)
[:& templates-section {:profile profile
:team-id team-id
:project-id project-id
:default-project-id default-project-id
:content-width @content-width}])])
:dashboard-team-invitations
[:& team-invitations-page {:team team}]
:dashboard-search
[:& search-page {:team team
:search-term search-term}]
:dashboard-team-webhooks
[:& team-webhooks-page {:team team}]
:dashboard-libraries
[:& libraries-page {:team team}]
:dashboard-team-settings
[:& team-settings-page {:team team :profile profile}]
:dashboard-team-members
[:& team-members-page {:team team :profile profile}]
nil)]))
:dashboard-team-invitations
[:& team-invitations-page {:team team}]
:dashboard-team-webhooks
[:& team-webhooks-page {:team team}]
:dashboard-team-settings
[:& team-settings-page {:team team :profile profile}]
nil)]
;; OLD
[:div.dashboard-content {:on-click clear-selected-fn :ref container}
(case section
:dashboard-projects
[:*
[:& projects-section
{:team team
:projects projects
:profile profile
:default-project-id default-project-id}]
(when (contains? cf/flags :dashboard-templates-section)
[:& templates-section {:profile profile
:project-id project-id
:team-id team-id
:default-project-id default-project-id
:content-width @content-width}])]
:dashboard-fonts
[:& fonts-page {:team team}]
:dashboard-font-providers
[:& font-providers-page {:team team}]
:dashboard-files
(when project
[:*
[:& files-section {:team team :project project}]
(when (contains? cf/flags :dashboard-templates-section)
[:& templates-section {:profile profile
:team-id team-id
:project-id project-id
:default-project-id default-project-id
:content-width @content-width}])])
:dashboard-search
[:& search-page {:team team
:search-term search-term}]
:dashboard-libraries
[:& libraries-page {:team team}]
:dashboard-team-members
[:& team-members-page {:team team :profile profile}]
:dashboard-team-invitations
[:& team-invitations-page {:team team}]
:dashboard-team-webhooks
[:& team-webhooks-page {:team team}]
:dashboard-team-settings
[:& team-settings-page {:team team :profile profile}]
nil)])))
(mf/defc dashboard
[{:keys [route profile] :as props}]
@ -168,31 +228,59 @@
(fn []
(events/unlistenByKey key))))
[:& (mf/provider ctx/current-team-id) {:value team-id}
[:& (mf/provider ctx/current-project-id) {:value project-id}
;; NOTE: dashboard events and other related functions assumes
;; that the team is a implicit context variable that is
;; available using react context or accessing
;; the :current-team-id on the state. We set the key to the
;; team-id because we want to completely refresh all the
;; components on team change. Many components assumes that the
;; team is already set so don't put the team into mf/deps.
(when team
[:main {:class (dom/classnames :dashboard-layout (not new-css-system)
:dashboard-layout-refactor new-css-system)
:key (:id team)}
[:& sidebar
{:team team
:projects projects
:project project
:profile profile
:section section
:search-term search-term}]
(when (and team profile (seq projects))
[:& dashboard-content
{:projects projects
:profile profile
(if new-css-system
[:& (mf/provider ctx/current-team-id) {:value team-id}
[:& (mf/provider ctx/current-project-id) {:value project-id}
;; NOTE: dashboard events and other related functions assumes
;; that the team is a implicit context variable that is
;; available using react context or accessing
;; the :current-team-id on the state. We set the key to the
;; team-id because we want to completely refresh all the
;; components on team change. Many components assumes that the
;; team is already set so don't put the team into mf/deps.
(when team
[:main {:class (stl/css :dashboard-layout-refactor :dashboard)
:key (:id team)}
[:& sidebar
{:team team
:projects projects
:project project
:profile profile
:section section
:search-term search-term
:team team}])])]]))
:search-term search-term}]
(when (and team profile (seq projects))
[:& dashboard-content
{:projects projects
:profile profile
:project project
:section section
:search-term search-term
:team team}])])]]
[:& (mf/provider ctx/current-team-id) {:value team-id}
[:& (mf/provider ctx/current-project-id) {:value project-id}
;; NOTE: dashboard events and other related functions assumes
;; that the team is a implicit context variable that is
;; available using react context or accessing
;; the :current-team-id on the state. We set the key to the
;; team-id because we want to completely refresh all the
;; components on team change. Many components assumes that the
;; team is already set so don't put the team into mf/deps.
(when team
[:main {:class (dom/classnames :dashboard-layout true) :key (:id team)}
[:& sidebar
{:team team
:projects projects
:project project
:profile profile
:section section
:search-term search-term}]
(when (and team profile (seq projects))
[:& dashboard-content
{:projects projects
:profile profile
:project project
:section section
:search-term search-term
:team team}])])]])))

17
frontend/src/app/main/ui/dashboard.scss Normal file
View file

@ -0,0 +1,17 @@
@import "common/dependencies/colors";
.dashboard {
background-color: $db-primary;
display: grid;
grid-template-rows: 50px 1fr;
grid-template-columns: 40px 256px 1fr;
height: 100vh;
}
.dashboard-content {
display: flex;
flex-direction: column;
position: relative;
grid-row: 1 / span 2;
padding: 1rem 1rem 0 0;
}

139
frontend/src/app/main/ui/dashboard/comments.cljs
View file

@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.dashboard.comments
(:require-macros [app.main.style :as stl])
(:require
[app.main.data.comments :as dcm]
[app.main.data.events :as ev]
@ -13,6 +14,7 @@
[app.main.store :as st]
[app.main.ui.comments :as cmt]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
@ -22,7 +24,8 @@
(mf/defc comments-section
[{:keys [profile team]}]
(let [show-dropdown? (mf/use-state false)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
show-dropdown? (mf/use-state false)
show-dropdown (mf/use-fn #(reset! show-dropdown? true))
hide-dropdown (mf/use-fn #(reset! show-dropdown? false))
threads-map (mf/deref refs/comment-threads)
@ -53,50 +56,102 @@
(st/emit! (ptk/event ::ev/event {::ev/name "open-comment-notifications"
::ev/origin "dashboard"})))))
[:div.dashboard-comments-section
[:div.button
{:tab-index "0"
:on-click show-dropdown
:on-key-down (fn [event]
(when (kbd/enter? event)
(show-dropdown event)))
:data-test "open-comments"
:class (dom/classnames :open @show-dropdown?
(if new-css-system
[:div {:class (stl/css :dashboard-comments-section)}
[:div
{:tab-index "0"
:on-click show-dropdown
:on-key-down (fn [event]
(when (kbd/enter? event)
(show-dropdown event)))
:data-test "open-comments"
:class (stl/css-case :button true
:open @show-dropdown?
:unread (boolean (seq tgroups)))}
i/chat]
i/chat]
[:& dropdown {:show @show-dropdown? :on-close hide-dropdown}
[:div.dropdown.comments-section.comment-threads-section.
[:div.header
[:h3 (tr "labels.comments")]
[:span.close {:tab-index (if @show-dropdown?
"0"
"-1")
:on-click hide-dropdown
:on-key-down (fn [event]
(when (kbd/enter? event)
(hide-dropdown event)))} i/close]]
[:& dropdown {:show @show-dropdown? :on-close hide-dropdown}
[:div {:class (stl/css :dropdown :comments-section :comment-threads-section)}
[:div {:class (stl/css :header)}
[:h3 (tr "labels.comments")]
[:span {:class (stl/css :close)
:tab-index (if @show-dropdown?
"0"
"-1")
:on-click hide-dropdown
:on-key-down (fn [event]
(when (kbd/enter? event)
(hide-dropdown event)))} i/close]]
[:hr]
[:hr]
(if (seq tgroups)
[:div.thread-groups
[:& cmt/comment-thread-group
{:group (first tgroups)
:on-thread-click on-navigate
:show-file-name true
:users users}]
(for [tgroup (rest tgroups)]
[:*
[:hr]
(if (seq tgroups)
[:div {:class (stl/css :thread-groups)}
[:& cmt/comment-thread-group
{:group (first tgroups)
:on-thread-click on-navigate
:show-file-name true
:users users}]
(for [tgroup (rest tgroups)]
[:*
[:hr]
[:& cmt/comment-thread-group
{:group tgroup
:on-thread-click on-navigate
:show-file-name true
:users users
:key (:page-id tgroup)}]])]
[:& cmt/comment-thread-group
{:group tgroup
:on-thread-click on-navigate
:show-file-name true
:users users
:key (:page-id tgroup)}]])]
[:div.thread-groups-placeholder
i/chat
(tr "labels.no-comments-available")])]]]))
[:div {:class (stl/css :thread-groups-placeholder)}
i/chat
(tr "labels.no-comments-available")])]]]
;; OLD
[:div.dashboard-comments-section
[:div.button
{:tab-index "0"
:on-click show-dropdown
:on-key-down (fn [event]
(when (kbd/enter? event)
(show-dropdown event)))
:data-test "open-comments"
:class (dom/classnames :open @show-dropdown?
:unread (boolean (seq tgroups)))}
i/chat]
[:& dropdown {:show @show-dropdown? :on-close hide-dropdown}
[:div.dropdown.comments-section.comment-threads-section.
[:div.header
[:h3 (tr "labels.comments")]
[:span.close {:tab-index (if @show-dropdown?
"0"
"-1")
:on-click hide-dropdown
:on-key-down (fn [event]
(when (kbd/enter? event)
(hide-dropdown event)))} i/close]]
[:hr]
(if (seq tgroups)
[:div.thread-groups
[:& cmt/comment-thread-group
{:group (first tgroups)
:on-thread-click on-navigate
:show-file-name true
:users users}]
(for [tgroup (rest tgroups)]
[:*
[:hr]
[:& cmt/comment-thread-group
{:group tgroup
:on-thread-click on-navigate
:show-file-name true
:users users
:key (:page-id tgroup)}]])]
[:div.thread-groups-placeholder
i/chat
(tr "labels.no-comments-available")])]]])))

526
frontend/src/app/main/ui/dashboard/comments.scss Normal file
View file

@ -0,0 +1,526 @@
@import "common/dependencies/colors";
$fs12: 0.75rem;
$fs14: 0.875rem;
$size-2: 0.5rem;
$size-4: 1rem;
$size-5: 1.5rem;
$br2: 2px;
$br3: 3px;
$fw400: 400;
$fw700: 700;
.dropdown {
position: absolute;
max-height: 30rem;
background-color: #ffffff;
border-radius: 2px;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
z-index: 12;
background-color: #212426;
border: 1px solid #2e3434;
border-radius: 8px;
min-width: 252px;
hr {
margin: 0;
border-color: #e3e3e3;
}
}
.comments-section {
.thread-bubble {
position: absolute;
display: flex;
transform: translate(-15px, -15px);
cursor: pointer;
pointer-events: auto;
background-color: $color-gray-10;
color: $color-gray-60;
border: 1px solid #b1b2b5;
box-sizing: border-box;
box-shadow: 0px 4px 4px rgba($color-black, 0.25);
font-size: $fs12;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
&.resolved {
color: $color-gray-10;
background-color: $color-gray-50;
}
&.unread {
background-color: $color-primary;
}
span {
user-select: none;
}
}
.thread-content {
position: absolute;
pointer-events: auto;
margin-left: 10px;
background: $color-white;
border: 1px solid $color-gray-20;
box-sizing: border-box;
box-shadow: 0px 2px 8px rgba($color-black, 0.25);
border-radius: $br2;
min-width: 280px;
max-width: 280px;
user-select: text;
.comments {
max-height: 420px;
min-height: 105px;
overflow-y: auto;
}
hr {
border: 0;
height: 1px;
background-color: $color-gray-20;
margin: 0px 10px;
}
}
.reply-form {
display: flex;
padding: 10px;
flex-direction: column;
&.edit-form {
padding-bottom: 0px;
}
textarea {
font-family: "worksans", sans-serif;
font-size: $fs12;
min-height: 32px;
outline: none;
overflow: hidden;
padding: $size-2;
resize: none;
width: 100%;
border-radius: $br2;
border: 1px solid $color-gray-20;
max-height: 4rem;
}
.buttons {
margin-top: 10px;
display: flex;
justify-content: flex-end;
input {
margin: 0px;
font-size: $fs14;
&:not(:last-child) {
margin-right: 6px;
}
}
}
}
.comment-container {
position: relative;
}
.comment {
display: flex;
flex-direction: column;
padding: $size-4 $size-2;
.author {
display: flex;
align-items: center;
height: 26px;
max-height: 26px;
position: relative;
.name {
display: flex;
flex-direction: column;
.fullname {
font-weight: $fw700;
color: $color-gray-60;
font-size: $fs12;
// @include text-ellipsis;
width: 174px;
}
.timeago {
margin-top: -2px;
font-size: $fs12;
color: $color-gray-30;
}
}
.avatar {
display: flex;
align-items: center;
padding-right: 6px;
img {
border-radius: 50%;
flex-shrink: 0;
height: 24px;
width: 24px;
}
}
.options-resolve {
position: absolute;
right: 20px;
top: 0px;
width: 16px;
height: 16px;
cursor: pointer;
svg {
width: 16px;
height: 16px;
fill: $color-gray-30;
}
}
.options {
position: absolute;
right: -2px;
top: 2px;
height: 16px;
display: flex;
align-items: center;
cursor: pointer;
.options-icon {
svg {
width: 14px;
height: 14px;
fill: $color-black;
}
}
}
}
.content {
margin: $size-4 0;
font-size: $fs14;
color: $color-black;
.text {
margin: 0 $size-2 0 26px;
white-space: pre-wrap;
display: inline-block;
word-break: break-word;
}
}
}
.comment-options-dropdown {
top: 7px;
right: 7px;
width: 150px;
border: 1px solid #b1b2b5;
}
}
.workspace-comment-threads-sidebar-header {
display: flex;
background-color: $color-black;
height: 34px;
align-items: center;
padding: 0px 9px;
color: $color-gray-10;
font-size: $fs12;
justify-content: space-between;
.options {
display: flex;
margin-right: 3px;
cursor: pointer;
.label {
padding-right: 8px;
}
.icon {
display: flex;
align-items: center;
}
svg {
fill: $color-gray-10;
width: 10px;
height: 10px;
}
}
.dropdown {
top: 80px;
right: 7px;
}
}
.comment-threads-section {
pointer-events: auto;
.thread-groups {
height: calc(100% - 34px);
overflow-y: scroll;
hr {
border: 0;
height: 1px;
background-color: $color-gray-30;
margin: 0px 0px;
}
}
.thread-group {
display: flex;
flex-direction: column;
font-size: $fs12;
.section-title {
margin: 0px 10px;
margin-top: 15px;
.icon {
margin-right: 4px;
}
.label {
&.filename {
font-weight: $fw700;
}
}
svg {
fill: $color-gray-10;
height: 10px;
width: 10px;
}
}
}
.thread-bubble {
position: unset;
transform: unset;
width: 24px;
height: 24px;
margin-right: 6px;
box-shadow: unset;
}
.comment {
cursor: pointer;
.author {
margin-bottom: $size-4;
.name {
display: flex;
.fullname {
width: unset;
max-width: 170px;
color: $color-gray-20;
padding-right: 3px;
}
.timeago {
margin-top: unset;
color: $color-gray-20;
}
}
}
.content {
margin-top: 0px;
color: $color-white;
&.replies {
margin: 0 $size-2 0 26px;
display: flex;
.total-replies {
margin-right: 9px;
color: $color-info;
}
.new-replies {
color: $color-primary;
}
}
}
}
}
.viewer-comments-container {
width: 100%;
height: 100%;
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
}
.workspace-comments-container {
width: 100%;
height: 100%;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
z-index: 1000;
pointer-events: none;
overflow: hidden;
user-select: text;
.threads {
position: absolute;
top: 0px;
left: 0px;
}
}
.dashboard-comments-section {
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
background-color: $color-dashboard;
border-radius: $br3;
position: relative;
.button {
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
background-color: $color-dashboard;
border-radius: $br3;
svg {
width: 15px;
height: 15px;
}
&.unread {
background-color: $color-warning;
svg {
fill: #2e3434;
}
}
&.open {
background-color: $color-black;
svg {
fill: $color-primary;
}
}
}
.dropdown {
width: 280px;
bottom: 35px;
left: 0px;
}
.header {
display: flex;
height: 40px;
align-items: center;
padding: 0px 11px;
h3 {
font-weight: $fw400;
color: $color-black;
font-size: $fs14;
// line-height: $lh-128; // Original value was $fs18 => 1.125rem = 18px; 18px/14px = 128.571428571% => $lh-128 (rounded)
flex-grow: 1;
}
.close {
display: flex;
align-items: center;
}
svg {
width: 15px;
height: 15px;
transform: rotate(45deg);
}
}
.thread-groups {
max-height: calc(30rem - 40px);
overflow: auto;
hr {
background-color: $color-gray-10;
}
}
.thread-group .section-title {
color: $color-black;
}
.comment {
.author .name .fullname {
color: $color-gray-40;
}
.content {
color: $color-black;
}
}
}
.thread-groups-placeholder {
align-items: center;
display: flex;
flex-direction: column;
font-size: $fs12;
padding: $size-5;
text-align: center;
svg {
fill: $color-gray-20;
height: 24px;
margin-bottom: $size-5;
width: 24px;
}
}
.dashboard-comments-section {
border-color: transparent;
border-radius: 8px;
background-color: $db-primary;
height: 32px;
width: 32px;
.button {
border-radius: 8px;
background-color: $db-primary;
height: 32px;
width: 32px;
svg {
fill: $df-secondary;
}
&:hover {
background-color: $db-cuaternary;
svg {
fill: $da-primary;
}
}
}
}

214
frontend/src/app/main/ui/dashboard/files.cljs
View file

@ -5,11 +5,13 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.dashboard.files
(:require-macros [app.main.style :as stl])
(:require
[app.main.data.dashboard :as dd]
[app.main.data.events :as ev]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.dashboard.grid :refer [grid]]
[app.main.ui.dashboard.inline-edition :refer [inline-edition]]
[app.main.ui.dashboard.project-menu :refer [project-menu]]
@ -24,7 +26,8 @@
(mf/defc header
[{:keys [project create-fn] :as props}]
(let [local (mf/use-state
(let [new-css-system (mf/use-ctx ctx/new-css-system)
local (mf/use-state
{:menu-open false
:edition false})
@ -61,68 +64,137 @@
(dd/clear-selected-files))))]
[:header.dashboard-header
(if (:is-default project)
[:div.dashboard-title#dashboard-drafts-title
[:h1 (tr "labels.drafts")]]
(if new-css-system
[:header {:class (stl/css :dashboard-header)}
(if (:is-default project)
[:div#dashboard-drafts-title {:class (stl/css :dashboard-title)}
[:h1 (tr "labels.drafts")]]
(if (:edition @local)
[:& inline-edition {:content (:name project)
:on-end (fn [name]
(let [name (str/trim name)]
(when-not (str/empty? name)
(st/emit! (-> (dd/rename-project (assoc project :name name))
(with-meta {::ev/origin "project"}))))
(swap! local assoc :edition false)))}]
[:div.dashboard-title
[:h1 {:on-double-click on-edit
:data-test "project-title"
:id (:id project)}
(:name project)]]))
(if (:edition @local)
[:& inline-edition
{:content (:name project)
:on-end (fn [name]
(let [name (str/trim name)]
(when-not (str/empty? name)
(st/emit! (-> (dd/rename-project (assoc project :name name))
(with-meta {::ev/origin "project"}))))
(swap! local assoc :edition false)))}]
[:div {:class (stl/css :dashboard-title)}
[:h1 {:on-double-click on-edit
:data-test "project-title"
:id (:id project)}
(:name project)]]))
[:& project-menu {:project project
:show? (:menu-open @local)
:left (- (:x (:menu-pos @local)) 180)
:top (:y (:menu-pos @local))
:on-edit on-edit
:on-menu-close on-menu-close
:on-import on-import}]
[:& project-menu {:project project
:show? (:menu-open @local)
:left (- (:x (:menu-pos @local)) 180)
:top (:y (:menu-pos @local))
:on-edit on-edit
:on-menu-close on-menu-close
:on-import on-import}]
[:div.dashboard-header-actions
[:a.btn-secondary.btn-small
{:tab-index "0"
:on-click on-create-click
:data-test "new-file"
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-create-click event)))}
(tr "dashboard.new-file")]
(when-not (:is-default project)
[:button.icon.pin-icon.tooltip.tooltip-bottom
{:tab-index "0"
:class (when (:is-pinned project) "active")
:on-click toggle-pin
:alt (tr "dashboard.pin-unpin")
[:div {:class (stl/css :dashboard-header-actions)}
[:a
{:class (stl/css :btn-secondary :btn-small)
:tab-index "0"
:on-click on-create-click
:data-test "new-file"
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-pin event)))}
(if (:is-pinned project)
i/pin-fill
i/pin)])
(on-create-click event)))}
(tr "dashboard.new-file")]
[:div.icon.tooltip.tooltip-bottom-left
{:tab-index "0"
:on-click on-menu-click
:alt (tr "dashboard.options")
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-menu-click event)))}
i/actions]]]))
(when-not (:is-default project)
[:button
{:class (stl/css-case :icon true
:pin-icon true
:tooltip true
:tooltip-bottom true
:active (:is-pinned project))
:tab-index "0"
:on-click toggle-pin
:alt (tr "dashboard.pin-unpin")
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-pin event)))}
(if (:is-pinned project)
i/pin-fill
i/pin)])
[:div
{:class (stl/css :icon :tooltip :tooltip-bottom-left)
:tab-index "0"
:on-click on-menu-click
:alt (tr "dashboard.options")
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-menu-click event)))}
i/actions]]]
;; OLD
[:header.dashboard-header
(if (:is-default project)
[:div.dashboard-title#dashboard-drafts-title
[:h1 (tr "labels.drafts")]]
(if (:edition @local)
[:& inline-edition {:content (:name project)
:on-end (fn [name]
(let [name (str/trim name)]
(when-not (str/empty? name)
(st/emit! (-> (dd/rename-project (assoc project :name name))
(with-meta {::ev/origin "project"}))))
(swap! local assoc :edition false)))}]
[:div.dashboard-title
[:h1 {:on-double-click on-edit
:data-test "project-title"
:id (:id project)}
(:name project)]]))
[:& project-menu {:project project
:show? (:menu-open @local)
:left (- (:x (:menu-pos @local)) 180)
:top (:y (:menu-pos @local))
:on-edit on-edit
:on-menu-close on-menu-close
:on-import on-import}]
[:div.dashboard-header-actions
[:a.btn-secondary.btn-small
{:tab-index "0"
:on-click on-create-click
:data-test "new-file"
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-create-click event)))}
(tr "dashboard.new-file")]
(when-not (:is-default project)
[:button.icon.pin-icon.tooltip.tooltip-bottom
{:tab-index "0"
:class (when (:is-pinned project) "active")
:on-click toggle-pin
:alt (tr "dashboard.pin-unpin")
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-pin event)))}
(if (:is-pinned project)
i/pin-fill
i/pin)])
[:div.icon.tooltip.tooltip-bottom-left
{:tab-index "0"
:on-click on-menu-click
:alt (tr "dashboard.options")
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-menu-click event)))}
i/actions]]])))
(mf/defc files-section
[{:keys [project team] :as props}]
(let [files-map (mf/deref refs/dashboard-files)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
files-map (mf/deref refs/dashboard-files)
project-id (:id project)
[rowref limit] (hooks/use-dynamic-grid-item-width)
@ -161,14 +233,28 @@
(st/emit! (dd/fetch-files {:project-id project-id})
(dd/clear-selected-files)))
[:*
[:& header {:team team
:project project
:create-fn create-file}]
[:section.dashboard-container.no-bg {:ref rowref}
[:& grid {:project project
:files files
:origin :files
:create-fn create-file
:limit limit}]]]))
(if new-css-system
[:*
[:& header {:team team
:project project
:create-fn create-file}]
[:section {:class (stl/css :dashboard-container :no-bg)
:ref rowref}
[:& grid {:project project
:files files
:origin :files
:create-fn create-file
:limit limit}]]]
;; OLD
[:*
[:& header {:team team
:project project
:create-fn create-file}]
[:section.dashboard-container.no-bg {:ref rowref}
[:& grid {:project project
:files files
:origin :files
:create-fn create-file
:limit limit}]]])))

237
frontend/src/app/main/ui/dashboard/files.scss Normal file
View file

@ -0,0 +1,237 @@
@import "common/dependencies/colors";
// FIXME: Mostly duplcated from projects.css
$br3: 3px;
$fs14: 0.875rem;
$fs18: 1.125rem;
$fs22: 1.375rem;
$fw400: 400;
$fw600: 600;
$lh-088: 0.88;
$lh-115: 1.15; // original $title-lh-sm
$size-1: 0.25rem;
$size-2: 0.5rem;
$size-4: 1rem;
$size-5: 1.5rem;
$size-6: 2rem;
.dashboard-container {
background-color: $color-dashboard;
flex: 1 0 0;
margin-right: $size-4;
overflow-y: auto;
width: 100%;
&.dashboard-projects {
user-select: none;
}
&.no-bg {
background-color: transparent;
}
&.dashboard-shared {
width: calc(100vw - 320px);
margin-right: 50px;
}
&.search {
margin-top: 10px;
}
}
.dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: $color-white;
height: 63px;
padding: $size-1 $size-4 $size-1 $size-2;
position: relative;
z-index: 10;
user-select: none;
&.team {
display: grid;
grid-template-columns: 20% 1fr 20%;
}
.element-name {
margin-right: $size-2;
}
.btn-secondary {
flex-shrink: 0;
z-index: 10;
height: 32px;
}
svg {
fill: $color-black;
height: 14px;
margin-right: $size-1;
width: 14px;
}
nav {
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 1;
ul {
display: flex;
font-size: $fs14;
justify-content: center;
margin: 0;
}
li {
a {
display: flex;
align-items: center;
flex-basis: 140px;
border-bottom: 3px solid transparent;
color: $color-gray-30;
height: 40px;
padding: $size-1 $size-5;
font-weight: $fw400;
&:hover {
color: $color-black;
text-decoration: none;
}
}
&.active {
a {
color: $color-black;
border-color: $color-primary;
}
}
}
}
.dashboard-title {
display: flex;
align-items: center;
margin-left: 13px;
h1 {
color: $color-black;
display: flex;
flex-shrink: 0;
font-size: $fs22;
font-weight: $fw600;
z-index: 10;
user-select: all;
}
.context-menu.is-open {
margin-top: 10px;
}
}
.icon {
display: flex;
align-items: center;
cursor: pointer;
margin-left: $size-2;
z-index: 10;
svg {
fill: $color-gray-40;
width: 15px;
height: 15px;
&:hover {
fill: $color-primary-dark;
}
}
}
.dashboard-buttons {
display: flex;
justify-content: flex-end;
align-items: center;
}
.dashboard-header-actions {
display: flex;
}
.pin-icon {
margin: 0 $size-2 0 $size-5;
background-color: transparent;
border: none;
svg {
fill: $color-gray-20;
}
&.active {
svg {
fill: $color-gray-50;
}
}
}
}
.dashboard-header {
background-color: transparent;
.dashboard-title {
h1 {
color: $df-primary;
font-size: 24px;
font-weight: 400;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
max-width: 700px;
}
}
.icon {
svg {
fill: $df-secondary;
}
}
// Settings sub-menu
.dashboard-header-options {
li {
a {
font-size: 16px;
color: $df-secondary;
border-color: transparent;
&:hover {
color: $df-primary;
}
}
&.active {
a {
color: $df-primary;
}
}
}
}
}
.btn-secondary {
background-color: $db-tertiary;
text-transform: uppercase;
border: none;
color: $df-primary;
border-radius: 8px;
font-size: 0.75rem;
padding: 0 1rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: $db-cuaternary;
color: $da-primary;
svg {
fill: $da-primary;
}
}
}

472
frontend/src/app/main/ui/dashboard/fonts.cljs
View file

@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.dashboard.fonts
(:require-macros [app.main.style :as stl])
(:require
[app.common.media :as cm]
[app.main.data.fonts :as df]
@ -14,6 +15,7 @@
[app.main.store :as st]
[app.main.ui.components.context-menu :refer [context-menu]]
[app.main.ui.components.file-uploader :refer [file-uploader]]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
@ -38,29 +40,17 @@
(mf/defc header
{::mf/wrap [mf/memo]}
[{:keys [section team] :as props}]
;; (let [go-fonts
;; (mf/use-callback
;; (mf/deps team)
;; #(st/emit! (rt/nav :dashboard-fonts {:team-id (:id team)})))
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
(use-set-page-title team section)
(if new-css-system
[:header {:class (stl/css :dashboard-header)}
[:div#dashboard-fonts-title {:class (stl/css :dashboard-title)}
[:h1 (tr "labels.fonts")]]]
;; go-providers
;; (mf/use-callback
;; (mf/deps team)
;; #(st/emit! (rt/nav :dashboard-font-providers {:team-id (:id team)})))]
(use-set-page-title team section)
[:header.dashboard-header
[:div.dashboard-title#dashboard-fonts-title
[:h1 (tr "labels.fonts")]]
[:nav
#_[:ul
[:li {:class (when (= section :fonts) "active")}
[:a {:on-click go-fonts} (tr "labels.custom-fonts")]]
[:li {:class (when (= section :providers) "active")}
[:a {:on-click go-providers} (tr "labels.font-providers")]]]]
[:div]])
;; OLD
[:header.dashboard-header
[:div.dashboard-title#dashboard-fonts-title
[:h1 (tr "labels.fonts")]]])))
(mf/defc font-variant-display-name
[{:keys [variant]}]
@ -71,7 +61,8 @@
(mf/defc fonts-upload
[{:keys [team installed-fonts] :as props}]
(let [fonts (mf/use-state {})
(let [new-css-system (mf/use-ctx ctx/new-css-system)
fonts (mf/use-state {})
input-ref (mf/use-ref)
uploading (mf/use-state #{})
@ -124,76 +115,151 @@
problematic-fonts? (some :height-warning? (vals @fonts))]
[:div.dashboard-fonts-upload
[:div.dashboard-fonts-hero
[:div.desc
[:h2 (tr "labels.upload-custom-fonts")]
[:& i18n/tr-html {:label "dashboard.fonts.hero-text1"}]
(if new-css-system
[:div {:class (stl/css :dashboard-fonts-upload)}
[:div {:class (stl/css :dashboard-fonts-hero)}
[:div {:class (stl/css :desc)}
[:h2 (tr "labels.upload-custom-fonts")]
[:& i18n/tr-html {:label "dashboard.fonts.hero-text1"}]
[:div.banner
[:div.icon i/msg-info]
[:div.content
[:& i18n/tr-html {:tag-name "span"
:label "dashboard.fonts.hero-text2"}]]]
[:div {:class (stl/css :banner)}
[:div {:class (stl/css :icon)} i/msg-info]
[:div {:class (stl/css :content)}
[:& i18n/tr-html {:tag-name "span"
:label "dashboard.fonts.hero-text2"}]]]
(when problematic-fonts?
[:div.banner.warning
[:div.icon i/msg-warning]
(when problematic-fonts?
[:div {:class (stl/css :banner :warning)}
[:div {:class (stl/css :icon)} i/msg-warning]
[:div {:class (stl/css :content)}
[:& i18n/tr-html {:tag-name "span"
:label "dashboard.fonts.warning-text"}]]])]
[:button
{:class (stl/css :btn-primary)
:on-click on-click
:tab-index "0"}
[:span (tr "labels.add-custom-font")]
[:& file-uploader {:input-id "font-upload"
:accept cm/str-font-types
:multi true
:ref input-ref
:on-selected on-selected}]]]
[:*
(when (some? (vals @fonts))
[:div {:class (stl/css :font-item :table-row)}
[:span (tr "dashboard.fonts.fonts-added" (i18n/c (count (vals @fonts))))]
[:div {:class (stl/css :table-field :options)}
[:div {:class (stl/css :btn-primary)
:on-click #(on-upload-all (vals @fonts)) :data-test "upload-all"}
[:span (tr "dashboard.fonts.upload-all")]]
[:div {:class (stl/css :btn-secondary)
:on-click #(on-dismiss-all (vals @fonts)) :data-test "dismiss-all"}
[:span (tr "dashboard.fonts.dismiss-all")]]]])
(for [item (sort-by :font-family (vals @fonts))]
(let [uploading? (contains? @uploading (:id item))]
[:div {:class (stl/css :font-item :table-row) :key (:id item)}
[:div {:class (stl/css :table-field :family)}
[:input {:type "text"
:on-blur #(on-blur-name (:id item) %)
:default-value (:font-family item)}]]
[:div {:class (stl/css :table-field :variants)}
[:span {:class (stl/css :label)}
[:& font-variant-display-name {:variant item}]]]
[:div {:class (stl/css :table-field :filenames)}
(for [item (:names item)]
[:span item])]
[:div {:class (stl/css :table-field :options)}
(when (:height-warning? item)
[:span {:class (stl/css :icon :failure)} i/msg-warning])
[:button
{:on-click #(on-upload item)
:class (stl/css-case :btn-primary true
:upload-button true
:disabled uploading?)
:disabled uploading?}
(if uploading?
(tr "labels.uploading")
(tr "labels.upload"))]
[:span {:class (stl/css :icon :close)
:on-click #(on-delete item)} i/close]]]))]]
;; OLD
[:div.dashboard-fonts-upload
[:div.dashboard-fonts-hero
[:div.desc
[:h2 (tr "labels.upload-custom-fonts")]
[:& i18n/tr-html {:label "dashboard.fonts.hero-text1"}]
[:div.banner
[:div.icon i/msg-info]
[:div.content
[:& i18n/tr-html {:tag-name "span"
:label "dashboard.fonts.warning-text"}]]])]
:label "dashboard.fonts.hero-text2"}]]]
[:button.btn-primary
{:on-click on-click
:tab-index "0"}
[:span (tr "labels.add-custom-font")]
[:& file-uploader {:input-id "font-upload"
:accept cm/str-font-types
:multi true
:ref input-ref
:on-selected on-selected}]]]
(when problematic-fonts?
[:div.banner.warning
[:div.icon i/msg-warning]
[:div.content
[:& i18n/tr-html {:tag-name "span"
:label "dashboard.fonts.warning-text"}]]])]
[:*
(when (some? (vals @fonts))
[:div.font-item.table-row
[:span (tr "dashboard.fonts.fonts-added" (i18n/c (count (vals @fonts))))]
[:div.table-field.options
[:div.btn-primary
{:on-click #(on-upload-all (vals @fonts)) :data-test "upload-all"}
[:span (tr "dashboard.fonts.upload-all")]]
[:div.btn-secondary
{:on-click #(on-dismiss-all (vals @fonts)) :data-test "dismiss-all"}
[:span (tr "dashboard.fonts.dismiss-all")]]]])
(for [item (sort-by :font-family (vals @fonts))]
(let [uploading? (contains? @uploading (:id item))]
[:div.font-item.table-row {:key (:id item)}
[:div.table-field.family
[:input {:type "text"
:on-blur #(on-blur-name (:id item) %)
:default-value (:font-family item)}]]
[:div.table-field.variants
[:span.label
[:& font-variant-display-name {:variant item}]]]
[:div.table-field.filenames
(for [item (:names item)]
[:span item])]
[:button.btn-primary
{:on-click on-click
:tab-index "0"}
[:span (tr "labels.add-custom-font")]
[:& file-uploader {:input-id "font-upload"
:accept cm/str-font-types
:multi true
:ref input-ref
:on-selected on-selected}]]]
[:*
(when (some? (vals @fonts))
[:div.font-item.table-row
[:span (tr "dashboard.fonts.fonts-added" (i18n/c (count (vals @fonts))))]
[:div.table-field.options
(when (:height-warning? item)
[:span.icon.failure i/msg-warning])
[:button.btn-primary.upload-button
{:on-click #(on-upload item)
:class (dom/classnames :disabled uploading?)
:disabled uploading?}
(if uploading?
(tr "labels.uploading")
(tr "labels.upload"))]
[:span.icon.close {:on-click #(on-delete item)} i/close]]]))]]))
[:div.btn-primary
{:on-click #(on-upload-all (vals @fonts)) :data-test "upload-all"}
[:span (tr "dashboard.fonts.upload-all")]]
[:div.btn-secondary
{:on-click #(on-dismiss-all (vals @fonts)) :data-test "dismiss-all"}
[:span (tr "dashboard.fonts.dismiss-all")]]]])
(for [item (sort-by :font-family (vals @fonts))]
(let [uploading? (contains? @uploading (:id item))]
[:div.font-item.table-row {:key (:id item)}
[:div.table-field.family
[:input {:type "text"
:on-blur #(on-blur-name (:id item) %)
:default-value (:font-family item)}]]
[:div.table-field.variants
[:span.label
[:& font-variant-display-name {:variant item}]]]
[:div.table-field.filenames
(for [item (:names item)]
[:span item])]
[:div.table-field.options
(when (:height-warning? item)
[:span.icon.failure i/msg-warning])
[:button.btn-primary.upload-button
{:on-click #(on-upload item)
:class (dom/classnames :disabled uploading?)
:disabled uploading?}
(if uploading?
(tr "labels.uploading")
(tr "labels.upload"))]
[:span.icon.close {:on-click #(on-delete item)} i/close]]]))]])))
(mf/defc installed-font
[{:keys [font-id variants] :as props}]
(let [font (first variants)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
font (first variants)
variants (sort-by (fn [item]
[(:font-weight item)
@ -252,50 +318,97 @@
:on-accept (fn [_props]
(delete-variant-fn id))})))]
[:div.font-item.table-row
[:div.table-field.family
(if @edit?
[:input {:type "text"
:default-value @state
:on-key-down on-key-down
:on-change on-change}]
[:span (:font-family font)])]
(if new-css-system
[:div {:class (stl/css :font-item :table-row)}
[:div {:class (stl/css :table-field :family)}
(if @edit?
[:input {:type "text"
:default-value @state
:on-key-down on-key-down
:on-change on-change}]
[:span (:font-family font)])]
[:div.table-field.variants
(for [item variants]
[:div.variant
[:span.label
[:& font-variant-display-name {:variant item}]]
[:span.icon.close
{:on-click #(on-delete-variant (:id item))}
i/plus]])]
[:div {:class (stl/css :table-field :variants)}
(for [item variants]
[:div {:class (stl/css :variant)}
[:span {:class (stl/css :label)}
[:& font-variant-display-name {:variant item}]]
[:span
{:class (stl/css :icon :close)
:on-click #(on-delete-variant (:id item))}
i/plus]])]
[:div]
[:div]
(if @edit?
[:div.table-field.options
[:button.btn-primary
{:disabled (str/blank? @state)
:on-click on-save
:class (dom/classnames :btn-disabled (str/blank? @state))}
(tr "labels.save")]
[:span.icon.close {:on-click on-cancel} i/close]]
(if @edit?
[:div {:class (stl/css :table-field :options)}
[:button
{
:disabled (str/blank? @state)
:on-click on-save
:class (stl/css-case :btn-primary true
:btn-disabled (str/blank? @state))}
(tr "labels.save")]
[:span {:class (stl/css :icon :close)
:on-click on-cancel} i/close]]
[:div.table-field.options
[:span.icon {:on-click #(reset! open-menu? true)} i/actions]
[:& context-menu
{:on-close #(reset! open-menu? false)
:show @open-menu?
:fixed? false
:top -15
:left -115
:options [[(tr "labels.edit") #(reset! edit? true) nil "font-edit"]
[(tr "labels.delete") on-delete nil "font-delete"]]}]])]))
[:div {:class (stl/css :table-field :options)}
[:span {:class (stl/css :icon)
:on-click #(reset! open-menu? true)} i/actions]
[:& context-menu
{:on-close #(reset! open-menu? false)
:show @open-menu?
:fixed? false
:top -15
:left -115
:options [[(tr "labels.edit") #(reset! edit? true) nil "font-edit"]
[(tr "labels.delete") on-delete nil "font-delete"]]}]])]
;;OLD
[:div.font-item.table-row
[:div.table-field.family
(if @edit?
[:input {:type "text"
:default-value @state
:on-key-down on-key-down
:on-change on-change}]
[:span (:font-family font)])]
[:div.table-field.variants
(for [item variants]
[:div.variant
[:span.label
[:& font-variant-display-name {:variant item}]]
[:span.icon.close
{:on-click #(on-delete-variant (:id item))}
i/plus]])]
[:div]
(if @edit?
[:div.table-field.options
[:button.btn-primary
{:disabled (str/blank? @state)
:on-click on-save
:class (dom/classnames :btn-disabled (str/blank? @state))}
(tr "labels.save")]
[:span.icon.close {:on-click on-cancel} i/close]]
[:div.table-field.options
[:span.icon {:on-click #(reset! open-menu? true)} i/actions]
[:& context-menu
{:on-close #(reset! open-menu? false)
:show @open-menu?
:fixed? false
:top -15
:left -115
:options [[(tr "labels.edit") #(reset! edit? true) nil "font-edit"]
[(tr "labels.delete") on-delete nil "font-delete"]]}]])])))
(mf/defc installed-fonts
[{:keys [fonts] :as props}]
(let [sterm (mf/use-state "")
(let [new-css-system (mf/use-ctx ctx/new-css-system)
sterm (mf/use-state "")
matches?
#(str/includes? (str/lower (:font-family %)) @sterm)
@ -306,48 +419,99 @@
(let [val (dom/get-target-val event)]
(reset! sterm (str/lower val)))))]
[:div.dashboard-installed-fonts
[:h3 (tr "labels.installed-fonts")]
[:div.installed-fonts-header
[:div.table-field.family (tr "labels.font-family")]
[:div.table-field.variants (tr "labels.font-variants")]
[:div]
[:div.table-field.search-input
[:input {:placeholder (tr "labels.search-font")
:default-value ""
:on-change on-change}]]]
(if new-css-system
[:div {:class (stl/css :dashboard-installed-fonts)}
[:h3 (tr "labels.installed-fonts")]
[:div {:class (stl/css :installed-fonts-header)}
[:div {:class (stl/css :table-field :family)} (tr "labels.font-family")]
[:div {:class (stl/css :table-field :variants)} (tr "labels.font-variants")]
[:div]
[:div {:class (stl/css :table-field :search-input)}
[:input {:placeholder (tr "labels.search-font")
:default-value ""
:on-change on-change}]]]
(cond
(seq fonts)
(for [[font-id variants] (->> (vals fonts)
(filter matches?)
(group-by :font-id))]
[:& installed-font {:key (str font-id)
:font-id font-id
:variants variants}])
(cond
(seq fonts)
(for [[font-id variants] (->> (vals fonts)
(filter matches?)
(group-by :font-id))]
[:& installed-font {:key (str font-id)
:font-id font-id
:variants variants}])
(nil? fonts)
[:div.fonts-placeholder
[:div.icon i/loader]
[:div.label (tr "dashboard.loading-fonts")]]
(nil? fonts)
[:div {:class (stl/css :fonts-placeholder)}
[:div {:class (stl/css :icon)} i/loader]
[:div {:class (stl/css :label)} (tr "dashboard.loading-fonts")]]
:else
[:div.fonts-placeholder
[:div.icon i/text]
[:div.label (tr "dashboard.fonts.empty-placeholder")]])]))
:else
[:div {:class (stl/css :fonts-placeholder)}
[:div {:class (stl/css :icon)} i/text]
[:div {:class (stl/css :label)} (tr "dashboard.fonts.empty-placeholder")]])]
;; OLD
[:div.dashboard-installed-fonts
[:h3 (tr "labels.installed-fonts")]
[:div.installed-fonts-header
[:div.table-field.family (tr "labels.font-family")]
[:div.table-field.variants (tr "labels.font-variants")]
[:div]
[:div.table-field.search-input
[:input {:placeholder (tr "labels.search-font")
:default-value ""
:on-change on-change}]]]
(cond
(seq fonts)
(for [[font-id variants] (->> (vals fonts)
(filter matches?)
(group-by :font-id))]
[:& installed-font {:key (str font-id)
:font-id font-id
:variants variants}])
(nil? fonts)
[:div.fonts-placeholder
[:div.icon i/loader]
[:div.label (tr "dashboard.loading-fonts")]]
:else
[:div.fonts-placeholder
[:div.icon i/text]
[:div.label (tr "dashboard.fonts.empty-placeholder")]])])))
(mf/defc fonts-page
[{:keys [team] :as props}]
(let [fonts (mf/deref refs/dashboard-fonts)]
[:*
[:& header {:team team :section :fonts}]
[:section.dashboard-container.dashboard-fonts
[:& fonts-upload {:team team :installed-fonts fonts}]
[:& installed-fonts {:team team :fonts fonts}]]]))
(let [new-css-system (mf/use-ctx ctx/new-css-system)
fonts (mf/deref refs/dashboard-fonts)]
(if new-css-system
[:*
[:& header {:team team :section :fonts}]
[:section {:class (stl/css :dashboard-container :dashboard-fonts)}
[:& fonts-upload {:team team :installed-fonts fonts}]
[:& installed-fonts {:team team :fonts fonts}]]]
;; OLD
[:*
[:& header {:team team :section :fonts}]
[:section.dashboard-container.dashboard-fonts
[:& fonts-upload {:team team :installed-fonts fonts}]
[:& installed-fonts {:team team :fonts fonts}]]])))
(mf/defc font-providers-page
[{:keys [team] :as props}]
[:*
[:& header {:team team :section :providers}]
[:section.dashboard-container
[:span "font providers"]]])
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
(if new-css-system
[:*
[:& header {:team team :section :providers}]
[:section {:class (stl/css :dashboard-container)}
[:span "font providers"]]]
;; OLD
[:*
[:& header {:team team :section :providers}]
[:section.dashboard-container
[:span "font providers"]]])))

621
frontend/src/app/main/ui/dashboard/fonts.scss Normal file
View file

@ -0,0 +1,621 @@
@import "common/dependencies/colors";
$br3: 3px;
$fs12: 0.75rem;
$fs14: 0.875rem;
$fs14: 0.875rem;
$fs18: 1.125rem;
$fs22: 1.375rem;
$fw400: 400;
$fw600: 600;
$lh-088: 0.88;
$lh-115: 1.15; // original $title-lh-sm
$size-1: 0.25rem;
$size-2: 0.5rem;
$size-4: 1rem;
$size-5: 1.5rem;
$size-6: 2rem;
.dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: $color-white;
height: 63px;
padding: $size-1 $size-4 $size-1 $size-2;
position: relative;
z-index: 10;
user-select: none;
&.team {
display: grid;
grid-template-columns: 20% 1fr 20%;
}
.element-name {
margin-right: $size-2;
}
.btn-secondary {
flex-shrink: 0;
z-index: 10;
height: 32px;
}
svg {
fill: $color-black;
height: 14px;
margin-right: $size-1;
width: 14px;
}
nav {
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 1;
ul {
display: flex;
font-size: $fs14;
justify-content: center;
margin: 0;
}
li {
a {
display: flex;
align-items: center;
flex-basis: 140px;
border-bottom: 3px solid transparent;
color: $color-gray-30;
height: 40px;
padding: $size-1 $size-5;
font-weight: $fw400;
&:hover {
color: $color-black;
text-decoration: none;
}
}
&.active {
a {
color: $color-black;
border-color: $color-primary;
}
}
}
}
.dashboard-title {
display: flex;
align-items: center;
margin-left: 13px;
h1 {
color: $color-black;
display: flex;
flex-shrink: 0;
font-size: $fs22;
font-weight: $fw600;
z-index: 10;
user-select: all;
}
.context-menu.is-open {
margin-top: 10px;
}
}
.icon {
display: flex;
align-items: center;
cursor: pointer;
margin-left: $size-2;
z-index: 10;
svg {
fill: $color-gray-40;
width: 15px;
height: 15px;
&:hover {
fill: $color-primary-dark;
}
}
}
.dashboard-buttons {
display: flex;
justify-content: flex-end;
align-items: center;
}
.dashboard-header-actions {
display: flex;
}
.pin-icon {
margin: 0 $size-2 0 $size-5;
background-color: transparent;
border: none;
svg {
fill: $color-gray-20;
}
&.active {
svg {
fill: $color-gray-50;
}
}
}
}
.dashboard-header {
background-color: transparent;
.dashboard-title {
h1 {
color: $df-primary;
font-size: 24px;
font-weight: 400;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
max-width: 700px;
}
}
.icon {
svg {
fill: $df-secondary;
}
}
// Settings sub-menu
.dashboard-header-options {
li {
a {
font-size: 16px;
color: $df-secondary;
border-color: transparent;
&:hover {
color: $df-primary;
}
}
&.active {
a {
color: $df-primary;
}
}
}
}
}
.dashboard-fonts {
display: flex;
flex-direction: column;
align-items: center;
.dashboard-installed-fonts {
max-width: 1000px;
width: 100%;
display: flex;
margin-top: $size-5;
flex-direction: column;
h3 {
font-size: $fs14;
color: $color-gray-30;
margin: $size-1;
}
.font-item {
color: $color-black;
}
}
.installed-fonts-header {
color: $color-gray-40;
display: flex;
height: 40px;
font-size: $fs12;
background-color: $color-white;
align-items: center;
padding: 0px $size-5;
> .family {
min-width: 200px;
width: 200px;
}
> .variants {
padding-left: 12px;
}
.search-input {
display: flex;
flex-grow: 1;
justify-content: flex-end;
input {
font-size: $fs12;
border: 1px solid $color-gray-30;
border-radius: $br3;
width: 130px;
padding: $size-1;
margin: 0px;
}
}
}
.font-item {
color: $color-gray-40;
font-size: $fs14;
background-color: $color-white;
display: flex;
max-width: 1000px;
width: 100%;
min-height: 97px;
align-items: center;
padding: $size-5;
justify-content: space-between;
&:not(:first-child) {
border-top: 1px solid $color-gray-10;
}
input {
border: 1px solid $color-gray-30;
border-radius: $br3;
margin: 0px;
padding: $size-2;
font-size: $fs12;
}
> .family {
min-width: 200px;
width: 200px;
}
> .filenames {
min-width: 200px;
}
> .variants {
font-size: $fs14;
display: flex;
flex-wrap: wrap;
flex-grow: 1;
.variant {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
cursor: pointer;
.icon {
display: flex;
height: 16px;
width: 16px;
margin-left: 6px;
align-items: center;
svg {
fill: transparent;
width: 12px;
height: 12px;
transform: rotate(45deg);
}
}
&:hover {
.icon svg {
fill: $color-gray-30;
}
}
}
}
.filenames {
display: flex;
flex-direction: column;
font-size: $fs12;
}
.options {
display: flex;
justify-content: flex-end;
min-width: 180px;
.icon {
width: $size-5;
cursor: pointer;
display: flex;
margin-left: 10px;
justify-content: center;
align-items: center;
&.failure {
margin-right: 10px;
svg {
fill: $color-warning;
}
}
svg {
width: 16px;
height: 16px;
fill: $df-secondary;
}
&.close {
svg {
transform: rotate(45deg);
fill: $df-secondary;
}
}
}
}
}
.dashboard-fonts-upload {
max-width: 1000px;
width: 100%;
display: flex;
flex-direction: column;
.upload-button {
width: 100px;
}
.btn-secondary {
margin-left: 10px;
}
}
.dashboard-fonts-hero {
font-size: $fs14;
padding: $size-6;
background-color: $color-white;
margin-top: $size-6;
display: flex;
justify-content: space-between;
.banner {
background-color: $color-info-lighter;
display: grid;
grid-template-columns: 40px 1fr;
&:not(:last-child) {
margin-bottom: 10px;
}
.icon {
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 10px;
background-color: $color-info;
svg {
fill: $color-white;
height: 20px;
width: 20px;
}
}
.content {
margin: 10px;
}
&.warning {
background-color: $color-warning-lighter;
.icon {
background-color: $color-warning;
}
}
}
.desc {
h2 {
margin-bottom: $size-4;
color: $color-black;
}
width: 80%;
color: $color-gray-40;
}
.btn-primary {
flex-shrink: 0;
}
}
.fonts-placeholder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 1000px;
width: 100%;
height: 161px;
border: 1px dashed $color-gray-20;
margin-top: 16px;
.icon {
svg {
fill: $color-gray-40;
width: 32px;
height: 32px;
}
}
.label {
color: $color-gray-40;
font-size: $fs14;
}
}
}
.dashboard-fonts {
background-color: $db-primary;
border-top: 1px solid $db-cuaternary;
.dashboard-fonts-hero {
background-color: transparent;
.desc {
width: 70%;
h2 {
color: $df-primary;
font-weight: 400;
}
p {
color: $df-secondary;
font-size: 14px;
}
.banner {
background-color: $db-primary;
border-radius: 8px;
border: 1px solid $db-cuaternary;
color: $df-primary;
font-size: 12px;
.content {
span {
a {
color: $da-primary;
}
}
}
.icon {
background-color: transparent;
svg {
fill: $df-secondary;
}
}
&.warning {
background-color: $db-cuaternary;
}
}
}
}
.installed-fonts-header {
background-color: transparent;
text-transform: uppercase;
color: $df-secondary;
}
.fonts-placeholder {
border: 1px solid $db-cuaternary;
border-radius: 8px;
.icon {
svg {
fill: $df-secondary;
}
}
.label {
color: $df-secondary;
}
}
.font-item {
background-color: $db-tertiary;
border-radius: 8px;
color: $df-secondary;
padding: 0.8rem 1.5rem;
min-height: auto;
margin-top: 4px;
&:not(:first-child) {
border: none;
}
.table-field {
color: $df-primary;
.variant {
background-color: $db-cuaternary;
border-radius: 8px;
margin-right: 4px;
padding-right: 4px;
}
}
}
.font-item {
input {
background-color: $db-tertiary;
border-color: transparent;
border-radius: 8px;
color: $df-primary;
font-size: 14px;
&:focus {
outline: 1px solid $da-primary;
}
}
> .variants {
padding-left: 1rem;
}
}
.installed-fonts-header {
padding-right: 0;
.search-input {
input {
background-color: $db-tertiary;
border-color: transparent;
border-radius: 8px;
color: $df-primary;
font-size: 14px;
height: 32px;
padding: 0 0.6rem;
width: 150px;
&:focus {
outline: 1px solid $da-primary;
}
&::placeholder {
color: $df-secondary;
}
}
}
}
}
.btn-primary {
background-color: $da-tertiary;
border-radius: 8px;
color: $db-primary;
height: 32px;
text-transform: uppercase;
appearance: none;
align-items: center;
border: none;
cursor: pointer;
display: flex;
font-family: "worksans", sans-serif;
font-size: $fs12;
justify-content: center;
min-width: 25px;
padding: 0 1rem;
transition: all 0.4s;
text-decoration: none;
&:hover {
background-color: darken($da-tertiary, 10%);
color: $db-primary;
}
}
.btn-secondary {
background-color: $db-tertiary;
text-transform: uppercase;
border: none;
color: $df-primary;
border-radius: 8px;
font-size: 0.75rem;
padding: 0 1rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: $db-cuaternary;
color: $da-primary;
svg {
fill: $da-primary;
}
}
}

696
frontend/src/app/main/ui/dashboard/grid.cljs
View file

@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.dashboard.grid
(:require-macros [app.main.style :as stl])
(:require
[app.common.data.macros :as dm]
[app.common.geom.point :as gpt]
@ -19,6 +20,7 @@
[app.main.repo :as rp]
[app.main.store :as st]
[app.main.ui.components.color-bullet :as bc]
[app.main.ui.context :as ctx]
[app.main.ui.dashboard.file-menu :refer [file-menu]]
[app.main.ui.dashboard.import :refer [use-import-file]]
[app.main.ui.dashboard.inline-edition :refer [inline-edition]]
@ -66,7 +68,8 @@
(mf/defc grid-item-thumbnail
{::mf/wrap-props false}
[{:keys [file-id revn thumbnail-uri background-color]}]
(let [container (mf/use-ref)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
container (mf/use-ref)
visible? (h/use-visible container :once? true)]
(mf/with-effect [file-id revn visible? thumbnail-uri]
@ -80,13 +83,24 @@
:revn revn
:message (ex-message cause)))))))
[:div.grid-item-th
{:style {:background-color background-color}
:ref container}
(when visible?
(if thumbnail-uri
[:img.grid-item-thumbnail-image {:src thumbnail-uri}]
i/loader-pencil))]))
(if new-css-system
[:div {:class (stl/css :grid-item-th)
:style {:background-color background-color}
:ref container}
(when visible?
(if thumbnail-uri
[:img {:class (stl/css :grid-item-thumbnail-image)
:src thumbnail-uri}]
i/loader-pencil))]
;; OLD
[:div.grid-item-th
{:style {:background-color background-color}
:ref container}
(when visible?
(if thumbnail-uri
[:img.grid-item-thumbnail-image {:src thumbnail-uri}]
i/loader-pencil))])))
;; --- Grid Item Library
@ -94,108 +108,209 @@
{::mf/wrap [mf/memo]}
[{:keys [file] :as props}]
(mf/with-effect [file]
(when file
(let [font-ids (map :font-id (get-in file [:library-summary :typographies :sample] []))]
(run! fonts/ensure-loaded! font-ids))))
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
(mf/with-effect [file]
(when file
(let [font-ids (map :font-id (get-in file [:library-summary :typographies :sample] []))]
(run! fonts/ensure-loaded! font-ids))))
[:div.grid-item-th.library
(if (nil? file)
i/loader-pencil
(let [summary (:library-summary file)
components (:components summary)
colors (:colors summary)
typographies (:typographies summary)]
[:*
(when (and (zero? (:count components)) (zero? (:count colors)) (zero? (:count typographies)))
[:*
[:div.asset-section
[:div.asset-title
[:span (tr "workspace.assets.components")]
[:span.num-assets (str "\u00A0(") 0 ")"]]] ;; Unicode 00A0 is non-breaking space
[:div.asset-section
[:div.asset-title
[:span (tr "workspace.assets.colors")]
[:span.num-assets (str "\u00A0(") 0 ")"]]] ;; Unicode 00A0 is non-breaking space
[:div.asset-section
[:div.asset-title
[:span (tr "workspace.assets.typography")]
[:span.num-assets (str "\u00A0(") 0 ")"]]]]) ;; Unicode 00A0 is non-breaking space
(if new-css-system
[:div {:class (stl/css :grid-item-th :library)}
(if (nil? file)
i/loader-pencil
(let [summary (:library-summary file)
components (:components summary)
colors (:colors summary)
typographies (:typographies summary)]
[:*
(when (and (zero? (:count components)) (zero? (:count colors)) (zero? (:count typographies)))
[:*
[:div {:class (stl/css :asset-section)}
[:div {:class (stl/css :asset-title)}
[:span (tr "workspace.assets.components")]
[:span {:class (stl/css :num-assets)} (str "\u00A0(") 0 ")"]]] ;; Unicode 00A0 is non-breaking space
[:div {:class (stl/css :asset-section)}
[:div {:class (stl/css :asset-title)}
[:span (tr "workspace.assets.colors")]
[:span {:class (stl/css :num-assets)} (str "\u00A0(") 0 ")"]]] ;; Unicode 00A0 is non-breaking space
[:div {:class (stl/css :asset-section)}
[:div {:class (stl/css :asset-title)}
[:span (tr "workspace.assets.typography")]
[:span {:class (stl/css :num-assets)} (str "\u00A0(") 0 ")"]]]]) ;; Unicode 00A0 is non-breaking space
(when (pos? (:count components))
[:div.asset-section
[:div.asset-title
[:span (tr "workspace.assets.components")]
[:span.num-assets (str "\u00A0(") (:count components) ")"]] ;; Unicode 00A0 is non-breaking space
[:div.asset-list
(for [component (:sample components)]
(let [root-id (or (:main-instance-id component) (:id component))] ;; Check for components-v2 in library
[:div.asset-list-item {:key (str "assets-component-" (:id component))}
[:& component-svg {:root-shape (get-in component [:objects root-id])
:objects (:objects component)}] ;; Components in the summary come loaded with objects, even in v2
[:div.name-block
[:span.item-name {:title (:name component)}
(:name component)]]]))
(when (> (:count components) (count (:sample components)))
[:div.asset-list-item
[:div.name-block
[:span.item-name "(...)"]]])]])
(when (pos? (:count components))
[:div {:class (stl/css :asset-section)}
[:div {:class (stl/css :asset-title)}
[:span (tr "workspace.assets.components")]
[:span {:class (stl/css :num-assets)} (str "\u00A0(") (:count components) ")"]] ;; Unicode 00A0 is non-breaking space
[:div {:class (stl/css :asset-list)}
(for [component (:sample components)]
(let [root-id (or (:main-instance-id component) (:id component))] ;; Check for components-v2 in library
[:div {:class (stl/css :asset-list-item)
:key (str "assets-component-" (:id component))}
[:& component-svg {:root-shape (get-in component [:objects root-id])
:objects (:objects component)}] ;; Components in the summary come loaded with objects, even in v2
[:div {:class (stl/css :name-block)}
[:span {:class (stl/css :item-name)
:title (:name component)}
(:name component)]]]))
(when (> (:count components) (count (:sample components)))
[:div {:class (stl/css :asset-list-item)}
[:div {:class (stl/css :name-block)}
[:span {:class (stl/css :item-name)} "(...)"]]])]])
(when (pos? (:count colors))
[:div.asset-section
[:div.asset-title
[:span (tr "workspace.assets.colors")]
[:span.num-assets (str "\u00A0(") (:count colors) ")"]] ;; Unicode 00A0 is non-breaking space
[:div.asset-list
(for [color (:sample colors)]
(let [default-name (cond
(:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
(:color color) (:color color)
:else (:value color))]
[:div.asset-list-item {:key (str "assets-color-" (:id color))}
[:& bc/color-bullet {:color {:color (:color color)
:opacity (:opacity color)}}]
[:div.name-block
[:span.color-name (:name color)]
(when-not (= (:name color) default-name)
[:span.color-value (:color color)])]]))
(when (> (:count colors) (count (:sample colors)))
[:div.asset-list-item
[:div.name-block
[:span.item-name "(...)"]]])]])
(when (pos? (:count colors))
[:div {:class (stl/css :asset-section)}
[:div {:class (stl/css :asset-title)}
[:span (tr "workspace.assets.colors")]
[:span {:class (stl/css :num-assets)} (str "\u00A0(") (:count colors) ")"]] ;; Unicode 00A0 is non-breaking space
[:div {:class (stl/css :asset-list)}
(for [color (:sample colors)]
(let [default-name (cond
(:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
(:color color) (:color color)
:else (:value color))]
[:div {:class (stl/css :asset-list-item)
:key (str "assets-color-" (:id color))}
[:& bc/color-bullet {:color {:color (:color color)
:opacity (:opacity color)}}]
[:div {:class (stl/css :name-block)}
[:span {:class (stl/css :color-name)} (:name color)]
(when-not (= (:name color) default-name)
[:span {:class (stl/css :color-value)} (:color color)])]]))
(when (pos? (:count typographies))
[:div.asset-section
[:div.asset-title
[:span (tr "workspace.assets.typography")]
[:span.num-assets (str "\u00A0(") (:count typographies) ")"]] ;; Unicode 00A0 is non-breaking space
[:div.asset-list
(for [typography (:sample typographies)]
[:div.asset-list-item {:key (str "assets-typography-" (:id typography))}
[:div.typography-sample
{:style {:font-family (:font-family typography)
:font-weight (:font-weight typography)
:font-style (:font-style typography)}}
(tr "workspace.assets.typography.sample")]
[:div.name-block
[:span.item-name {:title (:name typography)}
(:name typography)]]])
(when (> (:count typographies) (count (:sample typographies)))
[:div.asset-list-item
[:div.name-block
[:span.item-name "(...)"]]])]])]))])
(when (> (:count colors) (count (:sample colors)))
[:div {:class (stl/css :asset-list-item)}
[:div {:class (stl/css :name-block)}
[:span {:class (stl/css :item-name)} "(...)"]]])]])
(when (pos? (:count typographies))
[:div {:class (stl/css :asset-section)}
[:div {:class (stl/css :asset-title)}
[:span (tr "workspace.assets.typography")]
[:span {:class (stl/css :num-assets)} (str "\u00A0(") (:count typographies) ")"]] ;; Unicode 00A0 is non-breaking space
[:div {:class (stl/css :asset-list)}
(for [typography (:sample typographies)]
[:div {:class (stl/css :asset-list-item)
:key (str "assets-typography-" (:id typography))}
[:div {:class (stl/css :typography-sample)
:style {:font-family (:font-family typography)
:font-weight (:font-weight typography)
:font-style (:font-style typography)}}
(tr "workspace.assets.typography.sample")]
[:div {:class (stl/css :name-block)}
[:span {:class (stl/css :item-name)
:title (:name typography)}
(:name typography)]]])
(when (> (:count typographies) (count (:sample typographies)))
[:div {:class (stl/css :asset-list-item)}
[:div {:class (stl/css :name-block)}
[:span {:class (stl/css :item-name)} "(...)"]]])]])]))]
;; OLD
[:div.grid-item-th.library
(if (nil? file)
i/loader-pencil
(let [summary (:library-summary file)
components (:components summary)
colors (:colors summary)
typographies (:typographies summary)]
[:*
(when (and (zero? (:count components)) (zero? (:count colors)) (zero? (:count typographies)))
[:*
[:div.asset-section
[:div.asset-title
[:span (tr "workspace.assets.components")]
[:span.num-assets (str "\u00A0(") 0 ")"]]] ;; Unicode 00A0 is non-breaking space
[:div.asset-section
[:div.asset-title
[:span (tr "workspace.assets.colors")]
[:span.num-assets (str "\u00A0(") 0 ")"]]] ;; Unicode 00A0 is non-breaking space
[:div.asset-section
[:div.asset-title
[:span (tr "workspace.assets.typography")]
[:span.num-assets (str "\u00A0(") 0 ")"]]]]) ;; Unicode 00A0 is non-breaking space
(when (pos? (:count components))
[:div.asset-section
[:div.asset-title
[:span (tr "workspace.assets.components")]
[:span.num-assets (str "\u00A0(") (:count components) ")"]] ;; Unicode 00A0 is non-breaking space
[:div.asset-list
(for [component (:sample components)]
(let [root-id (or (:main-instance-id component) (:id component))] ;; Check for components-v2 in library
[:div.asset-list-item {:key (str "assets-component-" (:id component))}
[:& component-svg {:root-shape (get-in component [:objects root-id])
:objects (:objects component)}] ;; Components in the summary come loaded with objects, even in v2
[:div.name-block
[:span.item-name {:title (:name component)}
(:name component)]]]))
(when (> (:count components) (count (:sample components)))
[:div.asset-list-item
[:div.name-block
[:span.item-name "(...)"]]])]])
(when (pos? (:count colors))
[:div.asset-section
[:div.asset-title
[:span (tr "workspace.assets.colors")]
[:span.num-assets (str "\u00A0(") (:count colors) ")"]] ;; Unicode 00A0 is non-breaking space
[:div.asset-list
(for [color (:sample colors)]
(let [default-name (cond
(:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
(:color color) (:color color)
:else (:value color))]
[:div.asset-list-item {:key (str "assets-color-" (:id color))}
[:& bc/color-bullet {:color {:color (:color color)
:opacity (:opacity color)}}]
[:div.name-block
[:span.color-name (:name color)]
(when-not (= (:name color) default-name)
[:span.color-value (:color color)])]]))
(when (> (:count colors) (count (:sample colors)))
[:div.asset-list-item
[:div.name-block
[:span.item-name "(...)"]]])]])
(when (pos? (:count typographies))
[:div.asset-section
[:div.asset-title
[:span (tr "workspace.assets.typography")]
[:span.num-assets (str "\u00A0(") (:count typographies) ")"]] ;; Unicode 00A0 is non-breaking space
[:div.asset-list
(for [typography (:sample typographies)]
[:div.asset-list-item {:key (str "assets-typography-" (:id typography))}
[:div.typography-sample
{:style {:font-family (:font-family typography)
:font-weight (:font-weight typography)
:font-style (:font-style typography)}}
(tr "workspace.assets.typography.sample")]
[:div.name-block
[:span.item-name {:title (:name typography)}
(:name typography)]]])
(when (> (:count typographies) (count (:sample typographies)))
[:div.asset-list-item
[:div.name-block
[:span.item-name "(...)"]]])]])]))])))
;; --- Grid Item
(mf/defc grid-item-metadata
[{:keys [modified-at]}]
(let [locale (mf/deref i18n/locale)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
locale (mf/deref i18n/locale)
time (dt/timeago modified-at {:locale locale})]
[:span.date
time]))
(if new-css-system
[:span {:class (stl/css :date)} time]
;; OLD
[:span.date time])))
(defn create-counter-element
[_element file-count]
@ -207,7 +322,8 @@
(mf/defc grid-item
{:wrap [mf/memo]}
[{:keys [file navigate? origin library-view?] :as props}]
(let [file-id (:id file)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
file-id (:id file)
local (mf/use-state {:menu-open false
:menu-pos nil
:edition false})
@ -313,71 +429,139 @@
(when (and (not selected?) (:menu-open @local))
(swap! local assoc :menu-open false)))
[:li.grid-item.project-th {:class (dom/classnames :library library-view?)}
[:button
{:tab-index "0"
:class (dom/classnames :selected selected?
:library library-view?)
:ref node-ref
:draggable true
:on-click on-select
:on-key-down (fn [event]
(dom/stop-propagation event)
(when (kbd/enter? event)
(on-navigate event))
(when (kbd/shift? event)
(when (or (kbd/down-arrow? event) (kbd/left-arrow? event) (kbd/up-arrow? event) (kbd/right-arrow? event))
(on-select event)) ;; TODO Fix this
))
:on-double-click on-navigate
:on-drag-start on-drag-start
:on-context-menu on-menu-click}
(if new-css-system
[:li
{:class (stl/css-case :grid-item true :project-th true :library library-view?)}
[:button
{:tab-index "0"
:class (stl/css-case :selected selected? :library library-view?)
:ref node-ref
:draggable true
:on-click on-select
:on-key-down (fn [event]
(dom/stop-propagation event)
(when (kbd/enter? event)
(on-navigate event))
(when (kbd/shift? event)
(when (or (kbd/down-arrow? event) (kbd/left-arrow? event) (kbd/up-arrow? event) (kbd/right-arrow? event))
(on-select event)) ;; TODO Fix this
))
:on-double-click on-navigate
:on-drag-start on-drag-start
:on-context-menu on-menu-click}
[:div.overlay]
(if library-view?
[:& grid-item-library {:file file}]
[:& grid-item-thumbnail
{:file-id (:id file)
:revn (:revn file)
:thumbnail-uri (:thumbnail-uri file)
:background-color (dm/get-in file [:data :options :background])}])
[:div {:class (stl/css :overlay)}]
(when (and (:is-shared file) (not library-view?))
[:div.item-badge i/library])
[:div.info-wrapper
[:div.item-info
(if (:edition @local)
[:& inline-edition {:content (:name file)
:on-end edit}]
[:h3 (:name file)])
[:& grid-item-metadata {:modified-at (:modified-at file)}]]
[:div.project-th-actions {:class (dom/classnames
:force-display (:menu-open @local))}
[:div.project-th-icon.menu
{:tab-index "0"
:ref menu-ref
:id (str file-id "-action-menu")
:on-click on-menu-click
:on-key-down (fn [event]
(when (kbd/enter? event)
(dom/stop-propagation event)
(on-menu-click event)))}
i/actions
(when selected?
[:& file-menu {:files (vals selected-files)
:show? (:menu-open @local)
:left (+ 24 (:x (:menu-pos @local)))
:top (:y (:menu-pos @local))
:navigate? navigate?
:on-edit on-edit
:on-menu-close on-menu-close
:origin origin
:dashboard-local dashboard-local
:parent-id (str file-id "-action-menu")}])]]]]]))
(if library-view?
[:& grid-item-library {:file file}]
[:& grid-item-thumbnail
{:file-id (:id file)
:revn (:revn file)
:thumbnail-uri (:thumbnail-uri file)
:background-color (dm/get-in file [:data :options :background])}])
(when (and (:is-shared file) (not library-view?))
[:div {:class (stl/css :item-badge)} i/library])
[:div {:class (stl/css :info-wrapper)}
[:div {:class (stl/css :item-info)}
(if (:edition @local)
[:& inline-edition {:content (:name file)
:on-end edit}]
[:h3 (:name file)])
[:& grid-item-metadata {:modified-at (:modified-at file)}]]
[:div {:class (stl/css-case :project-th-actions true :force-display (:menu-open @local))}
[:div
{:class (stl/css :project-th-icon :menu)
:tab-index "0"
:ref menu-ref
:id (str file-id "-action-menu")
:on-click on-menu-click
:on-key-down (fn [event]
(when (kbd/enter? event)
(dom/stop-propagation event)
(on-menu-click event)))}
i/actions
(when selected?
[:& file-menu {:files (vals selected-files)
:show? (:menu-open @local)
:left (+ 24 (:x (:menu-pos @local)))
:top (:y (:menu-pos @local))
:navigate? navigate?
:on-edit on-edit
:on-menu-close on-menu-close
:origin origin
:dashboard-local dashboard-local
:parent-id (str file-id "-action-menu")}])]]]]]
;; OLD
[:li.grid-item.project-th {:class (dom/classnames :library library-view?)}
[:button
{:tab-index "0"
:class (dom/classnames :selected selected?
:library library-view?)
:ref node-ref
:draggable true
:on-click on-select
:on-key-down (fn [event]
(dom/stop-propagation event)
(when (kbd/enter? event)
(on-navigate event))
(when (kbd/shift? event)
(when (or (kbd/down-arrow? event) (kbd/left-arrow? event) (kbd/up-arrow? event) (kbd/right-arrow? event))
(on-select event)) ;; TODO Fix this
))
:on-double-click on-navigate
:on-drag-start on-drag-start
:on-context-menu on-menu-click}
[:div.overlay]
(if library-view?
[:& grid-item-library {:file file}]
[:& grid-item-thumbnail
{:file-id (:id file)
:revn (:revn file)
:thumbnail-uri (:thumbnail-uri file)
:background-color (dm/get-in file [:data :options :background])}])
(when (and (:is-shared file) (not library-view?))
[:div.item-badge i/library])
[:div.info-wrapper
[:div.item-info
(if (:edition @local)
[:& inline-edition {:content (:name file)
:on-end edit}]
[:h3 (:name file)])
[:& grid-item-metadata {:modified-at (:modified-at file)}]]
[:div.project-th-actions {:class (dom/classnames
:force-display (:menu-open @local))}
[:div.project-th-icon.menu
{:tab-index "0"
:ref menu-ref
:id (str file-id "-action-menu")
:on-click on-menu-click
:on-key-down (fn [event]
(when (kbd/enter? event)
(dom/stop-propagation event)
(on-menu-click event)))}
i/actions
(when selected?
[:& file-menu {:files (vals selected-files)
:show? (:menu-open @local)
:left (+ 24 (:x (:menu-pos @local)))
:top (:y (:menu-pos @local))
:navigate? navigate?
:on-edit on-edit
:on-menu-close on-menu-close
:origin origin
:dashboard-local dashboard-local
:parent-id (str file-id "-action-menu")}])]]]]])))
(mf/defc grid
[{:keys [files project origin limit library-view? create-fn] :as props}]
(let [dragging? (mf/use-state false)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
dragging? (mf/use-state false)
project-id (:id project)
node-ref (mf/use-var nil)
@ -420,57 +604,112 @@
(reset! dragging? false)
(import-files (.-files (.-dataTransfer e))))))]
[:div.dashboard-grid
{:on-drag-enter on-drag-enter
:on-drag-over on-drag-over
:on-drag-leave on-drag-leave
:on-drop on-drop
:ref node-ref}
(cond
(nil? files)
[:& loading-placeholder]
(if new-css-system
[:div
{:class (stl/css :dashboard-grid)
:on-drag-enter on-drag-enter
:on-drag-over on-drag-over
:on-drag-leave on-drag-leave
:on-drop on-drop
:ref node-ref}
(seq files)
[:ul.grid-row
{:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
(cond
(nil? files)
[:& loading-placeholder]
(when @dragging?
[:li.grid-item])
(seq files)
[:ul
{:class (stl/css :grid-row)
:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
(for [item files]
[:& grid-item
{:file item
:key (:id item)
:navigate? true
:origin origin
:library-view? library-view?}])]
(when @dragging?
[:li {:class (stl/css :grid-item)}])
:else
[:& empty-placeholder
{:limit limit
:create-fn create-fn
:origin origin}])]))
(for [item files]
[:& grid-item
{:file item
:key (:id item)
:navigate? true
:origin origin
:library-view? library-view?}])]
:else
[:& empty-placeholder
{:limit limit
:create-fn create-fn
:origin origin}])]
;; OLD
[:div.dashboard-grid
{:on-drag-enter on-drag-enter
:on-drag-over on-drag-over
:on-drag-leave on-drag-leave
:on-drop on-drop
:ref node-ref}
(cond
(nil? files)
[:& loading-placeholder]
(seq files)
[:ul.grid-row
{:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
(when @dragging?
[:li.grid-item])
(for [item files]
[:& grid-item
{:file item
:key (:id item)
:navigate? true
:origin origin
:library-view? library-view?}])]
:else
[:& empty-placeholder
{:limit limit
:create-fn create-fn
:origin origin}])])))
(mf/defc line-grid-row
[{:keys [files selected-files dragging? limit] :as props}]
(let [elements limit
(let [new-css-system (mf/use-ctx ctx/new-css-system)
elements limit
limit (if dragging? (dec limit) limit)]
[:ul.grid-row.no-wrap
{:style {:grid-template-columns (dm/str "repeat(" elements ", 1fr)")}}
(if new-css-system
[:ul
{:class (stl/css :grid-row :no-wrap)
:style {:grid-template-columns (dm/str "repeat(" elements ", 1fr)")}}
(when dragging?
[:li.grid-item.dragged])
(for [item (take limit files)]
[:& grid-item
{:id (:id item)
:file item
:selected-files selected-files
:key (:id item)
:navigate? false}])]))
(when dragging?
[:li {:class (stl/css :grid-item :dragged)}])
(for [item (take limit files)]
[:& grid-item
{:id (:id item)
:file item
:selected-files selected-files
:key (:id item)
:navigate? false}])]
;; OLD
[:ul.grid-row.no-wrap
{:style {:grid-template-columns (dm/str "repeat(" elements ", 1fr)")}}
(when dragging?
[:li.grid-item.dragged])
(for [item (take limit files)]
[:& grid-item
{:id (:id item)
:file item
:selected-files selected-files
:key (:id item)
:navigate? false}])])))
(mf/defc line-grid
[{:keys [project team files limit create-fn] :as props}]
(let [dragging? (mf/use-state false)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
dragging? (mf/use-state false)
project-id (:id project)
team-id (:id team)
@ -546,24 +785,49 @@
(reset! dragging? false)
(import-files (.-files (.-dataTransfer e)))))))]
[:div.dashboard-grid {:on-drag-enter on-drag-enter
:on-drag-over on-drag-over
:on-drag-leave on-drag-leave
:on-drop on-drop}
(cond
(nil? files)
[:& loading-placeholder]
(if new-css-system
[:div {:class (stl/css :dashboard-grid)
:on-drag-enter on-drag-enter
:on-drag-over on-drag-over
:on-drag-leave on-drag-leave
:on-drop on-drop}
(cond
(nil? files)
[:& loading-placeholder]
(seq files)
[:& line-grid-row {:files files
:team-id team-id
:selected-files selected-files
:dragging? @dragging?
:limit limit}]
(seq files)
[:& line-grid-row {:files files
:team-id team-id
:selected-files selected-files
:dragging? @dragging?
:limit limit}]
:else
[:& empty-placeholder
{:dragging? @dragging?
:limit limit
:create-fn create-fn}])]
;; OLD
[:div.dashboard-grid {:on-drag-enter on-drag-enter
:on-drag-over on-drag-over
:on-drag-leave on-drag-leave
:on-drop on-drop}
(cond
(nil? files)
[:& loading-placeholder]
(seq files)
[:& line-grid-row {:files files
:team-id team-id
:selected-files selected-files
:dragging? @dragging?
:limit limit}]
:else
[:& empty-placeholder
{:dragging? @dragging?
:limit limit
:create-fn create-fn}])])))
:else
[:& empty-placeholder
{:dragging? @dragging?
:limit limit
:create-fn create-fn}])]))

517
frontend/src/app/main/ui/dashboard/grid.scss Normal file
View file

@ -0,0 +1,517 @@
@import "common/dependencies/colors";
$size-1: 0.25rem;
$size-2: 0.5rem;
$size-3: 0.75rem;
$size-4: 1rem;
$size-6: 2rem;
$fs12: 0.75rem;
$fs14: 0.875rem;
$fs18: 1.125rem;
$fw400: 400;
$fw500: 500;
$bp-max-1366: "(max-width: 1366px)";
$br2: 2px;
$br3: 3px;
$br4: 4px;
$br5: 5px;
$lh-192: 1.92;
.dashboard-grid {
font-size: $fs14;
height: 100%;
overflow: hidden;
overflow-y: auto;
margin-bottom: 0;
.grid-row {
display: grid;
width: 99%;
margin-left: 13px;
}
.grid-item {
align-items: center;
cursor: pointer;
display: flex;
flex-direction: column;
flex: 1 0 260px;
height: 230px;
margin: $size-3 $size-4 $size-4 $size-2;
position: relative;
text-align: center;
a,
button {
width: 100%;
font-weight: $fw400;
}
button {
background-color: transparent;
border: none;
}
@media #{$bp-max-1366} {
height: 200px;
flex: 1 0 230px;
}
&:hover {
.grid-item-th {
border: 2px solid $color-primary;
}
}
.grid-item-th {
border-radius: $br3;
border: 2px solid lighten($color-gray-20, 15%);
text-align: initial;
img {
object-fit: contain;
}
}
&.dragged {
border-radius: $br3;
border: 2px solid lighten($color-gray-20, 15%);
text-align: initial;
max-height: 160px;
}
&.placeholder {
min-width: 115px;
max-width: 115px;
display: flex;
flex-direction: column;
justify-content: center;
.placeholder-icon {
svg {
transform: rotate(-90deg);
width: 20px;
height: 20px;
fill: $color-gray-30;
}
}
.placeholder-label {
font-size: $fs14;
}
}
&.overlay {
border-radius: $br4;
border: 2px solid $color-primary;
height: 100%;
opacity: 0;
pointer-events: none;
position: absolute;
width: 100%;
z-index: 1;
}
&:hover .overlay {
display: block;
opacity: 1;
}
&.small-item {
max-width: 12%;
min-width: 190px;
padding: $size-4;
justify-content: center;
}
.grid-item-icon {
width: 90px;
height: 90px;
}
.info-wrapper {
display: grid;
grid-template-columns: 1fr auto;
}
.item-info {
display: grid;
padding: $size-2;
text-align: left;
width: 100%;
font-size: $fs12;
h3 {
border: 1px solid transparent;
color: $color-gray-60;
font-size: $fs14;
font-weight: $fw500;
overflow: hidden;
padding: 0;
height: 27px;
padding-right: $size-2;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
line-height: $lh-192; // Original value was 27px; 27px/14px = 192.857142857% => $lh-192 (rounded)
max-width: 260px;
@media #{$bp-max-1366} {
max-width: 230px;
}
}
span.date {
color: $color-gray-30;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
max-width: 260px;
&::first-letter {
text-transform: capitalize;
}
@media #{$bp-max-1366} {
max-width: 230px;
}
}
.edit-wrapper {
.element-title {
padding: 0px;
height: 25px;
color: $color-gray-60;
font-size: $fs14;
font-weight: $fw400;
}
}
}
.item-badge {
background-color: $color-white;
border: 1px solid $color-gray-20;
border-radius: $br2;
position: absolute;
top: $size-2;
right: $size-2;
height: 32px;
width: 32px;
display: flex;
align-items: center;
justify-content: center;
svg {
fill: $color-gray-30;
height: 16px;
width: 16px;
}
}
&.add-file {
border: 1px dashed $color-gray-20;
justify-content: center;
box-shadow: none;
span {
color: $color-gray-60;
font-size: $fs14;
}
&:hover {
background-color: $color-white;
border: 2px solid $color-primary;
}
}
// PROJECTS, ELEMENTS & ICONS GRID
&.project-th {
background-color: $color-white;
&:hover,
&:focus,
&:focus-within {
.project-th-actions {
opacity: 1;
}
a {
text-decoration: none;
}
}
.selected {
.grid-item-th {
border: 2px solid $color-primary;
}
}
.project-th-actions {
align-items: center;
opacity: 0;
display: flex;
right: 5px;
justify-content: center;
width: 30px;
height: 100%;
span {
color: $color-black;
}
.project-th-icon {
align-items: center;
display: flex;
margin-right: $size-2;
&.menu {
margin-right: 0;
display: flex;
justify-content: center;
align-items: flex-end;
flex-direction: column;
width: 100%;
height: 30px;
margin-top: 20px;
> svg {
fill: $color-gray-60;
margin-right: 0;
height: 18px;
width: 18px;
}
&:hover,
&:focus {
> svg {
fill: $color-primary-dark;
}
}
}
}
}
.project-th-actions.force-display {
opacity: 1;
}
}
// IMAGES SECTION
&.images-th {
border: 1px dashed $color-gray-20;
border-bottom: 2px solid lighten($color-gray-20, 12%);
&:hover {
border-color: $color-primary;
}
}
.grid-item-image {
svg {
max-height: 100px;
max-width: 100px;
min-height: 40px;
min-width: 40px;
width: 8vw;
}
}
.color-swatch {
border-top-left-radius: $br5;
border-top-right-radius: $br5;
height: 25%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.color-data {
color: $color-gray-30;
margin-top: 15px;
}
.drag-counter {
position: absolute;
top: 5px;
left: 4px;
width: 32px;
height: 32px;
background-color: $color-primary;
border-radius: 50%;
color: $color-black;
font-size: $fs18;
display: flex;
justify-content: center;
align-items: center;
}
}
.grid-item-th {
background-position: center;
background-size: auto 80%;
background-repeat: no-repeat;
border-top-left-radius: $br3;
border-top-right-radius: $br3;
height: 230px;
max-height: 160px;
overflow: hidden;
position: relative;
width: 100%;
background-color: $color-canvas;
display: flex;
justify-content: center;
flex-direction: row;
.img-th {
height: auto;
width: 100%;
}
svg {
height: 100%;
width: 100%;
}
svg#loader-pencil {
fill: $color-gray-20;
}
}
// LIBRARY VIEW
.grid-item {
.library {
height: 580px;
}
&.project-th.library {
height: 610px;
width: 300px;
}
.grid-item-th.library {
background-color: $color-gray-50;
flex-direction: column;
height: 90%;
justify-content: flex-start;
max-height: 550px;
padding: $size-6;
.asset-section {
font-size: $fs12;
color: $color-gray-20;
&:not(:first-child) {
margin-top: $size-4;
}
}
.asset-title {
display: flex;
font-size: $fs12;
text-transform: uppercase;
& .num-assets {
color: $color-gray-30;
}
}
.asset-list-item {
display: flex;
align-items: center;
border: 1px solid transparent;
border-radius: $br3;
margin-top: $size-1;
padding: 2px;
font-size: $fs12;
color: $color-white;
position: relative;
& .name-block {
color: $color-gray-20;
width: calc(100% - 24px - #{$size-2});
}
& .item-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
& svg {
background-color: $color-canvas;
border-radius: $br4;
border: 2px solid transparent;
height: 24px;
width: 24px;
margin-right: $size-2;
}
& .color-name {
color: $color-white;
}
& .color-value {
margin-left: $size-1;
color: $color-gray-30;
text-transform: uppercase;
}
& .typography-sample {
height: 20px;
margin-right: $size-1;
width: 20px;
}
}
}
}
}
.dashboard-grid {
.grid-item {
&.project-th {
background-color: transparent;
border-radius: 8px;
padding-top: 0.3rem;
.info-wrapper {
cursor: pointer;
.item-info {
h3 {
color: $df-primary;
font-size: 16px;
font-weight: 400;
}
}
.date {
color: $df-secondary;
}
.project-th-actions {
.project-th-icon {
margin-top: 0;
.icon-actions {
fill: $df-secondary;
}
}
}
}
&:hover {
background-color: $db-tertiary;
.grid-item-th {
border: none;
}
}
}
.grid-item-th {
border-radius: 4px;
border: none;
cursor: pointer;
}
.item-badge {
background-color: $da-primary;
border: none;
border-radius: 4px;
svg {
fill: $db-secondary;
}
}
}
}

34
frontend/src/app/main/ui/dashboard/inline_edition.cljs
View file

@ -5,7 +5,9 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.dashboard.inline-edition
(:require-macros [app.main.style :as stl])
(:require
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.keyboard :as kbd]
@ -13,7 +15,8 @@
(mf/defc inline-edition
[{:keys [content on-end] :as props}]
(let [name (mf/use-state content)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
name (mf/use-state content)
input-ref (mf/use-ref)
on-input
@ -59,13 +62,26 @@
(dom/focus! node)
(dom/select-text! node))))
[:div.edit-wrapper
[:input.element-title {:value @name
:ref input-ref
:on-click on-click
:on-change on-input
:on-key-down on-keyup
:on-blur on-blur}]
[:span.close {:on-click on-cancel} i/close]]))
(if new-css-system
[:div {:class (stl/css :edit-wrapper)}
[:input {:class (stl/css :element-title)
:value @name
:ref input-ref
:on-click on-click
:on-change on-input
:on-key-down on-keyup
:on-blur on-blur}]
[:span {:class (stl/css :close)
:on-click on-cancel} i/close]]
;; OLD
[:div.edit-wrapper
[:input.element-title {:value @name
:ref input-ref
:on-click on-click
:on-change on-input
:on-key-down on-keyup
:on-blur on-blur}]
[:span.close {:on-click on-cancel} i/close]])))

0
frontend/src/app/main/ui/dashboard/inline_edition.scss Normal file
View file

38
frontend/src/app/main/ui/dashboard/libraries.cljs
View file

@ -5,12 +5,14 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.dashboard.libraries
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.main.data.dashboard :as dd]
[app.main.features :as features]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.dashboard.grid :refer [grid]]
[app.main.ui.hooks :as hooks]
[app.util.dom :as dom]
@ -19,7 +21,8 @@
(mf/defc libraries-page
[{:keys [team] :as props}]
(let [files-map (mf/deref refs/dashboard-shared-files)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
files-map (mf/deref refs/dashboard-shared-files)
projects (mf/deref refs/dashboard-projects)
default-project (->> projects vals (d/seek :is-default))
@ -46,14 +49,27 @@
(st/emit! (dd/fetch-shared-files)
(dd/clear-selected-files)))
[:*
[:header.dashboard-header {:ref rowref}
[:div.dashboard-title#dashboard-libraries-title
[:h1 (tr "dashboard.libraries-title")]]]
[:section.dashboard-container.no-bg.dashboard-shared
[:& grid {:files files
:project default-project
:origin :libraries
:limit limit
:library-view? components-v2}]]]))
(if new-css-system
[:*
[:header {:class (stl/css :dashboard-header) :ref rowref}
[:div#dashboard-libraries-title {:class (stl/css :dashboard-title)}
[:h1 (tr "dashboard.libraries-title")]]]
[:section {:class (stl/css :dashboard-container :no-bg :dashboard-shared)}
[:& grid {:files files
:project default-project
:origin :libraries
:limit limit
:library-view? components-v2}]]]
;; OLD
[:*
[:header.dashboard-header {:ref rowref}
[:div.dashboard-title#dashboard-libraries-title
[:h1 (tr "dashboard.libraries-title")]]]
[:section.dashboard-container.no-bg.dashboard-shared
[:& grid {:files files
:project default-project
:origin :libraries
:limit limit
:library-view? components-v2}]]])))

752
frontend/src/app/main/ui/dashboard/libraries.scss Normal file
View file

@ -0,0 +1,752 @@
@import "common/dependencies/colors";
// FIXME: Mostly duplcated from projects.css
$br3: 3px;
$fs14: 0.875rem;
$fs18: 1.125rem;
$fs22: 1.375rem;
$fw400: 400;
$fw600: 600;
$lh-088: 0.88;
$lh-115: 1.15; // original $title-lh-sm
$size-1: 0.25rem;
$size-2: 0.5rem;
$size-4: 1rem;
$size-5: 1.5rem;
$size-6: 2rem;
.dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: $color-white;
height: 63px;
padding: $size-1 $size-4 $size-1 $size-2;
position: relative;
z-index: 10;
user-select: none;
&.team {
display: grid;
grid-template-columns: 20% 1fr 20%;
}
.element-name {
margin-right: $size-2;
}
.btn-secondary {
flex-shrink: 0;
z-index: 10;
height: 32px;
svg {
height: 16px;
width: 16px;
}
}
svg {
fill: $color-black;
height: 14px;
margin-right: $size-1;
width: 14px;
}
nav {
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 1;
ul {
display: flex;
font-size: $fs14;
justify-content: center;
margin: 0;
}
li {
a {
display: flex;
align-items: center;
flex-basis: 140px;
border-bottom: 3px solid transparent;
color: $color-gray-30;
height: 40px;
padding: $size-1 $size-5;
font-weight: $fw400;
&:hover {
color: $color-black;
text-decoration: none;
}
}
&.active {
a {
color: $color-black;
border-color: $color-primary;
}
}
}
}
.dashboard-title {
display: flex;
align-items: center;
margin-left: 13px;
h1 {
color: $color-black;
display: flex;
flex-shrink: 0;
font-size: $fs22;
font-weight: $fw600;
z-index: 10;
user-select: all;
}
.context-menu.is-open {
margin-top: 10px;
}
}
.icon {
display: flex;
align-items: center;
cursor: pointer;
margin-left: $size-2;
z-index: 10;
svg {
fill: $color-gray-40;
width: 15px;
height: 15px;
&:hover {
fill: $color-primary-dark;
}
}
}
.dashboard-buttons {
display: flex;
justify-content: flex-end;
align-items: center;
}
.dashboard-header-actions {
display: flex;
}
.pin-icon {
margin: 0 $size-2 0 $size-5;
background-color: transparent;
border: none;
svg {
fill: $color-gray-20;
}
&.active {
svg {
fill: $color-gray-50;
}
}
}
}
.dashboard-header {
background-color: transparent;
.dashboard-title {
h1 {
color: $df-primary;
font-size: 24px;
font-weight: 400;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
max-width: 700px;
}
}
.icon {
svg {
fill: $df-secondary;
}
}
// Settings sub-menu
.dashboard-header-options {
li {
a {
font-size: 16px;
color: $df-secondary;
border-color: transparent;
&:hover {
color: $df-primary;
}
}
&.active {
a {
color: $df-primary;
}
}
}
}
}
.dashboard-container {
background-color: $color-dashboard;
flex: 1 0 0;
margin-right: $size-4;
overflow-y: auto;
width: 100%;
&.dashboard-projects {
user-select: none;
}
&.no-bg {
background-color: transparent;
}
&.dashboard-shared {
width: calc(100vw - 320px);
margin-right: 50px;
}
&.search {
margin-top: 10px;
}
}
.dashboard-container {
background-color: transparent;
border-top: 1px solid $db-cuaternary;
.dashboard-settings {
a {
color: $df-secondary;
}
.form-container {
width: 800px;
margin: 80px auto auto 120px;
form {
width: 468px;
.fields-row {
.custom-input,
.custom-select {
flex-direction: column-reverse;
label {
position: relative;
text-transform: uppercase;
color: $df-primary;
font-size: 11px;
margin-bottom: 12px;
margin-left: -4px;
}
input,
select {
background-color: $db-tertiary;
border-radius: 8px;
border-color: transparent;
color: $df-primary;
padding: 0 15px;
&:focus {
outline: 1px solid $da-primary;
}
::placeholder {
color: $df-secondary;
}
}
.help-icon {
bottom: 12px;
top: auto;
svg {
fill: $df-secondary;
}
}
&.disabled {
input {
background-color: $db-primary;
border-color: $db-cuaternary;
color: $df-secondary;
}
}
.input-container {
background-color: $db-tertiary;
border-radius: 8px;
border-color: transparent;
margin-top: 22px;
.main-content {
label {
position: absolute;
top: -24px;
}
span {
color: $df-primary;
}
}
&:focus {
border: 1px solid $da-primary;
}
}
textarea {
border-radius: 8px;
padding: 12px 14px;
background-color: $db-tertiary;
color: $df-primary;
border: none;
&:focus {
outline: 1px solid $da-primary;
}
}
}
}
.field-title {
color: $df-primary;
}
.field-title:not(:first-child) {
margin-top: 64px;
}
.field-text {
color: $df-secondary;
}
button,
.btn-secondary {
width: 100%;
font-size: 11px;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
&:hover {
color: $da-primary;
background-color: $db-cuaternary;
}
}
hr {
display: none;
}
}
.links {
margin-top: 12px;
}
}
}
//Access tokens
.dashboard-access-tokens {
width: 800px;
margin-left: 120px;
margin-top: 80px;
.access-tokens-hero-container {
background-color: transparent;
.access-tokens-hero {
width: 468px;
flex-direction: column;
gap: 32px;
background-color: transparent;
margin: 0;
padding: 0;
.desc {
background-color: transparent;
width: 100%;
h2 {
color: $df-primary;
font-size: 24px;
font-weight: regular;
margin-bottom: 32px;
}
p {
color: $df-secondary;
margin-bottom: 0;
font-size: 14px;
}
}
button {
width: 100%;
font-size: 11px;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
&:hover {
color: $da-primary;
background-color: $db-cuaternary;
}
}
}
}
.dashboard-table {
width: 800px;
.table-rows {
padding-top: 0;
.table-row {
font-size: 14px;
min-height: 40px;
height: fit-content;
.name {
color: $df-primary;
max-width: 480px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.expiration-date {
color: $df-secondary;
}
}
}
}
.access-tokens-empty {
width: 468px;
border: 1px solid $db-cuaternary;
border-radius: 8px;
margin-top: 32px;
font-size: 14px;
background-color: transparent;
color: $df-secondary;
}
}
// Team webhooks
&.dashboard-team-webhooks {
width: 800px;
margin-left: 120px;
margin-top: 80px;
border: none;
align-items: flex-start;
.webhooks-hero-container {
width: 468px;
background-color: transparent;
.webhooks-hero {
width: 468px;
flex-direction: column;
gap: 32px;
background-color: transparent;
margin: 0;
padding: 0;
.desc {
background-color: transparent;
width: 100%;
h2 {
color: $df-primary;
font-size: 24px;
font-weight: regular;
margin-bottom: 32px;
}
p {
color: $df-secondary;
margin-bottom: 0;
font-size: 14px;
}
}
.btn-primary {
width: 100%;
font-size: 11px;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
&:hover {
color: $da-primary;
background-color: $db-cuaternary;
}
}
}
}
.dashboard-table {
width: 800px;
.table-rows {
padding-top: 0;
.table-row {
font-size: 14px;
min-height: 40px;
height: fit-content;
.name {
color: $df-primary;
max-width: 480px;
}
.expiration-date {
color: $df-secondary;
}
}
}
}
.webhooks-empty {
width: 468px;
border: 1px solid $db-cuaternary;
border-radius: 8px;
margin-top: 32px;
font-size: 14px;
background-color: transparent;
color: $df-secondary;
}
}
// Members section
.dashboard-table {
.table-header {
background-color: transparent;
color: $df-secondary;
font-size: 12px;
text-transform: uppercase;
}
.table-rows {
.table-row {
background-color: $db-tertiary;
border-radius: 8px;
color: $df-primary;
.rol-selector {
background-color: $db-cuaternary;
border-color: transparent;
border-radius: 8px;
}
}
}
.member-info {
.member-name .you,
.member-email {
color: $df-secondary;
}
}
.status-badge {
border-radius: 8px;
color: $db-primary;
text-transform: uppercase;
}
.empty-invitations {
border: 1px solid $db-cuaternary;
border-radius: 8px;
color: $df-secondary;
}
}
.actions-dropdown,
.options-dropdown {
background-color: $db-tertiary;
border: 1px solid $db-cuaternary;
border-radius: 8px;
min-width: 252px;
.separator {
border-color: transparent;
margin-top: 10px;
}
li {
border-radius: 8px;
height: 40px;
margin: 5px;
color: $df-primary;
&:hover {
background-color: $db-cuaternary;
}
}
&.options-dropdown {
li {
color: $df-primary;
&.warning {
color: $color-danger;
}
}
}
}
}
.dashboard-project-row {
margin-bottom: $size-5;
position: relative;
.project {
align-items: center;
background: $color-white;
border-radius: $br3;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: $size-4;
padding: $size-2 $size-2 $size-2 $size-4;
width: 99%;
max-height: 40px;
gap: $size-2;
.project-name-wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 32px;
margin-left: $size-2;
}
.show-more {
align-items: center;
color: $color-gray-30;
display: flex;
font-size: $fs14;
justify-content: space-between;
cursor: pointer;
background-color: transparent;
border: none;
.placeholder-icon {
transform: rotate(-90deg);
margin-left: 10px;
svg {
height: 14px;
width: 14px;
fill: $color-gray-30;
}
}
&:hover {
color: $color-primary-dark;
svg {
fill: $color-primary-dark;
}
}
}
.btn-secondary {
border: none;
padding: $size-2;
}
h2 {
cursor: pointer;
font-size: $fs18;
line-height: $lh-088; // Original value was 1rem = 16px; 16px/18px = 88.88888% => $lh-088
font-weight: $fw600;
color: $color-black;
margin-right: $size-1;
}
.edit-wrapper {
margin-right: $size-4;
}
.info {
font-size: $fs14;
line-height: $lh-115; // Original value was 1rem = 16px; 16px/14px = 114.285714286% => $lh-115 (rounded)
font-weight: $fw400;
color: $color-gray-60;
margin-left: 0.75rem;
@media (max-width: 760px) {
display: none;
}
}
.project-actions {
display: flex;
opacity: 1;
margin-left: $size-6;
.btn-small {
height: 32px;
margin: 0 $size-2;
width: 32px;
svg {
height: 16px;
width: 16px;
}
}
}
.pin-icon {
cursor: pointer;
display: flex;
align-items: center;
margin-right: 14px;
background-color: transparent;
border: none;
svg {
width: 15px;
height: 15px;
fill: $color-gray-20;
}
&.active {
svg {
fill: $color-gray-50;
}
}
}
}
&:hover,
&:focus,
&:focus-within {
.project-actions {
opacity: 1;
}
}
.show-more {
align-items: center;
color: $color-gray-30;
display: flex;
font-size: $fs14;
justify-content: space-between;
cursor: pointer;
background-color: transparent;
border: none;
position: absolute;
top: 9px;
right: 53px;
.placeholder-icon {
transform: rotate(-90deg);
margin-left: 10px;
svg {
height: 14px;
width: 14px;
fill: $color-gray-30;
}
}
&:hover {
color: $color-primary-dark;
svg {
fill: $color-primary-dark;
}
}
}
}
.dashboard-project-row .project {
background-color: transparent;
h2 {
color: $df-primary;
font-weight: 400;
}
span,
.info {
color: $df-secondary;
}
.project-actions {
svg {
fill: $df-primary;
}
.pin-icon svg {
fill: $df-secondary;
}
}
}
.btn-secondary {
background-color: $db-tertiary;
text-transform: uppercase;
border: none;
color: $df-primary;
border-radius: 8px;
font-size: 0.75rem;
padding: 0 1rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: $db-cuaternary;
color: $da-primary;
svg {
fill: $da-primary;
}
}
}

65
frontend/src/app/main/ui/dashboard/placeholder.cljs
View file

@ -5,37 +5,68 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.dashboard.placeholder
(:require-macros [app.main.style :as stl])
(:require
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
(mf/defc empty-placeholder
[{:keys [dragging? limit origin create-fn] :as props}]
(let [on-click
(let [new-css-system (mf/use-ctx ctx/new-css-system)
on-click
(mf/use-fn
(mf/deps create-fn)
(fn [_]
(create-fn "dashboard:empty-folder-placeholder")))]
(cond
(true? dragging?)
[:ul.grid-row.no-wrap
{:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
[:li.grid-item]]
(if new-css-system
(cond
(true? dragging?)
[:ul
{:class (stl/css :grid-row :no-wrap)
:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
[:li {:class (stl/css :grid-item)}]]
(= :libraries origin)
[:div.grid-empty-placeholder.libs {:data-test "empty-placeholder"}
[:div.text
[:& i18n/tr-html {:label "dashboard.empty-placeholder-drafts"}]]]
(= :libraries origin)
[:div {:class (stl/css :grid-empty-placeholder :libs)
:data-test "empty-placeholder"}
[:div {:class (stl/css :text)}
[:& i18n/tr-html {:label "dashboard.empty-placeholder-drafts"}]]]
:else
[:div.grid-empty-placeholder
{:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
[:button.create-new {:on-click on-click} (tr "dashboard.new-file")]])))
:else
[:div
{:class (stl/css :grid-empty-placeholder)
:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
[:button {:class (stl/css :create-new)
:on-click on-click} (tr "dashboard.new-file")]])
;; OLD
(cond
(true? dragging?)
[:ul.grid-row.no-wrap
{:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
[:li.grid-item]]
(= :libraries origin)
[:div.grid-empty-placeholder.libs {:data-test "empty-placeholder"}
[:div.text
[:& i18n/tr-html {:label "dashboard.empty-placeholder-drafts"}]]]
:else
[:div.grid-empty-placeholder
{:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
[:button.create-new {:on-click on-click} (tr "dashboard.new-file")]]))))
(mf/defc loading-placeholder
[]
[:div.grid-empty-placeholder.loader
[:div.icon i/loader]
[:div.text (tr "dashboard.loading-files")]])
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
(if new-css-system
[:div {:class (stl/css :grid-empty-placeholder :loader)}
[:div {:class (stl/css :icon)} i/loader]
[:div {:class (stl/css :text)} (tr "dashboard.loading-files")]]
[:div.grid-empty-placeholder.loader
[:div.icon i/loader]
[:div.text (tr "dashboard.loading-files")]])))

112
frontend/src/app/main/ui/dashboard/placeholder.scss Normal file
View file

@ -0,0 +1,112 @@
@import "common/dependencies/colors";
$br0: 0;
$br3: 3px;
$br12: 12px;
$fs16: 1rem;
.grid-empty-placeholder {
border-radius: $br12;
display: grid;
background-color: rgba(227, 227, 227, 0.3);
padding: 13px;
margin-right: 13px;
height: 230px;
&.loader {
justify-items: center;
}
.icon {
display: flex;
align-items: center;
justify-content: center;
}
&.libs {
background-image: url(/images/ph-left.svg), url(/images/ph-right.svg);
background-position:
15% bottom,
85% top;
background-repeat: no-repeat;
align-items: center;
border: 1px dashed #b1b2b5;
border-radius: $br3;
display: flex;
flex-direction: column;
height: 200px;
margin: 1rem;
padding: 3rem;
justify-content: center;
.text {
p {
max-width: 360px;
text-align: center;
font-size: $fs16;
}
}
}
.create-new {
background-color: white;
border: 2px solid $color-gray-10;
border-radius: $br3;
color: $color-black;
cursor: pointer;
height: 158px;
font-family: "worksans", sans-serif;
margin: 0.5rem;
&:hover {
border: 2px solid $color-primary;
}
}
&.search {
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
height: 200px;
background: $color-white;
border: 1px dashed #e3e3e3;
border-radius: $br0;
}
svg {
width: 36px;
height: 36px;
fill: $color-gray-20;
}
.text {
margin-top: 10px;
color: $color-gray-30;
font-size: $fs16;
}
}
.grid-empty-placeholder {
background-color: transparent;
.create-new {
background-color: $db-tertiary;
border-radius: 8px;
border: none;
color: $df-primary;
text-transform: uppercase;
&:hover {
background-color: $db-cuaternary;
color: $da-primary;
}
}
&.search {
border: 1px solid $db-cuaternary;
border-radius: 8px;
.text {
color: $df-primary;
}
.icon {
svg {
fill: $df-secondary;
}
}
}
}

506
frontend/src/app/main/ui/dashboard/projects.cljs
View file

@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.dashboard.projects
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.geom.point :as gpt]
@ -16,6 +17,7 @@
[app.main.data.users :as du]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.dashboard.grid :refer [line-grid]]
[app.main.ui.dashboard.inline-edition :refer [inline-edition]]
[app.main.ui.dashboard.project-menu :refer [project-menu]]
@ -34,19 +36,32 @@
(mf/defc header
{::mf/wrap [mf/memo]}
[]
(let [on-click (mf/use-fn #(st/emit! (dd/create-project)))]
[:header.dashboard-header
[:div.dashboard-title#dashboard-projects-title
[:h1 (tr "dashboard.projects-title")]]
[:button.btn-secondary.btn-small
{:on-click on-click
:data-test "new-project-button"}
(tr "dashboard.new-project")]]))
(let [new-css-system (mf/use-ctx ctx/new-css-system)
on-click (mf/use-fn #(st/emit! (dd/create-project)))]
(if new-css-system
[:header {:class (stl/css :dashboard-header)}
[:div#dashboard-projects-title {:class (stl/css :dashboard-title)}
[:h1 (tr "dashboard.projects-title")]]
[:button
{:class (stl/css :btn-secondary :btn-small)
:on-click on-click
:data-test "new-project-button"}
(tr "dashboard.new-project")]]
;; OLD
[:header.dashboard-header
[:div.dashboard-title#dashboard-projects-title
[:h1 (tr "dashboard.projects-title")]]
[:button.btn-secondary.btn-small
{:on-click on-click
:data-test "new-project-button"}
(tr "dashboard.new-project")]])))
(mf/defc team-hero
{::mf/wrap [mf/memo]}
[{:keys [team close-fn] :as props}]
(let [on-nav-members-click (mf/use-fn #(st/emit! (dd/go-to-team-members)))
(let [new-css-system (mf/use-ctx ctx/new-css-system)
on-nav-members-click (mf/use-fn #(st/emit! (dd/go-to-team-members)))
on-invite-click
(mf/use-fn
@ -62,28 +77,49 @@
(dom/prevent-default event)
(close-fn)))]
[:div.team-hero
[:img {:src "images/deco-team-banner.png" :border "0"
:role "presentation"}]
[:div.text
[:div.title (tr "dasboard.team-hero.title")]
[:div.info
[:span (tr "dasboard.team-hero.text")]
[:a {:on-click on-nav-members-click} (tr "dasboard.team-hero.management")]]]
[:button.btn-primary.invite
{:on-click on-invite-click}
(tr "onboarding.choice.team-up.invite-members")]
[:button.close
{:on-click on-close-click
:aria-label (tr "labels.close")}
[:span i/close]]]))
(if new-css-system
[:div {:class (stl/css :team-hero)}
[:img {:src "images/deco-team-banner.png" :border "0"
:role "presentation"}]
[:div {:class (stl/css :text)}
[:div {:class (stl/css :title)} (tr "dasboard.team-hero.title")]
[:div {:class (stl/css :info)}
[:span (tr "dasboard.team-hero.text")]
[:a {:on-click on-nav-members-click} (tr "dasboard.team-hero.management")]]]
[:button
{:class (stl/css :btn-primary :invite)
:on-click on-invite-click}
(tr "onboarding.choice.team-up.invite-members")]
[:button
{:class (stl/css :close)
:on-click on-close-click
:aria-label (tr "labels.close")}
[:span i/close]]]
;; OLD
[:div.team-hero
[:img {:src "images/deco-team-banner.png" :border "0"
:role "presentation"}]
[:div.text
[:div.title (tr "dasboard.team-hero.title")]
[:div.info
[:span (tr "dasboard.team-hero.text")]
[:a {:on-click on-nav-members-click} (tr "dasboard.team-hero.management")]]]
[:button.btn-primary.invite
{:on-click on-invite-click}
(tr "onboarding.choice.team-up.invite-members")]
[:button.close
{:on-click on-close-click
:aria-label (tr "labels.close")}
[:span i/close]]])))
(def builtin-templates
(l/derived :builtin-templates st/state))
(mf/defc tutorial-project
[{:keys [close-tutorial default-project-id] :as props}]
(let [state (mf/use-state {:status :waiting
(let [new-css-system (mf/use-ctx ctx/new-css-system)
state (mf/use-state {:status :waiting
:file nil})
templates (mf/deref builtin-templates)
@ -113,48 +149,88 @@
(swap! state #(assoc % :status :importing))
(st/emit! (with-meta (dd/clone-template (with-meta params mdata))
{::ev/origin "get-started-hero-block"})))))]
[:article.tutorial
[:div.thumbnail]
[:div.text
[:h2.title (tr "dasboard.tutorial-hero.title")]
[:p.info (tr "dasboard.tutorial-hero.info")]
[:button.btn-primary.action {:on-click download-tutorial}
(case (:status @state)
:waiting (tr "dasboard.tutorial-hero.start")
:importing [:span.loader i/loader-pencil]
:success "")]]
(if new-css-system
[:article {:class (stl/css :tutorial)}
[:div {:class (stl/css :thumbnail)}]
[:div {:class (stl/css :text)}
[:h2 {:class (stl/css :title)} (tr "dasboard.tutorial-hero.title")]
[:p {:clas (stl/css :info)} (tr "dasboard.tutorial-hero.info")]
[:button {:class (stl/css :btn-primary :action)
:on-click download-tutorial}
(case (:status @state)
:waiting (tr "dasboard.tutorial-hero.start")
:importing [:span.loader i/loader-pencil]
:success "")]]
[:button.close
{:on-click close-tutorial
:aria-label (tr "labels.close")}
[:span.icon i/close]]]))
[:button
{:class (stl/css :close)
:on-click close-tutorial
:aria-label (tr "labels.close")}
[:span {:class (stl/css :icon)} i/close]]]
;; OLD
[:article.tutorial
[:div.thumbnail]
[:div.text
[:h2.title (tr "dasboard.tutorial-hero.title")]
[:p.info (tr "dasboard.tutorial-hero.info")]
[:button.btn-primary.action {:on-click download-tutorial}
(case (:status @state)
:waiting (tr "dasboard.tutorial-hero.start")
:importing [:span.loader i/loader-pencil]
:success "")]]
[:button.close
{:on-click close-tutorial
:aria-label (tr "labels.close")}
[:span.icon i/close]]])))
(mf/defc interface-walkthrough
{::mf/wrap [mf/memo]}
[{:keys [close-walkthrough] :as props}]
(let [handle-walkthrough-link
(let [new-css-system (mf/use-ctx ctx/new-css-system)
handle-walkthrough-link
(fn []
(st/emit! (ptk/event ::ev/event {::ev/name "show-walkthrough"
::ev/origin "get-started-hero-block"
:section "dashboard"})))]
[:article.walkthrough
[:div.thumbnail]
[:div.text
[:h2.title (tr "dasboard.walkthrough-hero.title")]
[:p.info (tr "dasboard.walkthrough-hero.info")]
[:a.btn-primary.action
{:href " https://design.penpot.app/walkthrough"
:target "_blank"
:on-click handle-walkthrough-link}
(tr "dasboard.walkthrough-hero.start")]]
[:button.close
{:on-click close-walkthrough
:aria-label (tr "labels.close")}
[:span.icon i/close]]]))
(if new-css-system
[:article {:class (stl/css :walkthrough)}
[:div {:class (stl/css :thumbnail)}]
[:div {:class (stl/css :text)}
[:h2 {:class (stl/css :title)} (tr "dasboard.walkthrough-hero.title")]
[:p {:class (stl/css :info)} (tr "dasboard.walkthrough-hero.info")]
[:a {:class (stl/css :btn-primary :action)
:href " https://design.penpot.app/walkthrough"
:target "_blank"
:on-click handle-walkthrough-link}
(tr "dasboard.walkthrough-hero.start")]]
[:button
{:class (stl/css :close)
:on-click close-walkthrough
:aria-label (tr "labels.close")}
[:span {:class (stl/css :icon)} i/close]]]
;; OLD
[:article.walkthrough
[:div.thumbnail]
[:div.text
[:h2.title (tr "dasboard.walkthrough-hero.title")]
[:p.info (tr "dasboard.walkthrough-hero.info")]
[:a.btn-primary.action
{:href " https://design.penpot.app/walkthrough"
:target "_blank"
:on-click handle-walkthrough-link}
(tr "dasboard.walkthrough-hero.start")]]
[:button.close
{:on-click close-walkthrough
:aria-label (tr "labels.close")}
[:span.icon i/close]]])))
(mf/defc project-item
[{:keys [project first? team files] :as props}]
(let [locale (mf/deref i18n/locale)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
locale (mf/deref i18n/locale)
file-count (or (:count project) 0)
project-id (:id project)
team-id (:id team)
@ -247,84 +323,172 @@
(dd/fetch-projects (:id team))
(dd/clear-selected-files))))]
[:article.dashboard-project-row
{:class (when first? "first")}
[:header.project {:ref rowref}
[:div.project-name-wrapper
(if (:edition? @local)
[:& inline-edition {:content (:name project)
:on-end on-edit}]
[:h2 {:on-click on-nav
:on-context-menu on-menu-click}
(if (:is-default project)
(tr "labels.drafts")
(:name project))])
(if new-css-system
[:article {:class (stl/css-case :dashboard-project-row true :first first?)}
[:header {:class (stl/css :project) :ref rowref}
[:div {:class (stl/css :project-name-wrapper)}
(if (:edition? @local)
[:& inline-edition {:content (:name project)
:on-end on-edit}]
[:h2 {:on-click on-nav
:on-context-menu on-menu-click}
(if (:is-default project)
(tr "labels.drafts")
(:name project))])
[:& project-menu
[:& project-menu
{:project project
:show? (:menu-open @local)
:left (+ 24 (:x (:menu-pos @local)))
:top (:y (:menu-pos @local))
:on-edit on-edit-open
:on-menu-close on-menu-close
:on-import on-import}]
[:span {:class (stl/css :info)} (str (tr "labels.num-of-files" (i18n/c file-count)))]
(let [time (-> (:modified-at project)
(dt/timeago {:locale locale}))]
[:span {:class (stl/css :recent-files-row-title-info)} (str ", " time)])
[:div {:class (stl/css :project-actions)}
(when-not (:is-default project)
[:button
{:class (stl/css-case :pin-icon true
:tooltip true
:tooltip-bottom true
:active (:is-pinned project))
:on-click toggle-pin
:alt (tr "dashboard.pin-unpin")
:aria-label (tr "dashboard.pin-unpin")
:tab-index "0"}
(if (:is-pinned project)
i/pin-fill
i/pin)])
[:button
{:class (stl/css :btn-secondary :btn-small :tooltip :tooltip-bottom)
:on-click on-create-click
:alt (tr "dashboard.new-file")
:aria-label (tr "dashboard.new-file")
:data-test "project-new-file"
:tab-index "0"
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-create-click event)))}
i/close]
[:button
{:class (stl/css :btn-secondary :btn-small :tooltip :tooltip-bottom)
:on-click on-menu-click
:alt (tr "dashboard.options")
:aria-label (tr "dashboard.options")
:data-test "project-options"
:tab-index "0"
:on-key-down (fn [event]
(when (kbd/enter? event)
(dom/stop-propagation event)
(on-menu-click event)))}
i/actions]]]]
[:& line-grid
{:project project
:show? (:menu-open @local)
:left (+ 24 (:x (:menu-pos @local)))
:top (:y (:menu-pos @local))
:on-edit on-edit-open
:on-menu-close on-menu-close
:on-import on-import}]
:team team
:files files
:create-fn create-file
:limit limit}]
[:span.info (str (tr "labels.num-of-files" (i18n/c file-count)))]
(let [time (-> (:modified-at project)
(dt/timeago {:locale locale}))]
[:span.recent-files-row-title-info (str ", " time)])
[:div.project-actions
(when-not (:is-default project)
[:button.pin-icon.tooltip.tooltip-bottom
{:class (when (:is-pinned project) "active")
:on-click toggle-pin
:alt (tr "dashboard.pin-unpin")
:aria-label (tr "dashboard.pin-unpin")
:tab-index "0"}
(if (:is-pinned project)
i/pin-fill
i/pin)])
(when (and (> limit 0)
(> file-count limit))
[:button
{:class (stl/css :show-more)
:on-click on-nav
:tab-index "0"
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-nav)))}
[:div {:class (stl/css :placeholder-label)} (tr "dashboard.show-all-files")]
[:div {:class (stl/css :placeholder-icon)} i/arrow-down]])]
[:button.btn-secondary.btn-small.tooltip.tooltip-bottom
{:on-click on-create-click
:alt (tr "dashboard.new-file")
:aria-label (tr "dashboard.new-file")
:data-test "project-new-file"
:tab-index "0"
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-create-click event)))}
i/close]
;; OLD
[:article.dashboard-project-row
{:class (when first? "first")}
[:header.project {:ref rowref}
[:div.project-name-wrapper
(if (:edition? @local)
[:& inline-edition {:content (:name project)
:on-end on-edit}]
[:h2 {:on-click on-nav
:on-context-menu on-menu-click}
(if (:is-default project)
(tr "labels.drafts")
(:name project))])
[:button.btn-secondary.btn-small.tooltip.tooltip-bottom
{:on-click on-menu-click
:alt (tr "dashboard.options")
:aria-label (tr "dashboard.options")
:data-test "project-options"
:tab-index "0"
:on-key-down (fn [event]
(when (kbd/enter? event)
(dom/stop-propagation event)
(on-menu-click event)))}
i/actions]]]]
[:& project-menu
{:project project
:show? (:menu-open @local)
:left (+ 24 (:x (:menu-pos @local)))
:top (:y (:menu-pos @local))
:on-edit on-edit-open
:on-menu-close on-menu-close
:on-import on-import}]
[:& line-grid
{:project project
:team team
:files files
:create-fn create-file
:limit limit}]
[:span.info (str (tr "labels.num-of-files" (i18n/c file-count)))]
(let [time (-> (:modified-at project)
(dt/timeago {:locale locale}))]
[:span.recent-files-row-title-info (str ", " time)])
[:div.project-actions
(when-not (:is-default project)
[:button.pin-icon.tooltip.tooltip-bottom
{:class (when (:is-pinned project) "active")
:on-click toggle-pin
:alt (tr "dashboard.pin-unpin")
:aria-label (tr "dashboard.pin-unpin")
:tab-index "0"}
(if (:is-pinned project)
i/pin-fill
i/pin)])
(when (and (> limit 0)
(> file-count limit))
[:button.show-more {:on-click on-nav
:tab-index "0"
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-nav)))}
[:div.placeholder-label
(tr "dashboard.show-all-files")]
[:div.placeholder-icon i/arrow-down]])]))
[:button.btn-secondary.btn-small.tooltip.tooltip-bottom
{:on-click on-create-click
:alt (tr "dashboard.new-file")
:aria-label (tr "dashboard.new-file")
:data-test "project-new-file"
:tab-index "0"
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-create-click event)))}
i/close]
[:button.btn-secondary.btn-small.tooltip.tooltip-bottom
{:on-click on-menu-click
:alt (tr "dashboard.options")
:aria-label (tr "dashboard.options")
:data-test "project-options"
:tab-index "0"
:on-key-down (fn [event]
(when (kbd/enter? event)
(dom/stop-propagation event)
(on-menu-click event)))}
i/actions]]]]
[:& line-grid
{:project project
:team team
:files files
:create-fn create-file
:limit limit}]
(when (and (> limit 0)
(> file-count limit))
[:button.show-more {:on-click on-nav
:tab-index "0"
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-nav)))}
[:div.placeholder-label
(tr "dashboard.show-all-files")]
[:div.placeholder-icon i/arrow-down]])])))
(def recent-files-ref
@ -332,7 +496,8 @@
(mf/defc projects-section
[{:keys [team projects profile default-project-id] :as props}]
(let [projects (->> (vals projects)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
projects (->> (vals projects)
(sort-by :modified-at)
(reverse))
recent-map (mf/deref recent-files-ref)
@ -382,35 +547,68 @@
(st/emit! (dd/fetch-recent-files team-id)
(dd/clear-selected-files)))
(when (seq projects)
[:*
[:& header]
(if new-css-system
(when (seq projects)
[:*
[:& header]
(when team-hero?
[:& team-hero {:team team :close-fn close-banner}])
(when team-hero?
[:& team-hero {:team team :close-fn close-banner}])
(when (and (contains? cf/flags :dashboard-templates-section)
(or (not tutorial-viewed?)
(not walkthrough-viewed?)))
[:div.hero-projects
(when (and (not tutorial-viewed?) (:is-default team))
[:& tutorial-project
{:close-tutorial close-tutorial
:default-project-id default-project-id}])
(when (and (contains? cf/flags :dashboard-templates-section)
(or (not tutorial-viewed?)
(not walkthrough-viewed?)))
[:div {:class (stl/css :hero-projects)}
(when (and (not tutorial-viewed?) (:is-default team))
[:& tutorial-project
{:close-tutorial close-tutorial
:default-project-id default-project-id}])
(when (and (not walkthrough-viewed?) (:is-default team))
[:& interface-walkthrough
{:close-walkthrough close-walkthrough}])])
(when (and (not walkthrough-viewed?) (:is-default team))
[:& interface-walkthrough
{:close-walkthrough close-walkthrough}])])
[:div.dashboard-container.no-bg.dashboard-projects
(for [{:keys [id] :as project} projects]
(let [files (when recent-map
(->> (vals recent-map)
(filterv #(= id (:project-id %)))
(sort-by :modified-at #(compare %2 %1))))]
[:& project-item {:project project
:team team
:files files
:first? (= project (first projects))
:key id}]))]])))
[:div {:class (stl/css :dashboard-container :no-bg :dashboard-projects)}
(for [{:keys [id] :as project} projects]
(let [files (when recent-map
(->> (vals recent-map)
(filterv #(= id (:project-id %)))
(sort-by :modified-at #(compare %2 %1))))]
[:& project-item {:project project
:team team
:files files
:first? (= project (first projects))
:key id}]))]])
;; OLD
(when (seq projects)
[:*
[:& header]
(when team-hero?
[:& team-hero {:team team :close-fn close-banner}])
(when (and (contains? cf/flags :dashboard-templates-section)
(or (not tutorial-viewed?)
(not walkthrough-viewed?)))
[:div.hero-projects
(when (and (not tutorial-viewed?) (:is-default team))
[:& tutorial-project
{:close-tutorial close-tutorial
:default-project-id default-project-id}])
(when (and (not walkthrough-viewed?) (:is-default team))
[:& interface-walkthrough
{:close-walkthrough close-walkthrough}])])
[:div.dashboard-container.no-bg.dashboard-projects
(for [{:keys [id] :as project} projects]
(let [files (when recent-map
(->> (vals recent-map)
(filterv #(= id (:project-id %)))
(sort-by :modified-at #(compare %2 %1))))]
[:& project-item {:project project
:team team
:files files
:first? (= project (first projects))
:key id}]))]]))))

909
frontend/src/app/main/ui/dashboard/projects.scss Normal file
View file

@ -0,0 +1,909 @@
@import "common/dependencies/colors";
$br3: 3px;
$br8: 8px;
$br6: 6px;
$fs14: 0.875rem;
$fs18: 1.125rem;
$fs22: 1.375rem;
$fs24: 1.5rem;
$fw400: 400;
$fw600: 600;
$fw700: 700;
$lh-088: 0.88;
$lh-115: 1.15; // original $title-lh-sm
$size-1: 0.25rem;
$size-2: 0.5rem;
$size-4: 1rem;
$size-5: 1.5rem;
$size-6: 2rem;
.dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: $color-white;
height: 63px;
padding: $size-1 $size-4 $size-1 $size-2;
position: relative;
z-index: 10;
user-select: none;
&.team {
display: grid;
grid-template-columns: 20% 1fr 20%;
}
.element-name {
margin-right: $size-2;
}
.btn-secondary {
flex-shrink: 0;
z-index: 10;
height: 32px;
svg {
height: 16px;
width: 16px;
}
}
svg {
fill: $color-black;
height: 14px;
margin-right: $size-1;
width: 14px;
}
nav {
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 1;
ul {
display: flex;
font-size: $fs14;
justify-content: center;
margin: 0;
}
li {
a {
display: flex;
align-items: center;
flex-basis: 140px;
border-bottom: 3px solid transparent;
color: $color-gray-30;
height: 40px;
padding: $size-1 $size-5;
font-weight: $fw400;
&:hover {
color: $color-black;
text-decoration: none;
}
}
&.active {
a {
color: $color-black;
border-color: $color-primary;
}
}
}
}
.dashboard-title {
display: flex;
align-items: center;
margin-left: 13px;
h1 {
color: $color-black;
display: flex;
flex-shrink: 0;
font-size: $fs22;
font-weight: $fw600;
z-index: 10;
user-select: all;
}
.context-menu.is-open {
margin-top: 10px;
}
}
.icon {
display: flex;
align-items: center;
cursor: pointer;
margin-left: $size-2;
z-index: 10;
svg {
fill: $color-gray-40;
width: 15px;
height: 15px;
&:hover {
fill: $color-primary-dark;
}
}
}
.dashboard-buttons {
display: flex;
justify-content: flex-end;
align-items: center;
}
.dashboard-header-actions {
display: flex;
}
.pin-icon {
margin: 0 $size-2 0 $size-5;
background-color: transparent;
border: none;
svg {
fill: $color-gray-20;
}
&.active {
svg {
fill: $color-gray-50;
}
}
}
}
.dashboard-header {
background-color: transparent;
.dashboard-title {
h1 {
color: $df-primary;
font-size: 24px;
font-weight: 400;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
max-width: 700px;
}
}
.icon {
svg {
fill: $df-secondary;
}
}
// Settings sub-menu
.dashboard-header-options {
li {
a {
font-size: 16px;
color: $df-secondary;
border-color: transparent;
&:hover {
color: $df-primary;
}
}
&.active {
a {
color: $df-primary;
}
}
}
}
}
.dashboard-container {
background-color: $color-dashboard;
flex: 1 0 0;
margin-right: $size-4;
overflow-y: auto;
width: 100%;
&.dashboard-projects {
user-select: none;
}
&.no-bg {
background-color: transparent;
}
&.dashboard-shared {
width: calc(100vw - 320px);
margin-right: 50px;
}
&.search {
margin-top: 10px;
}
}
.dashboard-container {
background-color: transparent;
border-top: 1px solid $db-cuaternary;
.dashboard-settings {
a {
color: $df-secondary;
}
.form-container {
width: 800px;
margin: 80px auto auto 120px;
form {
width: 468px;
.fields-row {
.custom-input,
.custom-select {
flex-direction: column-reverse;
label {
position: relative;
text-transform: uppercase;
color: $df-primary;
font-size: 11px;
margin-bottom: 12px;
margin-left: -4px;
}
input,
select {
background-color: $db-tertiary;
border-radius: 8px;
border-color: transparent;
color: $df-primary;
padding: 0 15px;
&:focus {
outline: 1px solid $da-primary;
}
::placeholder {
color: $df-secondary;
}
}
.help-icon {
bottom: 12px;
top: auto;
svg {
fill: $df-secondary;
}
}
&.disabled {
input {
background-color: $db-primary;
border-color: $db-cuaternary;
color: $df-secondary;
}
}
.input-container {
background-color: $db-tertiary;
border-radius: 8px;
border-color: transparent;
margin-top: 22px;
.main-content {
label {
position: absolute;
top: -24px;
}
span {
color: $df-primary;
}
}
&:focus {
border: 1px solid $da-primary;
}
}
textarea {
border-radius: 8px;
padding: 12px 14px;
background-color: $db-tertiary;
color: $df-primary;
border: none;
&:focus {
outline: 1px solid $da-primary;
}
}
}
}
.field-title {
color: $df-primary;
}
.field-title:not(:first-child) {
margin-top: 64px;
}
.field-text {
color: $df-secondary;
}
button,
.btn-secondary {
width: 100%;
font-size: 11px;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
&:hover {
color: $da-primary;
background-color: $db-cuaternary;
}
}
hr {
display: none;
}
}
.links {
margin-top: 12px;
}
}
}
//Access tokens
.dashboard-access-tokens {
width: 800px;
margin-left: 120px;
margin-top: 80px;
.access-tokens-hero-container {
background-color: transparent;
.access-tokens-hero {
width: 468px;
flex-direction: column;
gap: 32px;
background-color: transparent;
margin: 0;
padding: 0;
.desc {
background-color: transparent;
width: 100%;
h2 {
color: $df-primary;
font-size: 24px;
font-weight: regular;
margin-bottom: 32px;
}
p {
color: $df-secondary;
margin-bottom: 0;
font-size: 14px;
}
}
button {
width: 100%;
font-size: 11px;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
&:hover {
color: $da-primary;
background-color: $db-cuaternary;
}
}
}
}
.dashboard-table {
width: 800px;
.table-rows {
padding-top: 0;
.table-row {
font-size: 14px;
min-height: 40px;
height: fit-content;
.name {
color: $df-primary;
max-width: 480px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.expiration-date {
color: $df-secondary;
}
}
}
}
.access-tokens-empty {
width: 468px;
border: 1px solid $db-cuaternary;
border-radius: 8px;
margin-top: 32px;
font-size: 14px;
background-color: transparent;
color: $df-secondary;
}
}
// Team webhooks
&.dashboard-team-webhooks {
width: 800px;
margin-left: 120px;
margin-top: 80px;
border: none;
align-items: flex-start;
.webhooks-hero-container {
width: 468px;
background-color: transparent;
.webhooks-hero {
width: 468px;
flex-direction: column;
gap: 32px;
background-color: transparent;
margin: 0;
padding: 0;
.desc {
background-color: transparent;
width: 100%;
h2 {
color: $df-primary;
font-size: 24px;
font-weight: regular;
margin-bottom: 32px;
}
p {
color: $df-secondary;
margin-bottom: 0;
font-size: 14px;
}
}
.btn-primary {
width: 100%;
font-size: 11px;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
&:hover {
color: $da-primary;
background-color: $db-cuaternary;
}
}
}
}
.dashboard-table {
width: 800px;
.table-rows {
padding-top: 0;
.table-row {
font-size: 14px;
min-height: 40px;
height: fit-content;
.name {
color: $df-primary;
max-width: 480px;
}
.expiration-date {
color: $df-secondary;
}
}
}
}
.webhooks-empty {
width: 468px;
border: 1px solid $db-cuaternary;
border-radius: 8px;
margin-top: 32px;
font-size: 14px;
background-color: transparent;
color: $df-secondary;
}
}
// Members section
.dashboard-table {
.table-header {
background-color: transparent;
color: $df-secondary;
font-size: 12px;
text-transform: uppercase;
}
.table-rows {
.table-row {
background-color: $db-tertiary;
border-radius: 8px;
color: $df-primary;
.rol-selector {
background-color: $db-cuaternary;
border-color: transparent;
border-radius: 8px;
}
}
}
.member-info {
.member-name .you,
.member-email {
color: $df-secondary;
}
}
.status-badge {
border-radius: 8px;
color: $db-primary;
text-transform: uppercase;
}
.empty-invitations {
border: 1px solid $db-cuaternary;
border-radius: 8px;
color: $df-secondary;
}
}
.actions-dropdown,
.options-dropdown {
background-color: $db-tertiary;
border: 1px solid $db-cuaternary;
border-radius: 8px;
min-width: 252px;
.separator {
border-color: transparent;
margin-top: 10px;
}
li {
border-radius: 8px;
height: 40px;
margin: 5px;
color: $df-primary;
&:hover {
background-color: $db-cuaternary;
}
}
&.options-dropdown {
li {
color: $df-primary;
&.warning {
color: $color-danger;
}
}
}
}
}
.dashboard-project-row {
margin-bottom: $size-5;
position: relative;
.project {
align-items: center;
background: $color-white;
border-radius: $br3;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: $size-4;
padding: $size-2 $size-2 $size-2 $size-4;
width: 99%;
max-height: 40px;
gap: $size-2;
.project-name-wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 32px;
margin-left: $size-2;
}
.show-more {
align-items: center;
color: $color-gray-30;
display: flex;
font-size: $fs14;
justify-content: space-between;
cursor: pointer;
background-color: transparent;
border: none;
.placeholder-icon {
transform: rotate(-90deg);
margin-left: 10px;
svg {
height: 14px;
width: 14px;
fill: $color-gray-30;
}
}
&:hover {
color: $color-primary-dark;
svg {
fill: $color-primary-dark;
}
}
}
.btn-secondary {
border: none;
padding: $size-2;
}
h2 {
cursor: pointer;
font-size: $fs18;
line-height: $lh-088; // Original value was 1rem = 16px; 16px/18px = 88.88888% => $lh-088
font-weight: $fw600;
color: $color-black;
margin-right: $size-1;
}
.edit-wrapper {
margin-right: $size-4;
}
.info {
font-size: $fs14;
line-height: $lh-115; // Original value was 1rem = 16px; 16px/14px = 114.285714286% => $lh-115 (rounded)
font-weight: $fw400;
color: $color-gray-60;
margin-left: 0.75rem;
@media (max-width: 760px) {
display: none;
}
}
.project-actions {
display: flex;
opacity: 1;
margin-left: $size-6;
.btn-small {
height: 32px;
margin: 0 $size-2;
width: 32px;
svg {
height: 16px;
width: 16px;
}
}
}
.pin-icon {
cursor: pointer;
display: flex;
align-items: center;
margin-right: 14px;
background-color: transparent;
border: none;
svg {
width: 15px;
height: 15px;
fill: $color-gray-20;
}
&.active {
svg {
fill: $color-gray-50;
}
}
}
}
&:hover,
&:focus,
&:focus-within {
.project-actions {
opacity: 1;
}
}
.show-more {
align-items: center;
color: $color-gray-30;
display: flex;
font-size: $fs14;
justify-content: space-between;
cursor: pointer;
background-color: transparent;
border: none;
position: absolute;
top: 9px;
right: 53px;
.placeholder-icon {
transform: rotate(-90deg);
margin-left: 10px;
svg {
height: 14px;
width: 14px;
fill: $color-gray-30;
}
}
&:hover {
color: $color-primary-dark;
svg {
fill: $color-primary-dark;
}
}
}
}
.dashboard-project-row .project {
background-color: transparent;
h2 {
color: $df-primary;
font-weight: 400;
}
span,
.info {
color: $df-secondary;
}
.project-actions {
svg {
fill: $df-primary;
}
.pin-icon svg {
fill: $df-secondary;
}
}
}
.team-hero {
display: flex;
position: relative;
border: 2px solid $color-gray-10;
border-radius: $br8;
padding: 20px;
margin: 0 1rem 0 21px;
height: 154px;
.text {
flex-grow: 1;
padding-left: 20px;
.title {
font-size: $fs24;
font-weight: $fw700;
color: $color-black;
}
.info {
span {
color: $color-gray-30;
display: block;
}
padding-top: 10px;
}
}
.close {
position: absolute;
top: 20px;
right: 20px;
background-color: transparent;
border: none;
cursor: pointer;
svg {
transform: rotate(45deg);
width: 16px;
height: 16px;
}
}
.invite {
align-self: flex-end;
height: 40px;
font-family: "worksans", sans-serif;
width: 180px;
}
img {
width: 274px;
margin-bottom: -19px;
@media (max-width: 1200px) {
display: none;
width: 0;
}
}
}
.hero-projects {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 30px;
margin: 0 1rem 1rem 1.2rem;
.tutorial,
.walkthrough {
display: grid;
grid-template-columns: 1fr 1fr;
position: relative;
border: 2px solid $color-gray-10;
border-radius: $br8;
min-height: 211px;
.thumbnail {
border-top-left-radius: $br6;
border-bottom-left-radius: $br6;
padding: 30px;
display: block;
background-color: #e0e4e9;
}
.text {
padding: 30px;
.title {
color: $color-black;
font-size: $fs24;
font-weight: $fw700;
margin-bottom: 8px;
}
.info {
color: $color-gray-50;
margin-bottom: 20px;
font-size: $fs14;
}
}
.action {
font-family: "worksans", sans-serif;
width: 180px;
height: 40px;
}
.close {
position: absolute;
top: 0;
right: 0;
width: $size-5;
cursor: pointer;
display: flex;
margin: 20px;
justify-content: center;
align-items: center;
background-color: transparent;
border: none;
.icon {
svg {
fill: $color-gray-30;
height: 16px;
width: 16px;
transform: rotate(45deg);
&:hover {
fill: $color-primary;
}
}
}
}
@media (max-width: 1846px) {
grid-template-columns: 190px 1fr;
}
@media (max-width: 1526px) {
grid-template-columns: 1fr;
.img {
display: none;
width: 0;
}
}
}
.walkthrough {
.thumbnail {
background-image: url("/images/walkthrough-cover.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}
.tutorial {
.thumbnail {
background-image: url("/images/hands-on-tutorial.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.loader {
display: flex;
svg#loader-pencil {
width: 31px;
}
}
}
}
.btn-secondary {
background-color: $db-tertiary;
text-transform: uppercase;
border: none;
color: $df-primary;
border-radius: 8px;
font-size: 0.75rem;
padding: 0 1rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: $db-cuaternary;
color: $da-primary;
svg {
fill: $da-primary;
}
}
}

117
frontend/src/app/main/ui/dashboard/search.cljs
View file

@ -5,10 +5,12 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.dashboard.search
(:require-macros [app.main.style :as stl])
(:require
[app.main.data.dashboard :as dd]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.dashboard.grid :refer [grid]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
@ -18,48 +20,83 @@
(mf/defc search-page
[{:keys [team search-term] :as props}]
(mf/use-effect
(mf/deps team)
(fn []
(when team
(let [tname (if (:is-default team)
(tr "dashboard.your-penpot")
(:name team))]
(dom/set-html-title (tr "title.dashboard.search" tname))))))
(mf/use-effect
(mf/deps search-term)
(fn []
(st/emit! (dd/search {:search-term search-term})
(dd/clear-selected-files))))
(let [result (mf/deref refs/dashboard-search-result)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
result (mf/deref refs/dashboard-search-result)
[rowref limit] (hooks/use-dynamic-grid-item-width)]
[:*
[:header.dashboard-header
[:div.dashboard-title#dashboard-search-title
[:h1 (tr "dashboard.title-search")]]]
[:section.dashboard-container.search.no-bg {:ref rowref}
(cond
(empty? search-term)
[:div.grid-empty-placeholder.search
[:div.icon i/search]
[:div.text (tr "dashboard.type-something")]]
(mf/use-effect
(mf/deps team)
(fn []
(when team
(let [tname (if (:is-default team)
(tr "dashboard.your-penpot")
(:name team))]
(dom/set-html-title (tr "title.dashboard.search" tname))))))
(mf/use-effect
(mf/deps search-term)
(fn []
(st/emit! (dd/search {:search-term search-term})
(dd/clear-selected-files))))
(if new-css-system
[:*
[:header {:class (stl/css :dashboard-header)}
[:div#dashboard-search-title {:class (stl/css :dashboard-title)}
[:h1 (tr "dashboard.title-search")]]]
[:section {:class (stl/css :dashboard-container :search :no-bg)
:ref rowref}
(cond
(empty? search-term)
[:div {:class (stl/css :grid-empty-placeholder :search)}
[:div {:class (stl/css :icon)} i/search]
[:div {:class (stl/css :text)} (tr "dashboard.type-something")]]
(nil? result)
[:div {:class (stl/css :grid-empty-placeholder :search)}
[:div {:class (stl/css :icon)} i/search]
[:div {:class (stl/css :text)} (tr "dashboard.searching-for" search-term)]]
(empty? result)
[:div {:class (stl/css :grid-empty-placeholder :search)}
[:div {:class (stl/css :icon)} i/search]
[:div {:class (stl/css :text)} (tr "dashboard.no-matches-for" search-term)]]
:else
[:& grid {:files result
:hide-new? true
:origin :search
:limit limit}])]]
;; OLD
[:*
[:header.dashboard-header
[:div.dashboard-title#dashboard-search-title
[:h1 (tr "dashboard.title-search")]]]
[:section.dashboard-container.search.no-bg {:ref rowref}
(cond
(empty? search-term)
[:div.grid-empty-placeholder.search
[:div.icon i/search]
[:div.text (tr "dashboard.type-something")]]
(nil? result)
[:div.grid-empty-placeholder.search
[:div.icon i/search]
[:div.text (tr "dashboard.searching-for" search-term)]]
(empty? result)
[:div.grid-empty-placeholder.search
[:div.icon i/search]
[:div.text (tr "dashboard.no-matches-for" search-term)]]
:else
[:& grid {:files result
:hide-new? true
:origin :search
:limit limit}])]])))
(nil? result)
[:div.grid-empty-placeholder.search
[:div.icon i/search]
[:div.text (tr "dashboard.searching-for" search-term)]]
(empty? result)
[:div.grid-empty-placeholder.search
[:div.icon i/search]
[:div.text (tr "dashboard.no-matches-for" search-term)]]
:else
[:& grid {:files result
:hide-new? true
:origin :search
:limit limit}])]]))

325
frontend/src/app/main/ui/dashboard/search.scss Normal file
View file

@ -0,0 +1,325 @@
@import "common/dependencies/colors";
$br0: 0;
$br3: 3px;
$br8: 8px;
$br6: 6px;
$br12: 12px;
$fs14: 0.875rem;
$fs16: 1rem;
$fs18: 1.125rem;
$fs22: 1.375rem;
$fs24: 1.5rem;
$fw400: 400;
$fw600: 600;
$fw700: 700;
$lh-088: 0.88;
$lh-115: 1.15; // original $title-lh-sm
$size-1: 0.25rem;
$size-2: 0.5rem;
$size-4: 1rem;
$size-5: 1.5rem;
$size-6: 2rem;
.dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: $color-white;
height: 63px;
padding: $size-1 $size-4 $size-1 $size-2;
position: relative;
z-index: 10;
user-select: none;
&.team {
display: grid;
grid-template-columns: 20% 1fr 20%;
}
.element-name {
margin-right: $size-2;
}
.btn-secondary {
flex-shrink: 0;
z-index: 10;
height: 32px;
}
svg {
fill: $color-black;
height: 14px;
margin-right: $size-1;
width: 14px;
}
nav {
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 1;
ul {
display: flex;
font-size: $fs14;
justify-content: center;
margin: 0;
}
li {
a {
display: flex;
align-items: center;
flex-basis: 140px;
border-bottom: 3px solid transparent;
color: $color-gray-30;
height: 40px;
padding: $size-1 $size-5;
font-weight: $fw400;
&:hover {
color: $color-black;
text-decoration: none;
}
}
&.active {
a {
color: $color-black;
border-color: $color-primary;
}
}
}
}
.dashboard-title {
display: flex;
align-items: center;
margin-left: 13px;
h1 {
color: $color-black;
display: flex;
flex-shrink: 0;
font-size: $fs22;
font-weight: $fw600;
z-index: 10;
user-select: all;
}
.context-menu.is-open {
margin-top: 10px;
}
}
.icon {
display: flex;
align-items: center;
cursor: pointer;
margin-left: $size-2;
z-index: 10;
svg {
fill: $color-gray-40;
width: 15px;
height: 15px;
&:hover {
fill: $color-primary-dark;
}
}
}
.dashboard-buttons {
display: flex;
justify-content: flex-end;
align-items: center;
}
.dashboard-header-actions {
display: flex;
}
.pin-icon {
margin: 0 $size-2 0 $size-5;
background-color: transparent;
border: none;
svg {
fill: $color-gray-20;
}
&.active {
svg {
fill: $color-gray-50;
}
}
}
}
.grid-empty-placeholder {
border-radius: $br12;
display: grid;
background-color: rgba(227, 227, 227, 0.3);
padding: 13px;
margin-right: 13px;
height: 230px;
&.loader {
justify-items: center;
}
.icon {
display: flex;
align-items: center;
justify-content: center;
}
&.libs {
background-image: url(/images/ph-left.svg), url(/images/ph-right.svg);
background-position:
15% bottom,
85% top;
background-repeat: no-repeat;
align-items: center;
border: 1px dashed #b1b2b5;
border-radius: $br3;
display: flex;
flex-direction: column;
height: 200px;
margin: 1rem;
padding: 3rem;
justify-content: center;
.text {
p {
max-width: 360px;
text-align: center;
font-size: $fs16;
}
}
}
.create-new {
background-color: white;
border: 2px solid $color-gray-10;
border-radius: $br3;
color: $color-black;
cursor: pointer;
height: 158px;
font-family: "worksans", sans-serif;
margin: 0.5rem;
&:hover {
border: 2px solid $color-primary;
}
}
&.search {
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
height: 200px;
// background: $color-white;
border: 1px dashed #e3e3e3;
border-radius: $br0;
}
svg {
width: 36px;
height: 36px;
fill: $color-gray-20;
}
.text {
margin-top: 10px;
color: $color-gray-30;
font-size: $fs16;
}
}
.dashboard-container {
background-color: $color-dashboard;
flex: 1 0 0;
margin-right: $size-4;
overflow-y: auto;
width: 100%;
&.dashboard-projects {
user-select: none;
}
&.no-bg {
background-color: transparent;
}
&.dashboard-shared {
width: calc(100vw - 320px);
margin-right: 50px;
}
&.search {
margin-top: 10px;
}
}
.dashboard-header {
background-color: transparent;
.dashboard-title {
h1 {
color: $df-primary;
font-size: 24px;
font-weight: 400;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
max-width: 700px;
}
}
.icon {
svg {
fill: $df-secondary;
}
}
// Settings sub-menu
.dashboard-header-options {
li {
a {
font-size: 16px;
color: $df-secondary;
border-color: transparent;
&:hover {
color: $df-primary;
}
}
&.active {
a {
color: $df-primary;
}
}
}
}
}
.grid-empty-placeholder {
background-color: transparent;
.create-new {
background-color: $db-tertiary;
border-radius: 8px;
border: none;
color: $df-primary;
text-transform: uppercase;
&:hover {
background-color: $db-cuaternary;
color: $da-primary;
}
}
&.search {
border: 1px solid $db-cuaternary;
border-radius: 8px;
.text {
color: $df-primary;
}
.icon {
svg {
fill: $df-secondary;
}
}
}
}

933
frontend/src/app/main/ui/dashboard/sidebar.cljs
View file

File diff suppressed because it is too large Load diff

515
frontend/src/app/main/ui/dashboard/sidebar.scss Normal file
View file

@ -0,0 +1,515 @@
@import "common/dependencies/colors";
$fs14: 0.875rem;
$fs12: 0.75rem;
$fw400: 400;
$size-2: 0.5rem;
$size-3: 0.75rem;
$size-4: 1rem;
$br3: 3px;
.dashboard-sidebar {
grid-row: 1 / span 2;
grid-column: 1 / span 2;
background-color: $db-primary;
border-right: 1px solid $db-cuaternary;
margin: 0 1rem 0 0;
padding: 1rem 0 0 0;
z-index: 1;
display: flex;
flex-direction: column;
height: 100%;
}
.sidebar-content {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
padding: 0;
hr {
border-color: transparent;
margin: 0.8rem 15px;
}
.back-to-dashboard {
.icon svg {
fill: $df-secondary;
}
.text {
color: $df-primary;
}
}
}
.sidebar-team-switch {
position: relative;
display: flex;
margin: 5px 15px;
.switch-content {
background-color: $db-tertiary;
border-radius: 8px;
height: 48px;
display: flex;
width: 100%;
border: 1px solid transparent;
align-items: center;
svg {
fill: #8f9da3;
}
}
.switch-icon {
display: flex;
align-items: center;
justify-content: center;
svg {
fill: $df-secondary;
width: 10px;
height: 10px;
}
}
.current-team {
height: 100%;
cursor: pointer;
display: flex;
align-items: center;
flex-grow: 1;
font-size: 0.875rem;
padding: 0px 10px;
background-color: transparent;
border: none;
border-right: 1px solid $db-primary;
}
.team-name {
flex-grow: 1;
display: flex;
height: 40px;
align-items: center;
}
.team-text {
color: $df-primary;
width: 145px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-align: left;
}
.team-icon {
display: flex;
align-items: center;
padding-right: 10px;
img {
border-radius: 50%;
flex-shrink: 0;
height: 23px;
width: 23px;
}
svg {
width: 23px;
height: 23px;
}
}
.switch-options {
display: flex;
max-width: 22px;
min-width: 28px;
border-left: 1px solid #e3e3e3;
justify-content: center;
align-items: center;
cursor: pointer;
background-color: transparent;
border: none;
svg {
fill: $df-secondary;
width: 15px;
height: 13px;
}
}
.dropdown {
right: 2px;
top: 50px;
min-width: 162px;
max-height: 30rem;
}
}
.dropdown {
position: absolute;
z-index: 12;
background-color: $db-tertiary;
border: 1px solid $db-cuaternary;
border-radius: 8px;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
.separator {
border-color: transparent;
margin-top: 10px;
}
li {
border-radius: 8px;
height: 40px;
margin: 5px;
display: flex;
align-items: center;
cursor: pointer;
font-size: 0.875rem;
padding: 5px 16px;
.warning {
color: #e65244;
}
&:hover {
background-color: $db-cuaternary;
}
svg {
height: 12px;
width: 12px;
}
}
hr {
border-color: transparent;
margin: 0;
}
&.options-dropdown {
li {
color: $df-primary;
&.warning {
color: $color-danger;
}
}
}
}
.teams-dropdown {
background-color: $db-tertiary;
border-radius: 8px;
border: 1px solid $db-cuaternary;
min-width: 248px;
left: 0;
top: 50px;
z-index: 12;
max-height: 30rem;
overflow-x: hidden;
overflow-y: auto;
li {
border-radius: 8px;
height: 42px;
padding: 0 5px;
margin: 5px;
svg {
fill: $df-secondary;
}
&:hover {
background-color: $db-cuaternary;
.team-icon {
&.new-team {
background-color: $da-primary;
svg {
fill: $db-secondary;
}
}
}
}
.team-icon {
display: flex;
align-items: center;
}
.team-text {
color: $df-primary;
width: 165px;
}
.new-team {
background-color: $db-cuaternary;
}
&.action {
.team-icon {
background-color: #2e3434;
border-radius: 50%;
height: 24px;
margin-right: 10px;
padding: 6px;
width: 24px;
svg {
height: 12px;
width: 12px;
}
}
}
}
}
.sidebar-empty-placeholder {
padding: 10px 12px;
color: $df-secondary;
display: flex;
align-items: flex-start;
.icon {
padding: 0px 10px;
svg {
fill: $color-gray-30;
width: 12px;
height: 12px;
}
}
.text {
font-size: $fs12;
}
}
.sidebar-search {
align-items: center;
border: 1px solid transparent;
display: flex;
margin: 5px 15px;
background-color: $db-tertiary;
border-radius: 8px;
margin-bottom: 2rem;
margin-top: 0;
position: relative;
.input-text {
background: transparent;
border: 0;
font-size: 0.875rem;
margin: 0;
width: 100%;
height: 40px;
border-radius: 8px;
color: $df-primary;
max-width: 100%;
padding: 6px 10px;
&:focus,
&:focus-within {
border: 1px solid $da-primary;
}
}
::placeholder {
color: $df-secondary;
}
.search,
.clear-search {
align-items: center;
cursor: pointer;
display: flex;
height: 22px;
margin-left: auto;
padding: 0 0.5rem;
width: 32px;
position: absolute;
top: 10px;
right: 2px;
svg {
fill: $color-gray-30;
height: 15px;
width: 15px;
}
}
.clear-search svg {
transform: rotate(45deg);
&:hover {
fill: $color-danger;
}
}
}
.sidebar-nav {
display: flex;
flex-direction: column;
overflow-y: auto;
margin: 0;
user-select: none;
&.no-overflow {
overflow: unset;
}
& > li {
align-items: center;
cursor: pointer;
display: flex;
flex-shrink: 0;
padding: 0.6rem 0.6rem 0.6rem 1.4rem;
a {
font-weight: $fw400;
width: 100%;
&:hover {
text-decoration: none;
}
}
svg {
fill: $color-black;
margin-right: 8px;
height: $size-3;
width: $size-3;
}
.element-title {
color: $df-secondary;
font-size: $fs14;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.recent-projects {
svg {
fill: $color-white;
}
}
& .edit-wrapper {
border: 1px solid $color-gray-10;
border-radius: $br3;
display: flex;
width: 100%;
}
input.element-title {
border: 0;
height: 30px;
padding: 5px;
margin: 0;
width: 100%;
background-color: $color-white;
}
.close {
background-color: $color-white;
cursor: pointer;
padding-left: 5px;
svg {
fill: $color-gray-30;
height: 15px;
transform: rotate(45deg) translateY(7px);
width: 15px;
margin: 0;
}
}
.element-subtitle {
color: $color-gray-20;
font-style: italic;
}
&:hover {
background-color: $db-cuaternary;
}
&.current {
background-color: $db-cuaternary;
.element-title {
color: $da-primary;
}
}
}
}
.profile-section {
align-items: center;
cursor: pointer;
display: flex;
padding: 10px 15px;
position: relative;
background-color: $db-tertiary;
border-top: 1px solid $db-cuaternary;
.profile {
align-items: center;
cursor: pointer;
display: flex;
flex-grow: 1;
span {
// @include text-ellipsis;
color: $df-primary;
margin: 10px;
font-size: $fs14;
max-width: 160px;
}
img {
border-radius: 50%;
flex-shrink: 0;
height: 25px;
width: 25px;
}
svg {
height: 10px;
margin-left: auto;
margin-right: $size-2;
width: 10px;
}
}
.dropdown {
left: 15px;
bottom: 45px;
background-color: #212426;
border: 1px solid #2e3434;
border-radius: 8px;
min-width: 252px;
// @include animation(0, 0.2s, fadeInUp);
li {
font-size: $fs14;
padding: $size-2 $size-4;
svg {
fill: $color-gray-20;
margin-right: $size-2;
height: 12px;
width: 12px;
}
.text {
color: #ffffff;
}
&.separator {
border-top: 1px solid transparent;
}
}
}
}

886
frontend/src/app/main/ui/dashboard/team.cljs
View file

File diff suppressed because it is too large Load diff

1195
frontend/src/app/main/ui/dashboard/team.scss
View file

File diff suppressed because it is too large Load diff

225
frontend/src/app/main/ui/dashboard/templates.cljs
View file

@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.dashboard.templates
(:require-macros [app.main.style :as stl])
(:require
[app.common.data.macros :as dm]
[app.common.math :as mth]
@ -15,6 +16,7 @@
[app.main.data.users :as du]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
@ -57,7 +59,8 @@
(mf/defc title
{::mf/wrap-props false}
[{:keys [collapsed]}]
(let [on-click
(let [new-css-system (mf/use-ctx ctx/new-css-system)
on-click
(mf/use-fn
(mf/deps collapsed)
(fn [_event]
@ -73,17 +76,27 @@
(dom/prevent-default event)
(on-click event))))]
[:div.title
[:button {:tab-index "0"
:on-click on-click
:on-key-down on-key-down}
[:span (tr "dashboard.libraries-and-templates")]
[:span.icon (if ^boolean collapsed i/arrow-up i/arrow-down)]]]))
(if new-css-system
[:div {:class (stl/css :title)}
[:button {:tab-index "0"
:on-click on-click
:on-key-down on-key-down}
[:span (tr "dashboard.libraries-and-templates")]
[:span {:class (stl/css :icon)} (if ^boolean collapsed i/arrow-up i/arrow-down)]]]
;; OLD
[:div.title
[:button {:tab-index "0"
:on-click on-click
:on-key-down on-key-down}
[:span (tr "dashboard.libraries-and-templates")]
[:span.icon (if ^boolean collapsed i/arrow-up i/arrow-down)]]])))
(mf/defc card-item
{::mf/wrap-props false}
[{:keys [item index is-visible collapsed on-import]}]
(let [id (dm/str "card-container-" index)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
id (dm/str "card-container-" index)
thb (assoc cf/public-uri :path (dm/str "/images/thumbnails/template-" (:id item) ".jpg"))
on-click
@ -100,23 +113,41 @@
(dom/stop-propagation event)
(on-import item event))))]
[:a.card-container
{:tab-index (if (or (not is-visible) collapsed) "-1" "0")
:id id
:data-index index
:on-click on-click
:on-key-down on-key-down}
[:div.template-card
[:div.img-container
[:img {:src (dm/str thb)
:alt (:name item)}]]
[:div.card-name [:span (:name item)]
[:span.icon i/download]]]]))
(if new-css-system
[:a
{:class (stl/css :card-container)
:tab-index (if (or (not is-visible) collapsed) "-1" "0")
:id id
:data-index index
:on-click on-click
:on-key-down on-key-down}
[:div {:class (stl/css :template-card)}
[:div {:class (stl/css :img-container)}
[:img {:src (dm/str thb)
:alt (:name item)}]]
[:div {:class (stl/css :card-name)}
[:span (:name item)]
[:span {:class (stl/css :icon)} i/download]]]]
;; OLD
[:a.card-container
{:tab-index (if (or (not is-visible) collapsed) "-1" "0")
:id id
:data-index index
:on-click on-click
:on-key-down on-key-down}
[:div.template-card
[:div.img-container
[:img {:src (dm/str thb)
:alt (:name item)}]]
[:div.card-name [:span (:name item)]
[:span.icon i/download]]]])))
(mf/defc card-item-link
{::mf/wrap-props false}
[{:keys [total is-visible collapsed section]}]
(let [id (dm/str "card-container-" total)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
id (dm/str "card-container-" total)
on-click
(mf/use-fn
@ -134,23 +165,39 @@
(dom/stop-propagation event)
(on-click event))))]
[:div.card-container
[:div.template-card
[:div.img-container
[:a {:id id
:tab-index (if (or (not is-visible) collapsed) "-1" "0")
:href "https://penpot.app/libraries-templates.html"
:target "_blank"
:on-click on-click
:on-key-down on-key-down}
[:div.template-link
[:div.template-link-title (tr "dashboard.libraries-and-templates")]
[:div.template-link-text (tr "dashboard.libraries-and-templates.explore")]]]]]]))
(if new-css-system
[:div {:class (stl/css :card-container)}
[:div {:class (stl/css :template-card)}
[:div {:class (stl/css :img-container)}
[:a {:id id
:tab-index (if (or (not is-visible) collapsed) "-1" "0")
:href "https://penpot.app/libraries-templates.html"
:target "_blank"
:on-click on-click
:on-key-down on-key-down}
[:div {:class (stl/css :template-link)}
[:div {:class (stl/css :template-link-title)} (tr "dashboard.libraries-and-templates")]
[:div {:class (stl/css :template-link-text)} (tr "dashboard.libraries-and-templates.explore")]]]]]]
;; OLD
[:div.card-container
[:div.template-card
[:div.img-container
[:a {:id id
:tab-index (if (or (not is-visible) collapsed) "-1" "0")
:href "https://penpot.app/libraries-templates.html"
:target "_blank"
:on-click on-click
:on-key-down on-key-down}
[:div.template-link
[:div.template-link-title (tr "dashboard.libraries-and-templates")]
[:div.template-link-text (tr "dashboard.libraries-and-templates.explore")]]]]]])))
(mf/defc templates-section
{::mf/wrap-props false}
[{:keys [default-project-id profile project-id team-id content-width]}]
(let [templates (mf/deref builtin-templates)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
templates (mf/deref builtin-templates)
templates (mf/with-memo [templates]
(filterv #(not= (:id %) "tutorial-for-beginners") templates))
@ -234,42 +281,86 @@
(when (and profile (not collapsed))
(st/emit! (dd/fetch-builtin-templates))))
[:div.dashboard-templates-section
{:class (when ^boolean collapsed "collapsed")}
[:& title {:collapsed collapsed}]
(if new-css-system
[:div
{:class (stl/css-case :dashboard-templates-section true
:collapsed collapsed)}
[:& title {:collapsed collapsed}]
[:div.content {:ref content-ref
:style {:left card-offset
:width (dm/str container-size "px")}}
[:div {:class (stl/css :content)
:ref content-ref
:style {:left card-offset
:width (dm/str container-size "px")}}
(for [index (range (count templates))]
[:& card-item
{:on-import on-import-template
:item (nth templates index)
:index index
:key index
:is-visible (and (>= index first-card)
(<= index last-card))
:collapsed collapsed}])
(for [index (range (count templates))]
[:& card-item
{:on-import on-import-template
:item (nth templates index)
:index index
:key index
:is-visible (and (>= index first-card)
(<= index last-card))
:collapsed collapsed}])
[:& card-item-link
{:is-visible (and (>= total first-card) (<= total last-card))
:collapsed collapsed
:section section
:total total}]]
[:& card-item-link
{:is-visible (and (>= total first-card) (<= total last-card))
:collapsed collapsed
:section section
:total total}]]
(when (< card-offset 0)
[:button.button.left
{:tab-index (if ^boolean collapsed "-1" "0")
:on-click on-move-left
:on-key-down on-move-left-key-down}
i/go-prev])
(when (< card-offset 0)
[:button
{:class (stl/css :button :left)
:tab-index (if ^boolean collapsed "-1" "0")
:on-click on-move-left
:on-key-down on-move-left-key-down}
i/go-prev])
(when more-cards
[:button.button.right
{:tab-index (if collapsed "-1" "0")
:on-click on-move-right
:aria-label (tr "labels.next")
:on-key-down on-move-right-key-down}
i/go-next])]))
(when more-cards
[:button
{:class (stl/css :button :right)
:tab-index (if collapsed "-1" "0")
:on-click on-move-right
:aria-label (tr "labels.next")
:on-key-down on-move-right-key-down}
i/go-next])]
;; OLD
[:div.dashboard-templates-section
{:class (when ^boolean collapsed "collapsed")}
[:& title {:collapsed collapsed}]
[:div.content {:ref content-ref
:style {:left card-offset
:width (dm/str container-size "px")}}
(for [index (range (count templates))]
[:& card-item
{:on-import on-import-template
:item (nth templates index)
:index index
:key index
:is-visible (and (>= index first-card)
(<= index last-card))
:collapsed collapsed}])
[:& card-item-link
{:is-visible (and (>= total first-card) (<= total last-card))
:collapsed collapsed
:section section
:total total}]]
(when (< card-offset 0)
[:button.button.left
{:tab-index (if ^boolean collapsed "-1" "0")
:on-click on-move-left
:on-key-down on-move-left-key-down}
i/go-prev])
(when more-cards
[:button.button.right
{:tab-index (if collapsed "-1" "0")
:on-click on-move-right
:aria-label (tr "labels.next")
:on-key-down on-move-right-key-down}
i/go-next])])))

246
frontend/src/app/main/ui/dashboard/templates.scss Normal file
View file

@ -0,0 +1,246 @@
// 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) KALEIDOS INC
@import "common/dependencies/colors";
$br10: 10px;
$lh-normal: normal;
$fs18: 1.125rem;
$fw600: 600;
$fs16: 1rem;
$br5: 5px;
$fw500: 500;
$fs14: 0.875rem;
$fs12: 0.75rem;
$size-2: 0.5rem;
.dashboard-templates-section {
position: absolute;
display: flex;
flex-direction: column;
justify-content: flex-end;
bottom: 0;
width: 100%;
height: 228px;
transition: bottom 300ms;
pointer-events: none;
&.collapsed {
bottom: -228px;
transition: bottom 300ms;
}
.title {
pointer-events: all;
width: fit-content;
top: -56px;
right: -28px;
text-align: right;
height: 56px;
position: absolute;
button {
border: none;
cursor: pointer;
height: 58px;
display: inline-flex;
align-items: center;
border-top: 2px solid #e4e4e4;
border-left: 2px solid #e4e4e4;
border-right: 2px solid #e4e4e4;
border-top-left-radius: $br10;
border-top-right-radius: $br10;
margin-right: 30px;
background-color: $color-white;
position: relative;
z-index: 1;
span {
display: inline-block;
vertical-align: middle;
line-height: $lh-normal;
font-size: $fs18;
font-weight: $fw600;
color: $color-black;
margin-left: 18px;
margin-right: 10px;
&.icon {
margin-left: 10px;
margin-right: 16px;
}
}
svg {
width: 12px;
height: 12px;
fill: $df-secondary;
}
}
}
.button {
position: absolute;
top: 133px;
border: 2px solid #e0e4e9;
border-radius: 50%;
text-align: center;
width: 35px;
height: 35px;
cursor: pointer;
background-color: $color-white;
display: flex;
align-items: center;
justify-content: center;
pointer-events: all;
svg {
width: 12px;
height: 12px;
fill: $df-secondary;
}
&.left {
left: 0;
margin-left: 43px;
}
&.right {
right: 0;
margin-right: 43px;
}
&:hover {
border: 2px solid $color-primary;
}
}
.content {
pointer-events: all;
background-color: $color-white;
width: 200%;
height: 229px;
border-top: 2px solid #e4e4e4;
border-left: 2px solid #e4e4e4;
margin-left: 5px;
position: absolute;
.card-container {
width: 275px;
margin-top: 20px;
display: inline-block;
text-align: center;
vertical-align: top;
background-color: transparent;
border: none;
padding: 0;
}
.template-card {
display: inline-block;
width: 255px;
font-size: $fs16;
color: #181a22;
cursor: pointer;
.img-container {
width: 100%;
height: 135px;
margin-bottom: 15px;
border-radius: $br5;
border: 2px solid #e0e4e9;
display: flex;
justify-content: center;
flex-direction: column;
}
.card-name {
padding: 0 5px;
display: flex;
justify-content: space-between;
height: 23px;
svg {
width: 16px;
height: 16px;
fill: $df-secondary;
}
span {
font-weight: $fw500;
font-size: $fs14;
}
}
.template-link {
border: 2px solid transparent;
margin: 30px;
padding: 32px 0;
}
.template-link-title {
font-size: $fs14;
font-weight: $fw600;
color: $color-gray-60;
}
.template-link-text {
font-size: $fs12;
margin-top: $size-2;
color: $color-gray-50;
}
&:hover {
.img-container {
border: 2px solid $color-primary;
}
}
}
}
}
.dashboard-templates-section {
.title {
right: -24px;
button {
background-color: $db-cuaternary;
border: none;
span {
color: $df-primary;
font-weight: 400;
}
}
}
.content {
border-top-left-radius: 8px;
border: none;
background-color: $db-cuaternary;
.template-card {
color: $df-primary;
padding: 0.2rem 0.3rem 1rem 0.3rem;
border-radius: 8px;
.img-container {
border: none;
img {
border-radius: 4px;
}
}
.card-name {
span {
font-size: 16px;
}
}
.template-link {
.template-link-title {
color: $df-primary;
font-weight: 400;
}
.template-link-text {
color: $df-secondary;
}
}
&:hover {
background-color: $db-tertiary;
.img-container {
border: none;
}
}
}
}
}

77
frontend/src/app/main/ui/settings.cljs
View file

@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.settings
(:require-macros [app.main.style :as stl])
(:require
[app.main.refs :as refs]
[app.main.store :as st]
@ -25,9 +26,16 @@
(mf/defc header
{::mf/wrap [mf/memo]}
[]
[:header.dashboard-header
[:div.dashboard-title
[:h1 {:data-test "account-title"} (tr "dashboard.your-account-title")]]])
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
(if new-css-system
[:header {:class (stl/css :dashboard-header)}
[:div {:class (stl/css :dashboard-title)}
[:h1 {:data-test "account-title"} (tr "dashboard.your-account-title")]]]
;; OLD
[:header.dashboard-header
[:div.dashboard-title
[:h1 {:data-test "account-title"} (tr "dashboard.your-account-title")]]])))
(mf/defc settings
[{:keys [route] :as props}]
@ -40,28 +48,53 @@
#(when (nil? profile)
(st/emit! (rt/nav :auth-login))))
[:section {:class (dom/classnames :dashboard-layout (not new-css-system)
:dashboard-layout-refactor new-css-system)}
[:& sidebar {:profile profile
:locale locale
:section section}]
(if new-css-system
[:section {:class (stl/css :dashboard-layout-refactor :dashboard)}
[:& sidebar {:profile profile
:locale locale
:section section}]
[:div.dashboard-content
[:& header]
[:section.dashboard-container
(case section
:settings-profile
[:& profile-page {:locale locale}]
[:div {:class (stl/css :dashboard-content)}
[:& header]
[:section {:class (stl/css :dashboard-container)}
(case section
:settings-profile
[:& profile-page {:locale locale}]
:settings-feedback
[:& feedback-page]
:settings-feedback
[:& feedback-page]
:settings-password
[:& password-page {:locale locale}]
:settings-password
[:& password-page {:locale locale}]
:settings-options
[:& options-page {:locale locale}]
:settings-options
[:& options-page {:locale locale}]
:settings-access-tokens
[:& access-tokens-page])]]]))
:settings-access-tokens
[:& access-tokens-page])]]]
;; OLD
[:section {:class (dom/classnames :dashboard-layout (not new-css-system)
:dashboard-layout-refactor new-css-system)}
[:& sidebar {:profile profile
:locale locale
:section section}]
[:div.dashboard-content
[:& header]
[:section.dashboard-container
(case section
:settings-profile
[:& profile-page {:locale locale}]
:settings-feedback
[:& feedback-page]
:settings-password
[:& password-page {:locale locale}]
:settings-options
[:& options-page {:locale locale}]
:settings-access-tokens
[:& access-tokens-page])]]])))

697
frontend/src/app/main/ui/settings.scss Normal file
View file

@ -0,0 +1,697 @@
@import "common/dependencies/colors";
$fs14: 0.875rem;
$fs22: 1.5rem;
$fs24: 1.5rem;
$lh-500: 5;
$fs12: 0.75rem;
$fs16: 1rem;
$fw400: 400;
$fw600: 600;
$size-1: 0.25rem;
$size-2: 0.5rem;
$size-3: 0.75rem;
$size-4: 1rem;
$size-5: 1.5rem;
$size-6: 2rem;
$br3: 3px;
$br4: 4px;
$br5: 5px;
$fw700: 700;
.dashboard {
background-color: $db-primary;
display: grid;
grid-template-rows: 50px 1fr;
grid-template-columns: 40px 256px 1fr;
height: 100vh;
}
.dashboard-content {
display: flex;
flex-direction: column;
position: relative;
grid-row: 1 / span 2;
padding: 1rem 1rem 0 0;
}
.dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: $color-white;
height: 63px;
padding: $size-1 $size-4 $size-1 $size-2;
position: relative;
z-index: 10;
user-select: none;
&.team {
display: grid;
grid-template-columns: 20% 1fr 20%;
}
.element-name {
margin-right: $size-2;
}
.btn-secondary {
flex-shrink: 0;
z-index: 10;
height: 32px;
svg {
height: 16px;
width: 16px;
}
}
svg {
fill: $color-black;
height: 14px;
margin-right: $size-1;
width: 14px;
}
nav {
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 1;
ul {
display: flex;
font-size: $fs14;
justify-content: center;
margin: 0;
}
li {
a {
display: flex;
align-items: center;
flex-basis: 140px;
border-bottom: 3px solid transparent;
color: $color-gray-30;
height: 40px;
padding: $size-1 $size-5;
font-weight: $fw400;
&:hover {
color: $color-black;
text-decoration: none;
}
}
&.active {
a {
color: $color-black;
border-color: $color-primary;
}
}
}
}
.dashboard-title {
display: flex;
align-items: center;
margin-left: 13px;
h1 {
color: $color-black;
display: flex;
flex-shrink: 0;
font-size: $fs22;
font-weight: $fw600;
z-index: 10;
user-select: all;
}
.context-menu.is-open {
margin-top: 10px;
}
}
.icon {
display: flex;
align-items: center;
cursor: pointer;
margin-left: $size-2;
z-index: 10;
svg {
fill: $color-gray-40;
width: 15px;
height: 15px;
&:hover {
fill: $color-primary-dark;
}
}
}
.dashboard-buttons {
display: flex;
justify-content: flex-end;
align-items: center;
}
.dashboard-header-actions {
display: flex;
}
.pin-icon {
margin: 0 $size-2 0 $size-5;
background-color: transparent;
border: none;
svg {
fill: $color-gray-20;
}
&.active {
svg {
fill: $color-gray-50;
}
}
}
}
.dashboard-header {
background-color: transparent;
.dashboard-title {
h1 {
color: $df-primary;
font-size: 24px;
font-weight: 400;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
max-width: 700px;
}
}
.icon {
svg {
fill: $df-secondary;
}
}
// Settings sub-menu
.dashboard-header-options {
li {
a {
font-size: 16px;
color: $df-secondary;
border-color: transparent;
&:hover {
color: $df-primary;
}
}
&.active {
a {
color: $df-primary;
}
}
}
}
}
.dashboard-container {
background-color: $color-dashboard;
flex: 1 0 0;
margin-right: $size-4;
overflow-y: auto;
width: 100%;
&.dashboard-projects {
user-select: none;
}
&.no-bg {
background-color: transparent;
}
&.dashboard-shared {
width: calc(100vw - 320px);
margin-right: 50px;
}
&.search {
margin-top: 10px;
}
}
.dashboard-container {
background-color: transparent;
border-top: 1px solid $db-cuaternary;
.dashboard-settings {
a {
color: $df-secondary;
}
.form-container {
width: 800px;
margin: 80px auto auto 120px;
form {
width: 468px;
.fields-row {
.custom-input,
.custom-select {
flex-direction: column-reverse;
label {
position: relative;
text-transform: uppercase;
color: $df-primary;
font-size: 11px;
margin-bottom: 12px;
margin-left: -4px;
}
input,
select {
background-color: $db-tertiary;
border-radius: 8px;
border-color: transparent;
color: $df-primary;
padding: 0 15px;
&:focus {
outline: 1px solid $da-primary;
}
::placeholder {
color: $df-secondary;
}
}
.help-icon {
bottom: 12px;
top: auto;
svg {
fill: $df-secondary;
}
}
&.disabled {
input {
background-color: $db-primary;
border-color: $db-cuaternary;
color: $df-secondary;
}
}
.input-container {
background-color: $db-tertiary;
border-radius: 8px;
border-color: transparent;
margin-top: 22px;
.main-content {
label {
position: absolute;
top: -24px;
}
span {
color: $df-primary;
}
}
&:focus {
border: 1px solid $da-primary;
}
}
textarea {
border-radius: 8px;
padding: 12px 14px;
background-color: $db-tertiary;
color: $df-primary;
border: none;
&:focus {
outline: 1px solid $da-primary;
}
}
}
}
.field-title {
color: $df-primary;
}
.field-title:not(:first-child) {
margin-top: 64px;
}
.field-text {
color: $df-secondary;
}
button,
.btn-secondary {
width: 100%;
font-size: 11px;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
&:hover {
color: $da-primary;
background-color: $db-cuaternary;
}
}
hr {
display: none;
}
}
.links {
margin-top: 12px;
}
}
}
//Access tokens
.dashboard-access-tokens {
width: 800px;
margin-left: 120px;
margin-top: 80px;
.access-tokens-hero-container {
background-color: transparent;
.access-tokens-hero {
width: 468px;
flex-direction: column;
gap: 32px;
background-color: transparent;
margin: 0;
padding: 0;
.desc {
background-color: transparent;
width: 100%;
h2 {
color: $df-primary;
font-size: 24px;
font-weight: regular;
margin-bottom: 32px;
}
p {
color: $df-secondary;
margin-bottom: 0;
font-size: 14px;
}
}
button {
width: 100%;
font-size: 11px;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
&:hover {
color: $da-primary;
background-color: $db-cuaternary;
}
}
}
}
.dashboard-table {
width: 800px;
.table-rows {
padding-top: 0;
.table-row {
font-size: 14px;
min-height: 40px;
height: fit-content;
.name {
color: $df-primary;
max-width: 480px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.expiration-date {
color: $df-secondary;
}
}
}
}
.access-tokens-empty {
width: 468px;
border: 1px solid $db-cuaternary;
border-radius: 8px;
margin-top: 32px;
font-size: 14px;
background-color: transparent;
color: $df-secondary;
}
}
// Team webhooks
&.dashboard-team-webhooks {
width: 800px;
margin-left: 120px;
margin-top: 80px;
border: none;
align-items: flex-start;
.webhooks-hero-container {
width: 468px;
background-color: transparent;
.webhooks-hero {
width: 468px;
flex-direction: column;
gap: 32px;
background-color: transparent;
margin: 0;
padding: 0;
.desc {
background-color: transparent;
width: 100%;
h2 {
color: $df-primary;
font-size: 24px;
font-weight: regular;
margin-bottom: 32px;
}
p {
color: $df-secondary;
margin-bottom: 0;
font-size: 14px;
}
}
.btn-primary {
width: 100%;
font-size: 11px;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
&:hover {
color: $da-primary;
background-color: $db-cuaternary;
}
}
}
}
.dashboard-table {
width: 800px;
.table-rows {
padding-top: 0;
.table-row {
font-size: 14px;
min-height: 40px;
height: fit-content;
.name {
color: $df-primary;
max-width: 480px;
}
.expiration-date {
color: $df-secondary;
}
}
}
}
.webhooks-empty {
width: 468px;
border: 1px solid $db-cuaternary;
border-radius: 8px;
margin-top: 32px;
font-size: 14px;
background-color: transparent;
color: $df-secondary;
}
}
// Members section
.dashboard-table {
.table-header {
background-color: transparent;
color: $df-secondary;
font-size: 12px;
text-transform: uppercase;
}
.table-rows {
.table-row {
background-color: $db-tertiary;
border-radius: 8px;
color: $df-primary;
.rol-selector {
background-color: $db-cuaternary;
border-color: transparent;
border-radius: 8px;
}
}
}
.member-info {
.member-name .you,
.member-email {
color: $df-secondary;
}
}
.status-badge {
border-radius: 8px;
color: $db-primary;
text-transform: uppercase;
}
.empty-invitations {
border: 1px solid $db-cuaternary;
border-radius: 8px;
color: $df-secondary;
}
}
.actions-dropdown,
.options-dropdown {
background-color: $db-tertiary;
border: 1px solid $db-cuaternary;
border-radius: 8px;
min-width: 252px;
.separator {
border-color: transparent;
margin-top: 10px;
}
li {
border-radius: 8px;
height: 40px;
margin: 5px;
color: $df-primary;
&:hover {
background-color: $db-cuaternary;
}
}
&.options-dropdown {
li {
color: $df-primary;
&.warning {
color: $color-danger;
}
}
}
}
}
.dashboard-settings {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
.form-container {
margin-top: 50px;
display: flex;
max-width: 368px;
margin-bottom: 2rem;
width: 100%;
&.two-columns {
max-width: 536px;
justify-content: space-between;
flex-direction: row;
}
h2 {
margin-bottom: 1rem;
}
}
.avatar-form {
display: flex;
flex-direction: column;
width: 120px;
min-width: 120px;
img {
border-radius: 50%;
flex-shrink: 0;
height: 120px;
margin-right: $size-4;
width: 120px;
}
.image-change-field {
position: relative;
width: 120px;
height: 120px;
.update-overlay {
opacity: 0;
cursor: pointer;
position: absolute;
width: 121px;
height: 121px;
border-radius: 50%;
font-size: $fs24;
color: $color-white;
line-height: $lh-500; // Original value was 120px; 120px/24px = 500% => $lh-500
text-align: center;
background: $color-primary-dark;
z-index: 14;
}
input[type="file"] {
width: 120px;
height: 120px;
position: absolute;
opacity: 0;
cursor: pointer;
top: 0;
z-index: 15;
}
&:hover {
.update-overlay {
opacity: 0.8;
}
}
}
}
.profile-form {
display: flex;
flex-direction: column;
max-width: 368px;
width: 100%;
.newsletter-subs {
border-bottom: 1px solid $color-gray-20;
border-top: 1px solid $color-gray-20;
padding: 30px 0;
margin-bottom: 31px;
.newsletter-title {
font-family: "worksans", sans-serif;
color: $color-gray-30;
font-size: $fs14;
}
label {
font-family: "worksans", sans-serif;
color: $color-gray-60;
font-size: $fs12;
margin-right: -17px;
margin-bottom: 13px;
}
.info {
font-family: "worksans", sans-serif;
color: $color-gray-30;
font-size: $fs12;
margin-bottom: 8px;
}
.input-checkbox label {
align-items: flex-start;
}
}
}
.options-form,
.password-form {
h2 {
font-size: $fs14;
margin-bottom: 20px;
}
}
}

178
frontend/src/app/main/ui/settings/access_tokens.cljs
View file

@ -247,20 +247,35 @@
(mf/defc access-tokens-hero
[]
(let [on-click (mf/use-fn #(st/emit! (modal/show :access-token {})))]
[:div.access-tokens-hero-container
[:div.access-tokens-hero
[:div.desc
[:h2 (tr "dashboard.access-tokens.personal")]
[:p (tr "dashboard.access-tokens.personal.description")]]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
on-click (mf/use-fn #(st/emit! (modal/show :access-token {})))]
(if new-css-system
[:div {:class (stl/css :access-tokens-hero-container)}
[:div {:class (stl/css :access-tokens-hero)}
[:div {:class (stl/css :desc)}
[:h2 (tr "dashboard.access-tokens.personal")]
[:p (tr "dashboard.access-tokens.personal.description")]]
[:button.btn-primary
{:on-click on-click}
[:span (tr "dashboard.access-tokens.create")]]]]))
[:button
{:class (stl/css :btn-primary)
:on-click on-click}
[:span (tr "dashboard.access-tokens.create")]]]]
;; OLD
[:div.access-tokens-hero-container
[:div.access-tokens-hero
[:div.desc
[:h2 (tr "dashboard.access-tokens.personal")]
[:p (tr "dashboard.access-tokens.personal.description")]]
[:button.btn-primary
{:on-click on-click}
[:span (tr "dashboard.access-tokens.create")]]]])))
(mf/defc access-token-actions
[{:keys [on-delete]}]
(let [local (mf/use-state {:menu-open false})
(let [new-css-system (mf/use-ctx ctx/new-css-system)
local (mf/use-state {:menu-open false})
show? (:menu-open @local)
options (mf/with-memo [on-delete]
[{:option-name (tr "labels.delete")
@ -278,28 +293,50 @@
(dom/prevent-default event)
(swap! local assoc :menu-open true)))]
[:div.icon
{:tab-index "0"
:ref menu-ref
:on-click on-menu-click
:on-key-down (fn [event]
(when (kbd/enter? event)
(dom/stop-propagation event)
(on-menu-click event)))}
i/actions
[:& context-menu-a11y
{:on-close on-menu-close
:show show?
:fixed? true
:min-width? true
:top "auto"
:left "auto"
:options options}]]))
(if new-css-system
[:div
{:class (stl/css :icon)
:tab-index "0"
:ref menu-ref
:on-click on-menu-click
:on-key-down (fn [event]
(when (kbd/enter? event)
(dom/stop-propagation event)
(on-menu-click event)))}
i/actions
[:& context-menu-a11y
{:on-close on-menu-close
:show show?
:fixed? true
:min-width? true
:top "auto"
:left "auto"
:options options}]]
;; OLD
[:div.icon
{:tab-index "0"
:ref menu-ref
:on-click on-menu-click
:on-key-down (fn [event]
(when (kbd/enter? event)
(dom/stop-propagation event)
(on-menu-click event)))}
i/actions
[:& context-menu-a11y
{:on-close on-menu-close
:show show?
:fixed? true
:min-width? true
:top "auto"
:left "auto"
:options options}]])))
(mf/defc access-token-item
{::mf/wrap [mf/memo]}
[{:keys [token] :as props}]
(let [locale (mf/deref i18n/locale)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
locale (mf/deref i18n/locale)
expires-at (:expires-at token)
expires-txt (some-> expires-at (dt/format-date-locale {:locale locale}))
expired? (and (some? expires-at) (> (dt/now) expires-at))
@ -323,36 +360,67 @@
:accept-label (tr "modals.delete-acces-token.accept")
:on-accept delete-fn}))))]
[:div.table-row
[:div.table-field.name
(str (:name token))]
[:div.table-field.expiration-date
[:span.content {:class (when expired? "expired")}
(cond
(nil? expires-at) (tr "dashboard.access-tokens.no-expiration")
expired? (tr "dashboard.access-tokens.expired-on" expires-txt)
:else (tr "dashboard.access-tokens.expires-on" expires-txt))]]
[:div.table-field.actions
[:& access-token-actions
{:on-delete on-delete}]]]))
(if new-css-system
[:div {:class (stl/css :table-row)}
[:div {:class (stl/css :table-field :name)}
(str (:name token))]
[:div {:class (stl/css :table-field :expiration-date)}
[:span {:class (stl/css-case :expired expired? :content true)}
(cond
(nil? expires-at) (tr "dashboard.access-tokens.no-expiration")
expired? (tr "dashboard.access-tokens.expired-on" expires-txt)
:else (tr "dashboard.access-tokens.expires-on" expires-txt))]]
[:div {:class (stl/css :table-field :actions)}
[:& access-token-actions
{:on-delete on-delete}]]]
;; OLD
[:div.table-row
[:div.table-field.name
(str (:name token))]
[:div.table-field.expiration-date
[:span.content {:class (when expired? "expired")}
(cond
(nil? expires-at) (tr "dashboard.access-tokens.no-expiration")
expired? (tr "dashboard.access-tokens.expired-on" expires-txt)
:else (tr "dashboard.access-tokens.expires-on" expires-txt))]]
[:div.table-field.actions
[:& access-token-actions
{:on-delete on-delete}]]])))
(mf/defc access-tokens-page
[]
(mf/with-effect []
(dom/set-html-title (tr "title.settings.access-tokens"))
(st/emit! (du/fetch-access-tokens)))
(let [new-css-system (mf/use-ctx ctx/new-css-system)
tokens (mf/deref tokens-ref)]
(mf/with-effect []
(dom/set-html-title (tr "title.settings.access-tokens"))
(st/emit! (du/fetch-access-tokens)))
(let [tokens (mf/deref tokens-ref)]
[:div.dashboard-access-tokens
[:div
[:& access-tokens-hero]
(if (empty? tokens)
[:div.access-tokens-empty
[:div (tr "dashboard.access-tokens.empty.no-access-tokens")]
[:div (tr "dashboard.access-tokens.empty.add-one")]]
[:div.dashboard-table
[:div.table-rows
(for [token tokens]
[:& access-token-item {:token token :key (:id token)}])]])]]))
(if new-css-system
[:div {:class (stl/css :dashboard-access-tokens)}
[:div
[:& access-tokens-hero]
(if (empty? tokens)
[:div {:class (stl/css :access-tokens-empty)}
[:div (tr "dashboard.access-tokens.empty.no-access-tokens")]
[:div (tr "dashboard.access-tokens.empty.add-one")]]
[:div {:class (stl/css :dashboard-table)}
[:div {:class (stl/css :table-rows)}
(for [token tokens]
[:& access-token-item {:token token :key (:id token)}])]])]]
;; OLD
[:div.dashboard-access-tokens
[:div
[:& access-tokens-hero]
(if (empty? tokens)
[:div.access-tokens-empty
[:div (tr "dashboard.access-tokens.empty.no-access-tokens")]
[:div (tr "dashboard.access-tokens.empty.add-one")]]
[:div.dashboard-table
[:div.table-rows
(for [token tokens]
[:& access-token-item {:token token :key (:id token)}])]])]])))

846
frontend/src/app/main/ui/settings/access_tokens.scss
View file

@ -80,3 +80,849 @@
}
}
}
//////
@import "common/dependencies/colors";
$br3: 3px;
$br4: 4px;
$br8: 8px;
$br6: 6px;
$fs12: 0.75rem;
$fs14: 0.875rem;
$fs16: 1rem;
$fs18: 1.125rem;
$fs22: 1.375rem;
$fs24: 1.5rem;
$fs36: 2.25rem;
$fw400: 400;
$fw500: 500;
$fw600: 600;
$fw700: 700;
$lh-088: 0.88;
$lh-115: 1.15; // original $title-lh-sm
$lh-500: 5; // original $title-lh-sm
$size-1: 0.25rem;
$size-2: 0.5rem;
$size-4: 1rem;
$size-5: 1.5rem;
$size-6: 2rem;
.form-container,
.generic-form {
display: flex;
justify-content: center;
flex-direction: column;
.forms-container {
display: flex;
margin-top: 40px;
width: 536px;
justify-content: center;
}
form {
display: flex;
flex-direction: column;
// flex-basis: 368px;
}
.fields-row {
margin-bottom: 20px;
flex-direction: column;
.options {
display: flex;
justify-content: flex-end;
font-size: $fs14;
margin-top: 13px;
}
}
.field {
margin-bottom: 20px;
}
h1 {
font-size: $fs36;
color: #2c233e;
margin-bottom: 20px;
}
.subtitle {
font-size: $fs24;
color: #2c233e;
margin-bottom: 20px;
}
.notification-icon {
justify-content: center;
display: flex;
margin-bottom: 3rem;
svg {
fill: $color-gray-60;
height: 40%;
width: 40%;
}
}
.notification-text {
font-size: $fs18;
color: $color-gray-60;
margin-bottom: 20px;
}
.notification-text-email {
background: $color-gray-10;
border-radius: $br3;
color: $color-gray-60;
font-size: $fs18;
font-weight: $fw500;
margin: 1.5rem 0 2.5rem 0;
padding: 1rem;
text-align: center;
}
h2 {
font-size: $fs24;
color: $color-gray-60;
// height: 40px;
display: flex;
align-items: center;
}
a {
&:hover {
text-decoration: underline;
}
}
p {
color: $color-gray-60;
}
hr {
border-color: $color-gray-20;
}
}
.dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: $color-white;
height: 63px;
padding: $size-1 $size-4 $size-1 $size-2;
position: relative;
z-index: 10;
user-select: none;
&.team {
display: grid;
grid-template-columns: 20% 1fr 20%;
}
.element-name {
margin-right: $size-2;
}
.btn-secondary {
flex-shrink: 0;
z-index: 10;
height: 32px;
svg {
height: 16px;
width: 16px;
}
}
svg {
fill: $color-black;
height: 14px;
margin-right: $size-1;
width: 14px;
}
nav {
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 1;
ul {
display: flex;
font-size: $fs14;
justify-content: center;
margin: 0;
}
li {
a {
display: flex;
align-items: center;
flex-basis: 140px;
border-bottom: 3px solid transparent;
color: $color-gray-30;
height: 40px;
padding: $size-1 $size-5;
font-weight: $fw400;
&:hover {
color: $color-black;
text-decoration: none;
}
}
&.active {
a {
color: $color-black;
border-color: $color-primary;
}
}
}
}
.dashboard-title {
display: flex;
align-items: center;
margin-left: 13px;
h1 {
color: $color-black;
display: flex;
flex-shrink: 0;
font-size: $fs22;
font-weight: $fw600;
z-index: 10;
user-select: all;
}
.context-menu.is-open {
margin-top: 10px;
}
}
.icon {
display: flex;
align-items: center;
cursor: pointer;
margin-left: $size-2;
z-index: 10;
svg {
fill: $color-gray-40;
width: 15px;
height: 15px;
&:hover {
fill: $color-primary-dark;
}
}
}
.dashboard-buttons {
display: flex;
justify-content: flex-end;
align-items: center;
}
.dashboard-header-actions {
display: flex;
}
.pin-icon {
margin: 0 $size-2 0 $size-5;
background-color: transparent;
border: none;
svg {
fill: $color-gray-20;
}
&.active {
svg {
fill: $color-gray-50;
}
}
}
}
.dashboard-settings {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
.form-container {
margin-top: 50px;
display: flex;
max-width: 368px;
margin-bottom: 2rem;
width: 100%;
&.two-columns {
max-width: 536px;
justify-content: space-between;
flex-direction: row;
}
h2 {
margin-bottom: 1rem;
}
}
.avatar-form {
display: flex;
flex-direction: column;
width: 120px;
min-width: 120px;
img {
border-radius: 50%;
flex-shrink: 0;
height: 120px;
margin-right: $size-4;
width: 120px;
}
.image-change-field {
position: relative;
width: 120px;
height: 120px;
.update-overlay {
opacity: 0;
cursor: pointer;
position: absolute;
width: 121px;
height: 121px;
border-radius: 50%;
font-size: $fs24;
color: $color-white;
line-height: $lh-500; // Original value was 120px; 120px/24px = 500% => $lh-500
text-align: center;
background: $color-primary-dark;
z-index: 14;
}
input[type="file"] {
width: 120px;
height: 120px;
position: absolute;
opacity: 0;
cursor: pointer;
top: 0;
z-index: 15;
}
&:hover {
.update-overlay {
opacity: 0.8;
}
}
}
}
.profile-form {
display: flex;
flex-direction: column;
max-width: 368px;
width: 100%;
.newsletter-subs {
border-bottom: 1px solid $color-gray-20;
border-top: 1px solid $color-gray-20;
padding: 30px 0;
margin-bottom: 31px;
.newsletter-title {
font-family: "worksans", sans-serif;
color: $color-gray-30;
font-size: $fs14;
}
label {
font-family: "worksans", sans-serif;
color: $color-gray-60;
font-size: $fs12;
margin-right: -17px;
margin-bottom: 13px;
}
.info {
font-family: "worksans", sans-serif;
color: $color-gray-30;
font-size: $fs12;
margin-bottom: 8px;
}
.input-checkbox label {
align-items: flex-start;
}
}
}
.options-form,
.password-form {
h2 {
font-size: $fs14;
margin-bottom: 20px;
}
}
}
.access-tokens-modal {
.action-buttons {
gap: 10px;
.cancel-button {
border: 1px solid $color-gray-30;
background: $color-canvas;
border-radius: $br3;
padding: 0.5rem 1rem;
cursor: pointer;
margin-right: 8px;
&:hover {
background: $color-gray-20;
}
}
}
.access-token-created {
position: relative;
word-break: break-all;
.custom-input input {
background-color: $color-success-lighter;
border: 0;
padding: 0 0 0 15px;
}
}
.help-icon {
border: none;
height: 40px;
width: 40px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
background-color: $color-success-lighter;
svg {
fill: $color-gray-30;
}
&:hover {
svg {
fill: $color-gray-60;
}
}
}
.token-created-info {
font-size: $fs12;
color: $color-gray-40;
}
}
.dashboard-settings {
a {
color: $df-secondary;
}
.form-container {
width: 800px;
margin: 80px auto auto 120px;
form {
width: 468px;
.fields-row {
.custom-input,
.custom-select {
flex-direction: column-reverse;
label {
position: relative;
text-transform: uppercase;
color: $df-primary;
font-size: 11px;
margin-bottom: 12px;
margin-left: -4px;
}
input,
select {
background-color: $db-tertiary;
border-radius: 8px;
border-color: transparent;
color: $df-primary;
padding: 0 15px;
&:focus {
outline: 1px solid $da-primary;
}
::placeholder {
color: $df-secondary;
}
}
.help-icon {
bottom: 12px;
top: auto;
svg {
fill: $df-secondary;
}
}
&.disabled {
input {
background-color: $db-primary;
border-color: $db-cuaternary;
color: $df-secondary;
}
}
.input-container {
background-color: $db-tertiary;
border-radius: 8px;
border-color: transparent;
margin-top: 22px;
.main-content {
label {
position: absolute;
top: -24px;
}
span {
color: $df-primary;
}
}
&:focus {
border: 1px solid $da-primary;
}
}
textarea {
border-radius: 8px;
padding: 12px 14px;
background-color: $db-tertiary;
color: $df-primary;
border: none;
&:focus {
outline: 1px solid $da-primary;
}
}
}
}
.field-title {
color: $df-primary;
}
.field-title:not(:first-child) {
margin-top: 64px;
}
.field-text {
color: $df-secondary;
}
button,
.btn-secondary {
width: 100%;
font-size: 11px;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
&:hover {
color: $da-primary;
background-color: $db-cuaternary;
}
}
hr {
display: none;
}
}
.links {
margin-top: 12px;
}
}
}
.dashboard-table {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
font-size: $fs16;
&.team-members {
margin-bottom: 52px;
}
&.invitations {
.table-row {
display: grid;
grid-template-columns: 43% 1fr 109px 12px;
}
}
.table-header {
display: grid;
grid-template-columns: 43% 1fr 109px 12px;
max-width: 1040px;
background-color: $color-white;
color: $color-gray-30;
width: 100%;
height: 40px;
padding: 0px 16px;
}
.table-rows {
display: flex;
flex-direction: column;
max-width: 1040px;
width: 100%;
margin-top: 16px;
color: $color-black;
}
.table-row {
display: flex;
width: 100%;
height: 45px;
align-items: center;
padding: 0px 16px;
}
.table-field {
display: flex;
align-items: center;
.icon {
padding-left: 10px;
cursor: pointer;
}
}
svg {
width: 10px;
height: 10px;
fill: $df-primary;
}
}
.dashboard-table {
.table-header {
background-color: transparent;
color: $df-secondary;
font-size: 12px;
text-transform: uppercase;
}
.table-rows {
.table-row {
background-color: $db-tertiary;
border-radius: 8px;
color: $df-primary;
.rol-selector {
background-color: $db-cuaternary;
border-color: transparent;
border-radius: 8px;
}
}
}
.member-info {
.member-name .you,
.member-email {
color: $df-secondary;
}
}
.status-badge {
border-radius: 8px;
color: $db-primary;
text-transform: uppercase;
}
.empty-invitations {
border: 1px solid $db-cuaternary;
border-radius: 8px;
color: $df-secondary;
}
}
.dashboard-access-tokens {
width: 800px;
margin-left: 120px;
margin-top: 80px;
.access-tokens-hero-container {
background-color: transparent;
.access-tokens-hero {
width: 468px;
flex-direction: column;
gap: 32px;
background-color: transparent;
margin: 0;
padding: 0;
.desc {
background-color: transparent;
width: 100%;
h2 {
color: $df-primary;
font-size: 24px;
font-weight: regular;
margin-bottom: 32px;
}
p {
color: $df-secondary;
margin-bottom: 0;
font-size: 14px;
}
}
button {
width: 100%;
font-size: 11px;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
&:hover {
color: $da-primary;
background-color: $db-cuaternary;
}
}
}
}
.dashboard-table {
width: 800px;
.table-rows {
padding-top: 0;
.table-row {
font-size: 14px;
min-height: 40px;
height: fit-content;
.name {
color: $df-primary;
max-width: 480px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.expiration-date {
color: $df-secondary;
}
}
}
}
.access-tokens-empty {
width: 468px;
border: 1px solid $db-cuaternary;
border-radius: 8px;
margin-top: 32px;
font-size: 14px;
background-color: transparent;
color: $df-secondary;
}
}
.dashboard-access-tokens {
display: flex;
flex-direction: column;
align-items: center;
.access-tokens-hero-container {
max-width: 1000px;
width: 100%;
display: flex;
flex-direction: column;
}
.access-tokens-hero {
font-size: $fs14;
padding: $size-6;
background-color: $color-white;
margin-top: $size-6;
display: flex;
justify-content: space-between;
.desc {
width: 80%;
color: $color-gray-40;
h2 {
margin-bottom: $size-4;
color: $color-black;
}
p {
font-size: $fs16;
}
}
.btn-primary {
flex-shrink: 0;
}
}
.access-tokens-empty {
text-align: center;
max-width: 1000px;
width: 100%;
padding: $size-6;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px dashed $color-gray-20;
color: $color-gray-40;
margin-top: 12px;
min-height: 136px;
}
.table-row {
background-color: $color-white;
display: grid;
grid-template-columns: 1fr 43% 12px;
height: 63px;
&:not(:first-child) {
margin-top: 8px;
}
}
.table-field {
&.name {
color: $color-gray-60;
}
&.expiration-date {
color: $color-gray-40;
font-size: $fs14;
.content {
padding: 2px 5px;
&.expired {
background-color: $color-warning-lighter;
border-radius: $br4;
color: $color-gray-40;
}
}
}
&.access-token-created {
word-break: break-all;
}
&.actions {
position: relative;
}
}
}
.btn-primary {
background-color: $da-tertiary;
border-radius: 8px;
color: $db-primary;
height: 32px;
text-transform: uppercase;
appearance: none;
align-items: center;
border: none;
cursor: pointer;
display: flex;
font-family: "worksans", sans-serif;
font-size: $fs12;
justify-content: center;
min-width: 25px;
padding: 0 1rem;
transition: all 0.4s;
text-decoration: none;
&:hover {
background-color: darken($da-tertiary, 10%);
color: $db-primary;
}
}

125
frontend/src/app/main/ui/settings/feedback.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.ui.settings.feedback
"Feedback form."
(:require-macros [app.main.style :as stl])
(:require
[app.common.spec :as us]
[app.main.data.messages :as dm]
@ -13,6 +14,7 @@
[app.main.repo :as rp]
[app.main.store :as st]
[app.main.ui.components.forms :as fm]
[app.main.ui.context :as ctx]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[beicon.core :as rx]
@ -27,7 +29,8 @@
(mf/defc feedback-form
[]
(let [profile (mf/deref refs/profile)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
profile (mf/deref refs/profile)
form (fm/use-form :spec ::feedback-form
:validators [(fm/validate-length :subject fm/max-length-allowed (tr "auth.name.too-long"))
(fm/validate-not-empty :subject (tr "auth.name.not-all-space"))])
@ -59,49 +62,101 @@
(->> (rp/cmd! :send-user-feedback data)
(rx/subs on-succes on-error)))))]
[:& fm/form {:class "feedback-form"
:on-submit on-submit
:form form}
(if new-css-system
[:& fm/form {:class "feedback-form"
:on-submit on-submit
:form form}
;; --- Feedback section
[:h2.field-title (tr "feedback.title")]
[:p.field-text (tr "feedback.subtitle")]
;; --- Feedback section
[:h2 {:class (stl/css :field-title)} (tr "feedback.title")]
[:p {:class (stl/css :field-text)} (tr "feedback.subtitle")]
[:div.fields-row
[:& fm/input {:label (tr "feedback.subject")
:name :subject}]]
[:div.fields-row
[:& fm/textarea
{:label (tr "feedback.description")
:name :content
:rows 5}]]
[:div {:class (stl/css :fields-row)}
[:& fm/input {:label (tr "feedback.subject")
:name :subject}]]
[:div {:class (stl/css :fields-row :description)}
[:& fm/textarea
{:label (tr "feedback.description")
:name :content
:rows 5}]]
[:> fm/submit-button*
{:label (if @loading (tr "labels.sending") (tr "labels.send"))
:disabled @loading}]
[:> fm/submit-button*
{:label (if @loading (tr "labels.sending") (tr "labels.send"))
:disabled @loading}]
[:hr]
[:hr]
[:h2.field-title (tr "feedback.discourse-title")]
[:p.field-text (tr "feedback.discourse-subtitle1")]
[:h2 {:class (stl/css :field-title)} (tr "feedback.discourse-title")]
[:p {:class (stl/css :field-text)} (tr "feedback.discourse-subtitle1")]
[:a.btn-secondary.btn-large
{:href "https://community.penpot.app" :target "_blank"}
(tr "feedback.discourse-go-to")]
[:hr]
[:a
{:class (stl/css :btn-secondary :btn-large)
:href "https://community.penpot.app"
:target "_blank"}
(tr "feedback.discourse-go-to")]
[:hr]
[:h2.field-title (tr "feedback.twitter-title")]
[:p.field-text (tr "feedback.twitter-subtitle1")]
[:h2 {:class (stl/css :field-title)} (tr "feedback.twitter-title")]
[:p {:class (stl/css :field-text)} (tr "feedback.twitter-subtitle1")]
[:a.btn-secondary.btn-large
{:href "https://twitter.com/penpotapp" :target "_blank"}
(tr "feedback.twitter-go-to")]]))
[:a
{:class (stl/css :btn-secondary :btn-large)
:href "https://twitter.com/penpotapp"
:target "_blank"}
(tr "feedback.twitter-go-to")]]
;; OLD
[:& fm/form {:class "feedback-form"
:on-submit on-submit
:form form}
;; --- Feedback section
[:h2.field-title (tr "feedback.title")]
[:p.field-text (tr "feedback.subtitle")]
[:div.fields-row
[:& fm/input {:label (tr "feedback.subject")
:name :subject}]]
[:div.fields-row
[:& fm/textarea
{:label (tr "feedback.description")
:name :content
:rows 5}]]
[:> fm/submit-button*
{:label (if @loading (tr "labels.sending") (tr "labels.send"))
:disabled @loading}]
[:hr]
[:h2.field-title (tr "feedback.discourse-title")]
[:p.field-text (tr "feedback.discourse-subtitle1")]
[:a.btn-secondary.btn-large
{:href "https://community.penpot.app" :target "_blank"}
(tr "feedback.discourse-go-to")]
[:hr]
[:h2.field-title (tr "feedback.twitter-title")]
[:p.field-text (tr "feedback.twitter-subtitle1")]
[:a.btn-secondary.btn-large
{:href "https://twitter.com/penpotapp" :target "_blank"}
(tr "feedback.twitter-go-to")]])))
(mf/defc feedback-page
[]
(mf/use-effect
#(dom/set-html-title (tr "title.settings.feedback")))
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
(mf/use-effect
#(dom/set-html-title (tr "title.settings.feedback")))
(if new-css-system
[:div {:class (stl/css :dashboard-settings)}
[:div {:class (stl/css :form-container)}
[:& feedback-form]]]
;; OLD
[:div.dashboard-settings
[:div.form-container
[:& feedback-form]]])))
[:div.dashboard-settings
[:div.form-container
[:& feedback-form]]])

690
frontend/src/app/main/ui/settings/feedback.scss Normal file
View file

@ -0,0 +1,690 @@
@import "common/dependencies/colors";
$br2: 2px;
$br3: 3px;
$br4: 4px;
$br8: 8px;
$br6: 6px;
$fs12: 0.75rem;
$fs14: 0.875rem;
$fs16: 1rem;
$fs18: 1.125rem;
$fs22: 1.375rem;
$fs24: 1.5rem;
$fs36: 2.25rem;
$fw400: 400;
$fw500: 500;
$fw600: 600;
$fw700: 700;
$lh-088: 0.88;
$lh-115: 1.15; // original $title-lh-sm
$lh-500: 5; // original $title-lh-sm
$size-1: 0.25rem;
$size-2: 0.5rem;
$size-4: 1rem;
$size-5: 1.5rem;
$size-6: 2rem;
.form-container,
.generic-form {
display: flex;
justify-content: center;
flex-direction: column;
.forms-container {
display: flex;
margin-top: 40px;
width: 536px;
justify-content: center;
}
form {
display: flex;
flex-direction: column;
// flex-basis: 368px;
}
.fields-row {
margin-bottom: 20px;
flex-direction: column;
.options {
display: flex;
justify-content: flex-end;
font-size: $fs14;
margin-top: 13px;
}
}
.field {
margin-bottom: 20px;
}
h1 {
font-size: $fs36;
color: #2c233e;
margin-bottom: 20px;
}
.subtitle {
font-size: $fs24;
color: #2c233e;
margin-bottom: 20px;
}
.notification-icon {
justify-content: center;
display: flex;
margin-bottom: 3rem;
svg {
fill: $color-gray-60;
height: 40%;
width: 40%;
}
}
.notification-text {
font-size: $fs18;
color: $color-gray-60;
margin-bottom: 20px;
}
.notification-text-email {
background: $color-gray-10;
border-radius: $br3;
color: $color-gray-60;
font-size: $fs18;
font-weight: $fw500;
margin: 1.5rem 0 2.5rem 0;
padding: 1rem;
text-align: center;
}
h2 {
font-size: $fs24;
color: $color-gray-60;
// height: 40px;
display: flex;
align-items: center;
}
a {
&:hover {
text-decoration: underline;
}
}
p {
color: $color-gray-60;
}
hr {
border-color: $color-gray-20;
}
}
.dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: $color-white;
height: 63px;
padding: $size-1 $size-4 $size-1 $size-2;
position: relative;
z-index: 10;
user-select: none;
&.team {
display: grid;
grid-template-columns: 20% 1fr 20%;
}
.element-name {
margin-right: $size-2;
}
.btn-secondary {
flex-shrink: 0;
z-index: 10;
height: 32px;
svg {
height: 16px;
width: 16px;
}
}
svg {
fill: $color-black;
height: 14px;
margin-right: $size-1;
width: 14px;
}
nav {
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 1;
ul {
display: flex;
font-size: $fs14;
justify-content: center;
margin: 0;
}
li {
a {
display: flex;
align-items: center;
flex-basis: 140px;
border-bottom: 3px solid transparent;
color: $color-gray-30;
height: 40px;
padding: $size-1 $size-5;
font-weight: $fw400;
&:hover {
color: $color-black;
text-decoration: none;
}
}
&.active {
a {
color: $color-black;
border-color: $color-primary;
}
}
}
}
.dashboard-title {
display: flex;
align-items: center;
margin-left: 13px;
h1 {
color: $color-black;
display: flex;
flex-shrink: 0;
font-size: $fs22;
font-weight: $fw600;
z-index: 10;
user-select: all;
}
.context-menu.is-open {
margin-top: 10px;
}
}
.icon {
display: flex;
align-items: center;
cursor: pointer;
margin-left: $size-2;
z-index: 10;
svg {
fill: $color-gray-40;
width: 15px;
height: 15px;
&:hover {
fill: $color-primary-dark;
}
}
}
.dashboard-buttons {
display: flex;
justify-content: flex-end;
align-items: center;
}
.dashboard-header-actions {
display: flex;
}
.pin-icon {
margin: 0 $size-2 0 $size-5;
background-color: transparent;
border: none;
svg {
fill: $color-gray-20;
}
&.active {
svg {
fill: $color-gray-50;
}
}
}
}
.dashboard-settings {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
.form-container {
margin-top: 50px;
display: flex;
max-width: 368px;
margin-bottom: 2rem;
width: 100%;
&.two-columns {
max-width: 536px;
justify-content: space-between;
flex-direction: row;
}
h2 {
margin-bottom: 1rem;
}
}
.avatar-form {
display: flex;
flex-direction: column;
width: 120px;
min-width: 120px;
img {
border-radius: 50%;
flex-shrink: 0;
height: 120px;
margin-right: $size-4;
width: 120px;
}
.image-change-field {
position: relative;
width: 120px;
height: 120px;
.update-overlay {
opacity: 0;
cursor: pointer;
position: absolute;
width: 121px;
height: 121px;
border-radius: 50%;
font-size: $fs24;
color: $color-white;
line-height: $lh-500; // Original value was 120px; 120px/24px = 500% => $lh-500
text-align: center;
background: $color-primary-dark;
z-index: 14;
}
input[type="file"] {
width: 120px;
height: 120px;
position: absolute;
opacity: 0;
cursor: pointer;
top: 0;
z-index: 15;
}
&:hover {
.update-overlay {
opacity: 0.8;
}
}
}
}
.profile-form {
display: flex;
flex-direction: column;
max-width: 368px;
width: 100%;
.newsletter-subs {
border-bottom: 1px solid $color-gray-20;
border-top: 1px solid $color-gray-20;
padding: 30px 0;
margin-bottom: 31px;
.newsletter-title {
font-family: "worksans", sans-serif;
color: $color-gray-30;
font-size: $fs14;
}
label {
font-family: "worksans", sans-serif;
color: $color-gray-60;
font-size: $fs12;
margin-right: -17px;
margin-bottom: 13px;
}
.info {
font-family: "worksans", sans-serif;
color: $color-gray-30;
font-size: $fs12;
margin-bottom: 8px;
}
.input-checkbox label {
align-items: flex-start;
}
}
}
.options-form,
.password-form {
h2 {
font-size: $fs14;
margin-bottom: 20px;
}
}
}
.dashboard-access-tokens {
display: flex;
flex-direction: column;
align-items: center;
.access-tokens-hero-container {
max-width: 1000px;
width: 100%;
display: flex;
flex-direction: column;
}
.access-tokens-hero {
font-size: $fs14;
padding: $size-6;
background-color: $color-white;
margin-top: $size-6;
display: flex;
justify-content: space-between;
.desc {
width: 80%;
color: $color-gray-40;
h2 {
margin-bottom: $size-4;
color: $color-black;
}
p {
font-size: $fs16;
}
}
.btn-primary {
flex-shrink: 0;
}
}
.access-tokens-empty {
text-align: center;
max-width: 1000px;
width: 100%;
padding: $size-6;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px dashed $color-gray-20;
color: $color-gray-40;
margin-top: 12px;
min-height: 136px;
}
.table-row {
background-color: $color-white;
display: grid;
grid-template-columns: 1fr 43% 12px;
height: 63px;
&:not(:first-child) {
margin-top: 8px;
}
}
.table-field {
&.name {
color: $color-gray-60;
}
&.expiration-date {
color: $color-gray-40;
font-size: $fs14;
.content {
padding: 2px 5px;
&.expired {
background-color: $color-warning-lighter;
border-radius: $br4;
color: $color-gray-40;
}
}
}
&.access-token-created {
word-break: break-all;
}
&.actions {
position: relative;
}
}
}
.access-tokens-modal {
.action-buttons {
gap: 10px;
.cancel-button {
border: 1px solid $color-gray-30;
background: $color-canvas;
border-radius: $br3;
padding: 0.5rem 1rem;
cursor: pointer;
margin-right: 8px;
&:hover {
background: $color-gray-20;
}
}
}
.access-token-created {
position: relative;
word-break: break-all;
.custom-input input {
background-color: $color-success-lighter;
border: 0;
padding: 0 0 0 15px;
}
}
.help-icon {
border: none;
height: 40px;
width: 40px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
background-color: $color-success-lighter;
svg {
fill: $color-gray-30;
}
&:hover {
svg {
fill: $color-gray-60;
}
}
}
.token-created-info {
font-size: $fs12;
color: $color-gray-40;
}
}
.dashboard-settings {
a {
color: $df-secondary;
}
.form-container {
width: 800px;
margin: 80px auto auto 120px;
form {
width: 468px;
.fields-row {
.custom-input,
.custom-select {
flex-direction: column-reverse;
label {
position: relative;
text-transform: uppercase;
color: $df-primary;
font-size: 11px;
margin-bottom: 12px;
margin-left: -4px;
}
input,
select {
background-color: $db-tertiary;
border-radius: 8px;
border-color: transparent;
color: $df-primary;
padding: 0 15px;
&:focus {
outline: 1px solid $da-primary;
}
::placeholder {
color: $df-secondary;
}
}
.help-icon {
bottom: 12px;
top: auto;
svg {
fill: $df-secondary;
}
}
&.disabled {
input {
background-color: $db-primary;
border-color: $db-cuaternary;
color: $df-secondary;
}
}
.input-container {
background-color: $db-tertiary;
border-radius: 8px;
border-color: transparent;
margin-top: 22px;
.main-content {
label {
position: absolute;
top: -24px;
}
span {
color: $df-primary;
}
}
&:focus {
border: 1px solid $da-primary;
}
}
textarea {
border-radius: 8px;
padding: 12px 14px;
background-color: $db-tertiary;
color: $df-primary;
border: none;
&:focus {
outline: 1px solid $da-primary;
}
}
}
}
.field-title {
color: $df-primary;
}
.field-title:not(:first-child) {
margin-top: 64px;
}
.field-text {
color: $df-secondary;
}
button,
.btn-secondary {
width: 100%;
font-size: 11px;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
&:hover {
color: $da-primary;
background-color: $db-cuaternary;
}
}
hr {
display: none;
}
}
.links {
margin-top: 12px;
}
}
}
.btn-secondary {
background-color: $db-tertiary;
text-transform: uppercase;
border: none;
color: $df-primary;
border-radius: 8px;
font-size: 0.75rem;
padding: 0 1rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
height: 40px;
&:hover {
background-color: $db-cuaternary;
color: $da-primary;
svg {
fill: $da-primary;
}
}
}
.description {
:global(.custom-input label) {
position: initial;
margin-bottom: 8px;
}
:global(.custom-input textarea) {
background-color: $color-white;
background-color: $db-tertiary;
border-radius: 8px;
border: none;
color: $df-primary;
font-size: $fs14;
margin: 0;
padding: 15px 15px 0 15px;
width: 100%;
&:focus {
outline: 1px solid $da-primary;
}
}
}

85
frontend/src/app/main/ui/settings/options.cljs
View file

@ -5,14 +5,15 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.settings.options
(:require-macros [app.main.style :as stl])
(:require
[app.common.spec :as us]
[app.main.data.messages :as dm]
[app.main.data.users :as du]
[app.main.features :as features]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.forms :as fm]
[app.main.ui.context :as ctx]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[cljs.spec.alpha :as s]
@ -37,48 +38,78 @@
(mf/defc options-form
{::mf/wrap-props false}
[]
(let [profile (mf/deref refs/profile)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
profile (mf/deref refs/profile)
initial (mf/with-memo [profile]
(update profile :lang #(or % "")))
form (fm/use-form :spec ::options-form
:initial initial)
new-css-system (features/use-feature "styles/v2")]
:initial initial)]
[:& fm/form {:class "options-form"
:on-submit on-submit
:form form}
(if new-css-system
[:& fm/form {:class (stl/css :options-form)
:on-submit on-submit
:form form}
[:h2 (tr "labels.language")]
[:h2 (tr "labels.language")]
[:div.fields-row
[:& fm/select {:options (into [{:label "Auto (browser)" :value ""}]
i18n/supported-locales)
:label (tr "dashboard.select-ui-language")
:default ""
:name :lang
:data-test "setting-lang"}]]
[:div {:class (stl/css :fields-row)}
[:& fm/select {:options (into [{:label "Auto (browser)" :value ""}]
i18n/supported-locales)
:label (tr "dashboard.select-ui-language")
:default ""
:name :lang
:data-test "setting-lang"}]]
(when new-css-system
[:h2 (tr "dashboard.theme-change")]
[:div.fields-row
[:div {:class (stl/css :fields-row)}
[:& fm/select {:label (tr "dashboard.select-ui-theme")
:name :theme
:default "default"
:options [{:label "Penpot Dark (default)" :value "default"}
{:label "Penpot Light" :value "light"}]
:data-test "setting-theme"}]])
[:> fm/submit-button*
{:label (tr "dashboard.update-settings")
:data-test "submit-lang-change"}]]))
:data-test "setting-theme"}]]
[:> fm/submit-button*
{:label (tr "dashboard.update-settings")
:data-test "submit-lang-change"}]]
;; OLD
[:& fm/form {:class "options-form"
:on-submit on-submit
:form form}
[:h2 (tr "labels.language")]
[:div.fields-row
[:& fm/select {:options (into [{:label "Auto (browser)" :value ""}]
i18n/supported-locales)
:label (tr "dashboard.select-ui-language")
:default ""
:name :lang
:data-test "setting-lang"}]]
[:> fm/submit-button*
{:label (tr "dashboard.update-settings")
:data-test "submit-lang-change"}]])))
;; --- Password Page
(mf/defc options-page
[]
(mf/use-effect
#(dom/set-html-title (tr "title.settings.options")))
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
(mf/use-effect
#(dom/set-html-title (tr "title.settings.options")))
(if new-css-system
[:div {:class (stl/css :dashboard-settings)}
[:div
{:class (stl/css :form-container)
:data-test "settings-form"}
[:& options-form {}]]]
;; OLD
[:div.dashboard-settings
[:div.form-container
{:data-test "settings-form"}
[:& options-form {}]]])))
[:div.dashboard-settings
[:div.form-container
{:data-test "settings-form"}
[:& options-form {}]]])

642
frontend/src/app/main/ui/settings/options.scss Normal file
View file

@ -0,0 +1,642 @@
@import "common/dependencies/colors";
$br3: 3px;
$br4: 4px;
$br8: 8px;
$br6: 6px;
$fs12: 0.75rem;
$fs14: 0.875rem;
$fs16: 1rem;
$fs18: 1.125rem;
$fs22: 1.375rem;
$fs24: 1.5rem;
$fs36: 2.25rem;
$fw400: 400;
$fw500: 500;
$fw600: 600;
$fw700: 700;
$lh-088: 0.88;
$lh-115: 1.15; // original $title-lh-sm
$lh-500: 5; // original $title-lh-sm
$size-1: 0.25rem;
$size-2: 0.5rem;
$size-4: 1rem;
$size-5: 1.5rem;
$size-6: 2rem;
.form-container,
.generic-form {
display: flex;
justify-content: center;
flex-direction: column;
.forms-container {
display: flex;
margin-top: 40px;
width: 536px;
justify-content: center;
}
form {
display: flex;
flex-direction: column;
// flex-basis: 368px;
}
.fields-row {
margin-bottom: 20px;
flex-direction: column;
.options {
display: flex;
justify-content: flex-end;
font-size: $fs14;
margin-top: 13px;
}
}
.field {
margin-bottom: 20px;
}
h1 {
font-size: $fs36;
color: #2c233e;
margin-bottom: 20px;
}
.subtitle {
font-size: $fs24;
color: #2c233e;
margin-bottom: 20px;
}
.notification-icon {
justify-content: center;
display: flex;
margin-bottom: 3rem;
svg {
fill: $color-gray-60;
height: 40%;
width: 40%;
}
}
.notification-text {
font-size: $fs18;
color: $color-gray-60;
margin-bottom: 20px;
}
.notification-text-email {
background: $color-gray-10;
border-radius: $br3;
color: $color-gray-60;
font-size: $fs18;
font-weight: $fw500;
margin: 1.5rem 0 2.5rem 0;
padding: 1rem;
text-align: center;
}
h2 {
font-size: $fs24;
color: $df-primary;
// height: 40px;
display: flex;
align-items: center;
}
a {
&:hover {
text-decoration: underline;
}
}
p {
color: $color-gray-60;
}
hr {
border-color: $color-gray-20;
}
}
.dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: $color-white;
height: 63px;
padding: $size-1 $size-4 $size-1 $size-2;
position: relative;
z-index: 10;
user-select: none;
&.team {
display: grid;
grid-template-columns: 20% 1fr 20%;
}
.element-name {
margin-right: $size-2;
}
.btn-secondary {
flex-shrink: 0;
z-index: 10;
height: 32px;
svg {
height: 16px;
width: 16px;
}
}
svg {
fill: $color-black;
height: 14px;
margin-right: $size-1;
width: 14px;
}
nav {
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 1;
ul {
display: flex;
font-size: $fs14;
justify-content: center;
margin: 0;
}
li {
a {
display: flex;
align-items: center;
flex-basis: 140px;
border-bottom: 3px solid transparent;
color: $color-gray-30;
height: 40px;
padding: $size-1 $size-5;
font-weight: $fw400;
&:hover {
color: $color-black;
text-decoration: none;
}
}
&.active {
a {
color: $color-black;
border-color: $color-primary;
}
}
}
}
.dashboard-title {
display: flex;
align-items: center;
margin-left: 13px;
h1 {
color: $color-black;
display: flex;
flex-shrink: 0;
font-size: $fs22;
font-weight: $fw600;
z-index: 10;
user-select: all;
}
.context-menu.is-open {
margin-top: 10px;
}
}
.icon {
display: flex;
align-items: center;
cursor: pointer;
margin-left: $size-2;
z-index: 10;
svg {
fill: $color-gray-40;
width: 15px;
height: 15px;
&:hover {
fill: $color-primary-dark;
}
}
}
.dashboard-buttons {
display: flex;
justify-content: flex-end;
align-items: center;
}
.dashboard-header-actions {
display: flex;
}
.pin-icon {
margin: 0 $size-2 0 $size-5;
background-color: transparent;
border: none;
svg {
fill: $color-gray-20;
}
&.active {
svg {
fill: $color-gray-50;
}
}
}
}
.dashboard-settings {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
.form-container {
margin-top: 50px;
display: flex;
max-width: 368px;
margin-bottom: 2rem;
width: 100%;
&.two-columns {
max-width: 536px;
justify-content: space-between;
flex-direction: row;
}
h2 {
margin-bottom: 1rem;
}
}
.avatar-form {
display: flex;
flex-direction: column;
width: 120px;
min-width: 120px;
img {
border-radius: 50%;
flex-shrink: 0;
height: 120px;
margin-right: $size-4;
width: 120px;
}
.image-change-field {
position: relative;
width: 120px;
height: 120px;
.update-overlay {
opacity: 0;
cursor: pointer;
position: absolute;
width: 121px;
height: 121px;
border-radius: 50%;
font-size: $fs24;
color: $color-white;
line-height: $lh-500; // Original value was 120px; 120px/24px = 500% => $lh-500
text-align: center;
background: $color-primary-dark;
z-index: 14;
}
input[type="file"] {
width: 120px;
height: 120px;
position: absolute;
opacity: 0;
cursor: pointer;
top: 0;
z-index: 15;
}
&:hover {
.update-overlay {
opacity: 0.8;
}
}
}
}
.profile-form {
display: flex;
flex-direction: column;
max-width: 368px;
width: 100%;
.newsletter-subs {
border-bottom: 1px solid $color-gray-20;
border-top: 1px solid $color-gray-20;
padding: 30px 0;
margin-bottom: 31px;
.newsletter-title {
font-family: "worksans", sans-serif;
color: $color-gray-30;
font-size: $fs14;
}
label {
font-family: "worksans", sans-serif;
color: $color-gray-60;
font-size: $fs12;
margin-right: -17px;
margin-bottom: 13px;
}
.info {
font-family: "worksans", sans-serif;
color: $color-gray-30;
font-size: $fs12;
margin-bottom: 8px;
}
.input-checkbox label {
align-items: flex-start;
}
}
}
.options-form,
.password-form {
h2 {
font-size: $fs14;
margin-bottom: 20px;
}
}
}
.dashboard-access-tokens {
display: flex;
flex-direction: column;
align-items: center;
.access-tokens-hero-container {
max-width: 1000px;
width: 100%;
display: flex;
flex-direction: column;
}
.access-tokens-hero {
font-size: $fs14;
padding: $size-6;
background-color: $color-white;
margin-top: $size-6;
display: flex;
justify-content: space-between;
.desc {
width: 80%;
color: $color-gray-40;
h2 {
margin-bottom: $size-4;
color: $color-black;
}
p {
font-size: $fs16;
}
}
.btn-primary {
flex-shrink: 0;
}
}
.access-tokens-empty {
text-align: center;
max-width: 1000px;
width: 100%;
padding: $size-6;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px dashed $color-gray-20;
color: $color-gray-40;
margin-top: 12px;
min-height: 136px;
}
.table-row {
background-color: $color-white;
display: grid;
grid-template-columns: 1fr 43% 12px;
height: 63px;
&:not(:first-child) {
margin-top: 8px;
}
}
.table-field {
&.name {
color: $color-gray-60;
}
&.expiration-date {
color: $color-gray-40;
font-size: $fs14;
.content {
padding: 2px 5px;
&.expired {
background-color: $color-warning-lighter;
border-radius: $br4;
color: $color-gray-40;
}
}
}
&.access-token-created {
word-break: break-all;
}
&.actions {
position: relative;
}
}
}
.access-tokens-modal {
.action-buttons {
gap: 10px;
.cancel-button {
border: 1px solid $color-gray-30;
background: $color-canvas;
border-radius: $br3;
padding: 0.5rem 1rem;
cursor: pointer;
margin-right: 8px;
&:hover {
background: $color-gray-20;
}
}
}
.access-token-created {
position: relative;
word-break: break-all;
.custom-input input {
background-color: $color-success-lighter;
border: 0;
padding: 0 0 0 15px;
}
}
.help-icon {
border: none;
height: 40px;
width: 40px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
background-color: $color-success-lighter;
svg {
fill: $color-gray-30;
}
&:hover {
svg {
fill: $color-gray-60;
}
}
}
.token-created-info {
font-size: $fs12;
color: $color-gray-40;
}
}
.dashboard-settings {
a {
color: $df-secondary;
}
.form-container {
width: 800px;
margin: 80px auto auto 120px;
form {
width: 468px;
.fields-row {
.custom-input,
.custom-select {
flex-direction: column-reverse;
label {
position: relative;
text-transform: uppercase;
color: $df-primary;
font-size: 11px;
margin-bottom: 12px;
margin-left: -4px;
}
input,
select {
background-color: $db-tertiary;
border-radius: 8px;
border-color: transparent;
color: $df-primary;
padding: 0 15px;
&:focus {
outline: 1px solid $da-primary;
}
::placeholder {
color: $df-secondary;
}
}
.help-icon {
bottom: 12px;
top: auto;
svg {
fill: $df-secondary;
}
}
&.disabled {
input {
background-color: $db-primary;
border-color: $db-cuaternary;
color: $df-secondary;
}
}
.input-container {
background-color: $db-tertiary;
border-radius: 8px;
border-color: transparent;
margin-top: 22px;
.main-content {
label {
position: absolute;
top: -24px;
}
span {
color: $df-primary;
}
}
&:focus {
border: 1px solid $da-primary;
}
}
textarea {
border-radius: 8px;
padding: 12px 14px;
background-color: $db-tertiary;
color: $df-primary;
border: none;
&:focus {
outline: 1px solid $da-primary;
}
}
}
}
.field-title {
color: $df-primary;
}
.field-title:not(:first-child) {
margin-top: 64px;
}
.field-text {
color: $df-secondary;
}
button,
.btn-secondary {
width: 100%;
font-size: 11px;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
&:hover {
color: $da-primary;
background-color: $db-cuaternary;
}
}
hr {
display: none;
}
}
.links {
margin-top: 12px;
}
}
}

98
frontend/src/app/main/ui/settings/password.cljs
View file

@ -5,12 +5,14 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.settings.password
(:require-macros [app.main.style :as stl])
(:require
[app.common.spec :as us]
[app.main.data.messages :as dm]
[app.main.data.users :as udu]
[app.main.store :as st]
[app.main.ui.components.forms :as fm]
[app.main.ui.context :as ctx]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [t tr]]
[cljs.spec.alpha :as s]
@ -69,47 +71,85 @@
(mf/defc password-form
[{:keys [locale] :as props}]
(let [initial (mf/use-memo (constantly {:password-old nil}))
(let [new-css-system (mf/use-ctx ctx/new-css-system)
initial (mf/use-memo (constantly {:password-old nil}))
form (fm/use-form :spec ::password-form
:validators [(fm/validate-not-all-spaces :password-old (tr "auth.password-not-empty"))
(fm/validate-not-empty :password-1 (tr "auth.password-not-empty"))
(fm/validate-not-empty :password-2 (tr "auth.password-not-empty"))
password-equality]
:initial initial)]
[:& fm/form {:class "password-form"
:on-submit on-submit
:form form}
[:h2 (t locale "dashboard.password-change")]
[:div.fields-row
[:& fm/input
{:type "password"
:name :password-old
:auto-focus? true
:label (t locale "labels.old-password")}]]
(if new-css-system
[:& fm/form {:class (stl/css :password-form)
:on-submit on-submit
:form form}
[:h2 (t locale "dashboard.password-change")]
[:div {:class (stl/css :fields-row)}
[:& fm/input
{:type "password"
:name :password-old
:auto-focus? true
:label (t locale "labels.old-password")}]]
[:div.fields-row
[:& fm/input
{:type "password"
:name :password-1
:label (t locale "labels.new-password")}]]
[:div {:class (stl/css :fields-row)}
[:& fm/input
{:type "password"
:name :password-1
:label (t locale "labels.new-password")}]]
[:div.fields-row
[:& fm/input
{:type "password"
:name :password-2
:label (t locale "labels.confirm-password")}]]
[:div {:class (stl/css :fields-row)}
[:& fm/input
{:type "password"
:name :password-2
:label (t locale "labels.confirm-password")}]]
[:> fm/submit-button*
{:label (t locale "dashboard.update-settings")
:data-test "submit-password"}]]))
[:> fm/submit-button*
{:label (t locale "dashboard.update-settings")
:data-test "submit-password"}]]
;; OLD
[:& fm/form {:class "password-form"
:on-submit on-submit
:form form}
[:h2 (t locale "dashboard.password-change")]
[:div.fields-row
[:& fm/input
{:type "password"
:name :password-old
:auto-focus? true
:label (t locale "labels.old-password")}]]
[:div.fields-row
[:& fm/input
{:type "password"
:name :password-1
:label (t locale "labels.new-password")}]]
[:div.fields-row
[:& fm/input
{:type "password"
:name :password-2
:label (t locale "labels.confirm-password")}]]
[:> fm/submit-button*
{:label (t locale "dashboard.update-settings")
:data-test "submit-password"}]])))
;; --- Password Page
(mf/defc password-page
[{:keys [locale]}]
(mf/use-effect
#(dom/set-html-title (tr "title.settings.password")))
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
(mf/use-effect
#(dom/set-html-title (tr "title.settings.password")))
(if new-css-system
[:section {:class (stl/css :dashboard-settings :form-container)}
[:div {:class (stl/css :form-container)}
[:& password-form {:locale locale}]]]
;; old
[:section.dashboard-settings.form-container
[:div.form-container
[:& password-form {:locale locale}]]])))
[:section.dashboard-settings.form-container
[:div.form-container
[:& password-form {:locale locale}]]])

642
frontend/src/app/main/ui/settings/password.scss Normal file
View file

@ -0,0 +1,642 @@
@import "common/dependencies/colors";
$br3: 3px;
$br4: 4px;
$br8: 8px;
$br6: 6px;
$fs12: 0.75rem;
$fs14: 0.875rem;
$fs16: 1rem;
$fs18: 1.125rem;
$fs22: 1.375rem;
$fs24: 1.5rem;
$fs36: 2.25rem;
$fw400: 400;
$fw500: 500;
$fw600: 600;
$fw700: 700;
$lh-088: 0.88;
$lh-115: 1.15; // original $title-lh-sm
$lh-500: 5; // original $title-lh-sm
$size-1: 0.25rem;
$size-2: 0.5rem;
$size-4: 1rem;
$size-5: 1.5rem;
$size-6: 2rem;
.form-container,
.generic-form {
display: flex;
justify-content: center;
flex-direction: column;
.forms-container {
display: flex;
margin-top: 40px;
width: 536px;
justify-content: center;
}
form {
display: flex;
flex-direction: column;
// flex-basis: 368px;
}
.fields-row {
margin-bottom: 20px;
flex-direction: column;
.options {
display: flex;
justify-content: flex-end;
font-size: $fs14;
margin-top: 13px;
}
}
.field {
margin-bottom: 20px;
}
h1 {
font-size: $fs36;
color: #2c233e;
margin-bottom: 20px;
}
.subtitle {
font-size: $fs24;
color: #2c233e;
margin-bottom: 20px;
}
.notification-icon {
justify-content: center;
display: flex;
margin-bottom: 3rem;
svg {
fill: $color-gray-60;
height: 40%;
width: 40%;
}
}
.notification-text {
font-size: $fs18;
color: $color-gray-60;
margin-bottom: 20px;
}
.notification-text-email {
background: $color-gray-10;
border-radius: $br3;
color: $color-gray-60;
font-size: $fs18;
font-weight: $fw500;
margin: 1.5rem 0 2.5rem 0;
padding: 1rem;
text-align: center;
}
h2 {
font-size: $fs24;
color: $color-gray-60;
// height: 40px;
display: flex;
align-items: center;
}
a {
&:hover {
text-decoration: underline;
}
}
p {
color: $color-gray-60;
}
hr {
border-color: $color-gray-20;
}
}
.dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: $color-white;
height: 63px;
padding: $size-1 $size-4 $size-1 $size-2;
position: relative;
z-index: 10;
user-select: none;
&.team {
display: grid;
grid-template-columns: 20% 1fr 20%;
}
.element-name {
margin-right: $size-2;
}
.btn-secondary {
flex-shrink: 0;
z-index: 10;
height: 32px;
svg {
height: 16px;
width: 16px;
}
}
svg {
fill: $color-black;
height: 14px;
margin-right: $size-1;
width: 14px;
}
nav {
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 1;
ul {
display: flex;
font-size: $fs14;
justify-content: center;
margin: 0;
}
li {
a {
display: flex;
align-items: center;
flex-basis: 140px;
border-bottom: 3px solid transparent;
color: $color-gray-30;
height: 40px;
padding: $size-1 $size-5;
font-weight: $fw400;
&:hover {
color: $color-black;
text-decoration: none;
}
}
&.active {
a {
color: $color-black;
border-color: $color-primary;
}
}
}
}
.dashboard-title {
display: flex;
align-items: center;
margin-left: 13px;
h1 {
color: $color-black;
display: flex;
flex-shrink: 0;
font-size: $fs22;
font-weight: $fw600;
z-index: 10;
user-select: all;
}
.context-menu.is-open {
margin-top: 10px;
}
}
.icon {
display: flex;
align-items: center;
cursor: pointer;
margin-left: $size-2;
z-index: 10;
svg {
fill: $color-gray-40;
width: 15px;
height: 15px;
&:hover {
fill: $color-primary-dark;
}
}
}
.dashboard-buttons {
display: flex;
justify-content: flex-end;
align-items: center;
}
.dashboard-header-actions {
display: flex;
}
.pin-icon {
margin: 0 $size-2 0 $size-5;
background-color: transparent;
border: none;
svg {
fill: $color-gray-20;
}
&.active {
svg {
fill: $color-gray-50;
}
}
}
}
.dashboard-settings {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
.form-container {
margin-top: 50px;
display: flex;
max-width: 368px;
margin-bottom: 2rem;
width: 100%;
&.two-columns {
max-width: 536px;
justify-content: space-between;
flex-direction: row;
}
h2 {
margin-bottom: 1rem;
}
}
.avatar-form {
display: flex;
flex-direction: column;
width: 120px;
min-width: 120px;
img {
border-radius: 50%;
flex-shrink: 0;
height: 120px;
margin-right: $size-4;
width: 120px;
}
.image-change-field {
position: relative;
width: 120px;
height: 120px;
.update-overlay {
opacity: 0;
cursor: pointer;
position: absolute;
width: 121px;
height: 121px;
border-radius: 50%;
font-size: $fs24;
color: $color-white;
line-height: $lh-500; // Original value was 120px; 120px/24px = 500% => $lh-500
text-align: center;
background: $color-primary-dark;
z-index: 14;
}
input[type="file"] {
width: 120px;
height: 120px;
position: absolute;
opacity: 0;
cursor: pointer;
top: 0;
z-index: 15;
}
&:hover {
.update-overlay {
opacity: 0.8;
}
}
}
}
.profile-form {
display: flex;
flex-direction: column;
max-width: 368px;
width: 100%;
.newsletter-subs {
border-bottom: 1px solid $color-gray-20;
border-top: 1px solid $color-gray-20;
padding: 30px 0;
margin-bottom: 31px;
.newsletter-title {
font-family: "worksans", sans-serif;
color: $color-gray-30;
font-size: $fs14;
}
label {
font-family: "worksans", sans-serif;
color: $color-gray-60;
font-size: $fs12;
margin-right: -17px;
margin-bottom: 13px;
}
.info {
font-family: "worksans", sans-serif;
color: $color-gray-30;
font-size: $fs12;
margin-bottom: 8px;
}
.input-checkbox label {
align-items: flex-start;
}
}
}
.options-form,
.password-form {
h2 {
font-size: $fs14;
margin-bottom: 20px;
}
}
}
.dashboard-access-tokens {
display: flex;
flex-direction: column;
align-items: center;
.access-tokens-hero-container {
max-width: 1000px;
width: 100%;
display: flex;
flex-direction: column;
}
.access-tokens-hero {
font-size: $fs14;
padding: $size-6;
background-color: $color-white;
margin-top: $size-6;
display: flex;
justify-content: space-between;
.desc {
width: 80%;
color: $color-gray-40;
h2 {
margin-bottom: $size-4;
color: $color-black;
}
p {
font-size: $fs16;
}
}
.btn-primary {
flex-shrink: 0;
}
}
.access-tokens-empty {
text-align: center;
max-width: 1000px;
width: 100%;
padding: $size-6;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px dashed $color-gray-20;
color: $color-gray-40;
margin-top: 12px;
min-height: 136px;
}
.table-row {
background-color: $color-white;
display: grid;
grid-template-columns: 1fr 43% 12px;
height: 63px;
&:not(:first-child) {
margin-top: 8px;
}
}
.table-field {
&.name {
color: $color-gray-60;
}
&.expiration-date {
color: $color-gray-40;
font-size: $fs14;
.content {
padding: 2px 5px;
&.expired {
background-color: $color-warning-lighter;
border-radius: $br4;
color: $color-gray-40;
}
}
}
&.access-token-created {
word-break: break-all;
}
&.actions {
position: relative;
}
}
}
.access-tokens-modal {
.action-buttons {
gap: 10px;
.cancel-button {
border: 1px solid $color-gray-30;
background: $color-canvas;
border-radius: $br3;
padding: 0.5rem 1rem;
cursor: pointer;
margin-right: 8px;
&:hover {
background: $color-gray-20;
}
}
}
.access-token-created {
position: relative;
word-break: break-all;
.custom-input input {
background-color: $color-success-lighter;
border: 0;
padding: 0 0 0 15px;
}
}
.help-icon {
border: none;
height: 40px;
width: 40px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
background-color: $color-success-lighter;
svg {
fill: $color-gray-30;
}
&:hover {
svg {
fill: $color-gray-60;
}
}
}
.token-created-info {
font-size: $fs12;
color: $color-gray-40;
}
}
.dashboard-settings {
a {
color: $df-secondary;
}
.form-container {
width: 800px;
margin: 80px auto auto 120px;
form {
width: 468px;
.fields-row {
.custom-input,
.custom-select {
flex-direction: column-reverse;
label {
position: relative;
text-transform: uppercase;
color: $df-primary;
font-size: 11px;
margin-bottom: 12px;
margin-left: -4px;
}
input,
select {
background-color: $db-tertiary;
border-radius: 8px;
border-color: transparent;
color: $df-primary;
padding: 0 15px;
&:focus {
outline: 1px solid $da-primary;
}
::placeholder {
color: $df-secondary;
}
}
.help-icon {
bottom: 12px;
top: auto;
svg {
fill: $df-secondary;
}
}
&.disabled {
input {
background-color: $db-primary;
border-color: $db-cuaternary;
color: $df-secondary;
}
}
.input-container {
background-color: $db-tertiary;
border-radius: 8px;
border-color: transparent;
margin-top: 22px;
.main-content {
label {
position: absolute;
top: -24px;
}
span {
color: $df-primary;
}
}
&:focus {
border: 1px solid $da-primary;
}
}
textarea {
border-radius: 8px;
padding: 12px 14px;
background-color: $db-tertiary;
color: $df-primary;
border: none;
&:focus {
outline: 1px solid $da-primary;
}
}
}
}
.field-title {
color: $df-primary;
}
.field-title:not(:first-child) {
margin-top: 64px;
}
.field-text {
color: $df-secondary;
}
button,
.btn-secondary {
width: 100%;
font-size: 11px;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
&:hover {
color: $da-primary;
background-color: $db-cuaternary;
}
}
hr {
display: none;
}
}
.links {
margin-top: 12px;
}
}
}

148
frontend/src/app/main/ui/settings/profile.cljs
View file

@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.settings.profile
(:require-macros [app.main.style :as stl])
(:require
[app.common.spec :as us]
[app.config :as cf]
@ -15,6 +16,7 @@
[app.main.store :as st]
[app.main.ui.components.file-uploader :refer [file-uploader]]
[app.main.ui.components.forms :as fm]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
@ -41,48 +43,85 @@
(mf/defc profile-form
[]
(let [profile (mf/deref refs/profile)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
profile (mf/deref refs/profile)
form (fm/use-form :spec ::profile-form
:initial profile
:validators [(fm/validate-length :fullname fm/max-length-allowed (tr "auth.name.too-long"))
(fm/validate-not-empty :fullname (tr "auth.name.not-all-space"))])]
[:& fm/form {:on-submit on-submit
:form form
:class "profile-form"}
[:div.fields-row
[:& fm/input
{:type "text"
:name :fullname
:label (tr "dashboard.your-name")}]]
(if new-css-system
[:& fm/form {:on-submit on-submit
:form form
:class (stl/css :profile-form)}
[:div {:class (stl/css :fields-row)}
[:& fm/input
{:type "text"
:name :fullname
:label (tr "dashboard.your-name")}]]
[:div.fields-row
[:& fm/input
{:type "email"
:name :email
:disabled true
:help-icon i/at
:label (tr "dashboard.your-email")}]
[:div {:class (stl/css :fields-row)}
[:& fm/input
{:type "email"
:name :email
:disabled true
:help-icon i/at
:label (tr "dashboard.your-email")}]
[:div.options
[:div.change-email
[:a {:on-click #(modal/show! :change-email {})}
(tr "dashboard.change-email")]]]]
[:div {:class (stl/css :options)}
[:div.change-email
[:a {:on-click #(modal/show! :change-email {})}
(tr "dashboard.change-email")]]]]
[:> fm/submit-button*
{:label (tr "dashboard.save-settings")
:disabled (empty? (:touched @form))}]
[:> fm/submit-button*
{:label (tr "dashboard.save-settings")
:disabled (empty? (:touched @form))}]
[:div.links
[:div.link-item
[:a {:on-click #(modal/show! :delete-account {})
:data-test "remove-acount-btn"}
(tr "dashboard.remove-account")]]]]))
[:div {:class (stl/css :links)}
[:div {:class (stl/css :link-item)}
[:a {:on-click #(modal/show! :delete-account {})
:data-test "remove-acount-btn"}
(tr "dashboard.remove-account")]]]]
;; OLD
[:& fm/form {:on-submit on-submit
:form form
:class "profile-form"}
[:div.fields-row
[:& fm/input
{:type "text"
:name :fullname
:label (tr "dashboard.your-name")}]]
[:div.fields-row
[:& fm/input
{:type "email"
:name :email
:disabled true
:help-icon i/at
:label (tr "dashboard.your-email")}]
[:div.options
[:div.change-email
[:a {:on-click #(modal/show! :change-email {})}
(tr "dashboard.change-email")]]]]
[:> fm/submit-button*
{:label (tr "dashboard.save-settings")
:disabled (empty? (:touched @form))}]
[:div.links
[:div.link-item
[:a {:on-click #(modal/show! :delete-account {})
:data-test "remove-acount-btn"}
(tr "dashboard.remove-account")]]]])))
;; --- Profile Photo Form
(mf/defc profile-photo-form []
(let [file-input (mf/use-ref nil)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
file-input (mf/use-ref nil)
profile (mf/deref refs/profile)
photo (cf/resolve-profile-photo-url profile)
on-image-click #(dom/click (mf/ref-val file-input))
@ -91,23 +130,44 @@
(fn [file]
(st/emit! (du/update-photo file)))]
[:form.avatar-form
[:div.image-change-field
[:span.update-overlay {:on-click on-image-click} (tr "labels.update")]
[:img {:src photo}]
[:& file-uploader {:accept "image/jpeg,image/png"
:multi false
:ref file-input
:on-selected on-file-selected
:data-test "profile-image-input"}]]]))
(if new-css-system
[:form {:class (stl/css :avatar-form)}
[:div {:class (stl/css :image-change-field)}
[:span {:class (stl/css :update-overlay)
:on-click on-image-click} (tr "labels.update")]
[:img {:src photo}]
[:& file-uploader {:accept "image/jpeg,image/png"
:multi false
:ref file-input
:on-selected on-file-selected
:data-test "profile-image-input"}]]]
;; OLD
[:form.avatar-form
[:div.image-change-field
[:span.update-overlay {:on-click on-image-click} (tr "labels.update")]
[:img {:src photo}]
[:& file-uploader {:accept "image/jpeg,image/png"
:multi false
:ref file-input
:on-selected on-file-selected
:data-test "profile-image-input"}]]])))
;; --- Profile Page
(mf/defc profile-page []
(mf/with-effect []
(dom/set-html-title (tr "title.settings.profile")))
[:div.dashboard-settings
[:div.form-container.two-columns
[:& profile-photo-form]
[:& profile-form]]])
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
(mf/with-effect []
(dom/set-html-title (tr "title.settings.profile")))
(if new-css-system
[:div {:class (stl/css :dashboard-settings)}
[:div {:class (stl/css :form-container :two-columns)}
[:& profile-photo-form]
[:& profile-form]]]
;; OLD
[:div.dashboard-settings
[:div.form-container.two-columns
[:& profile-photo-form]
[:& profile-form]]])))

642
frontend/src/app/main/ui/settings/profile.scss Normal file
View file

@ -0,0 +1,642 @@
@import "common/dependencies/colors";
$br3: 3px;
$br4: 4px;
$br8: 8px;
$br6: 6px;
$fs12: 0.75rem;
$fs14: 0.875rem;
$fs16: 1rem;
$fs18: 1.125rem;
$fs22: 1.375rem;
$fs24: 1.5rem;
$fs36: 2.25rem;
$fw400: 400;
$fw500: 500;
$fw600: 600;
$fw700: 700;
$lh-088: 0.88;
$lh-115: 1.15; // original $title-lh-sm
$lh-500: 5; // original $title-lh-sm
$size-1: 0.25rem;
$size-2: 0.5rem;
$size-4: 1rem;
$size-5: 1.5rem;
$size-6: 2rem;
.form-container,
.generic-form {
display: flex;
justify-content: center;
flex-direction: column;
.forms-container {
display: flex;
margin-top: 40px;
width: 536px;
justify-content: center;
}
form {
display: flex;
flex-direction: column;
// flex-basis: 368px;
}
.fields-row {
margin-bottom: 20px;
flex-direction: column;
.options {
display: flex;
justify-content: flex-end;
font-size: $fs14;
margin-top: 13px;
}
}
.field {
margin-bottom: 20px;
}
h1 {
font-size: $fs36;
color: #2c233e;
margin-bottom: 20px;
}
.subtitle {
font-size: $fs24;
color: #2c233e;
margin-bottom: 20px;
}
.notification-icon {
justify-content: center;
display: flex;
margin-bottom: 3rem;
svg {
fill: $color-gray-60;
height: 40%;
width: 40%;
}
}
.notification-text {
font-size: $fs18;
color: $color-gray-60;
margin-bottom: 20px;
}
.notification-text-email {
background: $color-gray-10;
border-radius: $br3;
color: $color-gray-60;
font-size: $fs18;
font-weight: $fw500;
margin: 1.5rem 0 2.5rem 0;
padding: 1rem;
text-align: center;
}
h2 {
font-size: $fs24;
color: $color-gray-60;
// height: 40px;
display: flex;
align-items: center;
}
a {
&:hover {
text-decoration: underline;
}
}
p {
color: $color-gray-60;
}
hr {
border-color: $color-gray-20;
}
}
.dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: $color-white;
height: 63px;
padding: $size-1 $size-4 $size-1 $size-2;
position: relative;
z-index: 10;
user-select: none;
&.team {
display: grid;
grid-template-columns: 20% 1fr 20%;
}
.element-name {
margin-right: $size-2;
}
.btn-secondary {
flex-shrink: 0;
z-index: 10;
height: 32px;
svg {
height: 16px;
width: 16px;
}
}
svg {
fill: $color-black;
height: 14px;
margin-right: $size-1;
width: 14px;
}
nav {
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 1;
ul {
display: flex;
font-size: $fs14;
justify-content: center;
margin: 0;
}
li {
a {
display: flex;
align-items: center;
flex-basis: 140px;
border-bottom: 3px solid transparent;
color: $color-gray-30;
height: 40px;
padding: $size-1 $size-5;
font-weight: $fw400;
&:hover {
color: $color-black;
text-decoration: none;
}
}
&.active {
a {
color: $color-black;
border-color: $color-primary;
}
}
}
}
.dashboard-title {
display: flex;
align-items: center;
margin-left: 13px;
h1 {
color: $color-black;
display: flex;
flex-shrink: 0;
font-size: $fs22;
font-weight: $fw600;
z-index: 10;
user-select: all;
}
.context-menu.is-open {
margin-top: 10px;
}
}
.icon {
display: flex;
align-items: center;
cursor: pointer;
margin-left: $size-2;
z-index: 10;
svg {
fill: $color-gray-40;
width: 15px;
height: 15px;
&:hover {
fill: $color-primary-dark;
}
}
}
.dashboard-buttons {
display: flex;
justify-content: flex-end;
align-items: center;
}
.dashboard-header-actions {
display: flex;
}
.pin-icon {
margin: 0 $size-2 0 $size-5;
background-color: transparent;
border: none;
svg {
fill: $color-gray-20;
}
&.active {
svg {
fill: $color-gray-50;
}
}
}
}
.dashboard-settings {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
.form-container {
margin-top: 50px;
display: flex;
max-width: 368px;
margin-bottom: 2rem;
width: 100%;
&.two-columns {
max-width: 536px;
justify-content: space-between;
flex-direction: row;
}
h2 {
margin-bottom: 1rem;
}
}
.avatar-form {
display: flex;
flex-direction: column;
width: 120px;
min-width: 120px;
img {
border-radius: 50%;
flex-shrink: 0;
height: 120px;
margin-right: $size-4;
width: 120px;
}
.image-change-field {
position: relative;
width: 120px;
height: 120px;
.update-overlay {
opacity: 0;
cursor: pointer;
position: absolute;
width: 121px;
height: 121px;
border-radius: 50%;
font-size: $fs24;
color: $color-white;
line-height: $lh-500; // Original value was 120px; 120px/24px = 500% => $lh-500
text-align: center;
background: $color-primary-dark;
z-index: 14;
}
input[type="file"] {
width: 120px;
height: 120px;
position: absolute;
opacity: 0;
cursor: pointer;
top: 0;
z-index: 15;
}
&:hover {
.update-overlay {
opacity: 0.8;
}
}
}
}
.profile-form {
display: flex;
flex-direction: column;
max-width: 368px;
width: 100%;
.newsletter-subs {
border-bottom: 1px solid $color-gray-20;
border-top: 1px solid $color-gray-20;
padding: 30px 0;
margin-bottom: 31px;
.newsletter-title {
font-family: "worksans", sans-serif;
color: $color-gray-30;
font-size: $fs14;
}
label {
font-family: "worksans", sans-serif;
color: $color-gray-60;
font-size: $fs12;
margin-right: -17px;
margin-bottom: 13px;
}
.info {
font-family: "worksans", sans-serif;
color: $color-gray-30;
font-size: $fs12;
margin-bottom: 8px;
}
.input-checkbox label {
align-items: flex-start;
}
}
}
.options-form,
.password-form {
h2 {
font-size: $fs14;
margin-bottom: 20px;
}
}
}
.dashboard-access-tokens {
display: flex;
flex-direction: column;
align-items: center;
.access-tokens-hero-container {
max-width: 1000px;
width: 100%;
display: flex;
flex-direction: column;
}
.access-tokens-hero {
font-size: $fs14;
padding: $size-6;
background-color: $color-white;
margin-top: $size-6;
display: flex;
justify-content: space-between;
.desc {
width: 80%;
color: $color-gray-40;
h2 {
margin-bottom: $size-4;
color: $color-black;
}
p {
font-size: $fs16;
}
}
.btn-primary {
flex-shrink: 0;
}
}
.access-tokens-empty {
text-align: center;
max-width: 1000px;
width: 100%;
padding: $size-6;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px dashed $color-gray-20;
color: $color-gray-40;
margin-top: 12px;
min-height: 136px;
}
.table-row {
background-color: $color-white;
display: grid;
grid-template-columns: 1fr 43% 12px;
height: 63px;
&:not(:first-child) {
margin-top: 8px;
}
}
.table-field {
&.name {
color: $color-gray-60;
}
&.expiration-date {
color: $color-gray-40;
font-size: $fs14;
.content {
padding: 2px 5px;
&.expired {
background-color: $color-warning-lighter;
border-radius: $br4;
color: $color-gray-40;
}
}
}
&.access-token-created {
word-break: break-all;
}
&.actions {
position: relative;
}
}
}
.access-tokens-modal {
.action-buttons {
gap: 10px;
.cancel-button {
border: 1px solid $color-gray-30;
background: $color-canvas;
border-radius: $br3;
padding: 0.5rem 1rem;
cursor: pointer;
margin-right: 8px;
&:hover {
background: $color-gray-20;
}
}
}
.access-token-created {
position: relative;
word-break: break-all;
.custom-input input {
background-color: $color-success-lighter;
border: 0;
padding: 0 0 0 15px;
}
}
.help-icon {
border: none;
height: 40px;
width: 40px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
background-color: $color-success-lighter;
svg {
fill: $color-gray-30;
}
&:hover {
svg {
fill: $color-gray-60;
}
}
}
.token-created-info {
font-size: $fs12;
color: $color-gray-40;
}
}
.dashboard-settings {
a {
color: $df-secondary;
}
.form-container {
width: 800px;
margin: 80px auto auto 120px;
form {
width: 468px;
.fields-row {
.custom-input,
.custom-select {
flex-direction: column-reverse;
label {
position: relative;
text-transform: uppercase;
color: $df-primary;
font-size: 11px;
margin-bottom: 12px;
margin-left: -4px;
}
input,
select {
background-color: $db-tertiary;
border-radius: 8px;
border-color: transparent;
color: $df-primary;
padding: 0 15px;
&:focus {
outline: 1px solid $da-primary;
}
::placeholder {
color: $df-secondary;
}
}
.help-icon {
bottom: 12px;
top: auto;
svg {
fill: $df-secondary;
}
}
&.disabled {
input {
background-color: $db-primary;
border-color: $db-cuaternary;
color: $df-secondary;
}
}
.input-container {
background-color: $db-tertiary;
border-radius: 8px;
border-color: transparent;
margin-top: 22px;
.main-content {
label {
position: absolute;
top: -24px;
}
span {
color: $df-primary;
}
}
&:focus {
border: 1px solid $da-primary;
}
}
textarea {
border-radius: 8px;
padding: 12px 14px;
background-color: $db-tertiary;
color: $df-primary;
border: none;
&:focus {
outline: 1px solid $da-primary;
}
}
}
}
.field-title {
color: $df-primary;
}
.field-title:not(:first-child) {
margin-top: 64px;
}
.field-text {
color: $df-secondary;
}
button,
.btn-secondary {
width: 100%;
font-size: 11px;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
&:hover {
color: $da-primary;
background-color: $db-cuaternary;
}
}
hr {
display: none;
}
}
.links {
margin-top: 12px;
}
}
}

152
frontend/src/app/main/ui/settings/sidebar.cljs
View file

@ -5,12 +5,14 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.settings.sidebar
(:require-macros [app.main.style :as stl])
(:require
[app.config :as cf]
[app.main.data.events :as ev]
[app.main.data.modal :as modal]
[app.main.data.users :as du]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.dashboard.sidebar :refer [profile-section]]
[app.main.ui.icons :as i]
[app.util.i18n :as i18n :refer [tr]]
@ -21,7 +23,8 @@
(mf/defc sidebar-content
[{:keys [profile section] :as props}]
(let [profile? (= section :settings-profile)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
profile? (= section :settings-profile)
password? (= section :settings-password)
options? (= section :settings-options)
feedback? (= section :settings-feedback)
@ -66,55 +69,112 @@
(st/emit! (modal/show {:type :onboarding}))
(st/emit! (modal/show {:type :release-notes :version version}))))))]
[:div.sidebar-content
[:div.sidebar-content-section
[:div.back-to-dashboard {:on-click go-dashboard}
[:span.icon i/arrow-down]
[:span.text (tr "labels.dashboard")]]]
[:hr]
[:div.sidebar-content-section
[:ul.sidebar-nav.no-overflow
[:li {:class (when profile? "current")
:on-click go-settings-profile}
i/user
[:span.element-title (tr "labels.profile")]]
[:li {:class (when password? "current")
:on-click go-settings-password}
i/lock
[:span.element-title (tr "labels.password")]]
[:li {:class (when options? "current")
:on-click go-settings-options
:data-test "settings-profile"}
i/tree
[:span.element-title (tr "labels.settings")]]
(when (contains? cf/flags :access-tokens)
[:li {:class (when access-tokens? "current")
:on-click go-settings-access-tokens
:data-test "settings-access-tokens"}
i/icon-key
[:span.element-title (tr "labels.access-tokens")]])
(if new-css-system
[:div {:class (stl/css :sidebar-content)}
[:div {:class (stl/css :sidebar-content-section)}
[:div {:class (stl/css :back-to-dashboard)
:on-click go-dashboard}
[:span {:class (stl/css :icon)} i/arrow-down]
[:span {:class (stl/css :text)} (tr "labels.dashboard")]]]
[:hr]
[:li {:on-click show-release-notes :data-test "release-notes"}
i/pencil
[:span.element-title (tr "labels.release-notes")]]
[:div {:class (stl/css :sidebar-content-section)}
[:ul {:class (stl/css :sidebar-nav :no-overflow)}
[:li {:class (when profile? (stl/css :current))
:on-click go-settings-profile}
i/user
[:span {:class (stl/css :element-title)} (tr "labels.profile")]]
(when (contains? cf/flags :user-feedback)
[:li {:class (when feedback? "current")
:on-click go-settings-feedback}
i/msg-info
[:span.element-title (tr "labels.give-feedback")]])]]]))
[:li {:class (when password? (stl/css :current))
:on-click go-settings-password}
i/lock
[:span {:class (stl/css :element-title)} (tr "labels.password")]]
[:li {:class (when options? (stl/css :current))
:on-click go-settings-options
:data-test "settings-profile"}
i/tree
[:span {:class (stl/css :element-title)} (tr "labels.settings")]]
(when (contains? cf/flags :access-tokens)
[:li {:class (when access-tokens? (stl/css :current))
:on-click go-settings-access-tokens
:data-test "settings-access-tokens"}
i/icon-key
[:span {:class (stl/css :element-title)} (tr "labels.access-tokens")]])
[:hr]
[:li {:on-click show-release-notes :data-test "release-notes"}
i/pencil
[:span {:class (stl/css :element-title)} (tr "labels.release-notes")]]
(when (contains? cf/flags :user-feedback)
[:li {:class (when feedback? (stl/css :current))
:on-click go-settings-feedback}
i/msg-info
[:span {:class (stl/css :element-title)} (tr "labels.give-feedback")]])]]]
;; OLD
[:div.sidebar-content
[:div.sidebar-content-section
[:div.back-to-dashboard {:on-click go-dashboard}
[:span.icon i/arrow-down]
[:span.text (tr "labels.dashboard")]]]
[:hr]
[:div.sidebar-content-section
[:ul.sidebar-nav.no-overflow
[:li {:class (when profile? "current")
:on-click go-settings-profile}
i/user
[:span.element-title (tr "labels.profile")]]
[:li {:class (when password? "current")
:on-click go-settings-password}
i/lock
[:span.element-title (tr "labels.password")]]
[:li {:class (when options? "current")
:on-click go-settings-options
:data-test "settings-profile"}
i/tree
[:span.element-title (tr "labels.settings")]]
(when (contains? cf/flags :access-tokens)
[:li {:class (when access-tokens? "current")
:on-click go-settings-access-tokens
:data-test "settings-access-tokens"}
i/icon-key
[:span.element-title (tr "labels.access-tokens")]])
[:hr]
[:li {:on-click show-release-notes :data-test "release-notes"}
i/pencil
[:span.element-title (tr "labels.release-notes")]]
(when (contains? cf/flags :user-feedback)
[:li {:class (when feedback? "current")
:on-click go-settings-feedback}
i/msg-info
[:span.element-title (tr "labels.give-feedback")]])]]])))
(mf/defc sidebar
{::mf/wrap [mf/memo]}
[{:keys [profile locale section]}]
[:div.dashboard-sidebar.settings
[:& sidebar-content {:profile profile
:section section}]
[:& profile-section {:profile profile
:locale locale}]])
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
(if new-css-system
[:div {:class (stl/css :dashboard-sidebar :settings)}
[:& sidebar-content {:profile profile
:section section}]
[:& profile-section {:profile profile
:locale locale}]]
;; OLD
[:div.dashboard-sidebar.settings
[:& sidebar-content {:profile profile
:section section}]
[:& profile-section {:profile profile
:locale locale}]])))

922
frontend/src/app/main/ui/settings/sidebar.scss Normal file
View file

@ -0,0 +1,922 @@
@import "common/dependencies/colors";
$fs14: 0.875rem;
$fs24: 1.5rem;
$lh-500: 5;
$fs12: 0.75rem;
$fs16: 1rem;
$fw400: 400;
$size-2: 0.5rem;
$size-3: 0.75rem;
$size-4: 1rem;
$size-6: 2rem;
$br3: 3px;
$br4: 4px;
$br5: 5px;
$fw700: 700;
.dashboard-sidebar {
grid-row: 1 / span 2;
grid-column: 1 / span 2;
background-color: $db-primary;
border-right: 1px solid $db-cuaternary;
margin: 0 1rem 0 0;
padding: 1rem 0 0 0;
z-index: 1;
display: flex;
flex-direction: column;
height: 100%;
}
.sidebar-content {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
padding: 0;
hr {
border-color: transparent;
margin: 0.8rem 15px;
}
.back-to-dashboard {
.icon svg {
fill: $df-secondary;
}
.text {
color: $df-primary;
}
}
}
.dashboard-sidebar {
background-color: $color-white;
z-index: 1;
display: flex;
flex-direction: column;
height: 100%;
padding-top: $size-2;
.sidebar-content {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
padding: 0;
//hr {
// border-color: $color-gray-10;
// margin: 1rem 15px;
//}
}
.sidebar-team-switch {
position: relative;
display: flex;
margin: 5px 15px;
.teams-dropdown {
left: 0;
top: 50px;
z-index: 12;
max-height: 30rem;
min-width: 234px;
overflow-y: auto;
}
.options-dropdown {
right: 2px;
top: 50px;
z-index: 12;
max-height: 30rem;
min-width: 162px;
}
.switch-content {
height: 40px;
display: flex;
width: 100%;
border: 1px solid $color-gray-10;
border-radius: $br5;
align-items: center;
}
.switch-options {
display: flex;
max-width: 22px;
min-width: 28px;
border-left: 1px solid $color-gray-10;
justify-content: center;
align-items: center;
cursor: pointer;
background-color: transparent;
border: none;
svg {
width: 15px;
height: 13px;
fill: $color-gray-60;
}
}
.current-team {
cursor: pointer;
display: flex;
align-items: center;
flex-grow: 1;
font-size: $fs14;
padding: 0px 10px;
background-color: transparent;
border: none;
}
.team-name {
flex-grow: 1;
display: flex;
height: 40px;
align-items: center;
&.action {
.team-icon {
border-radius: 50%;
background-color: $color-gray-10;
height: 24px;
margin-right: 10px;
padding: 6px;
width: 24px;
svg {
height: 12px;
width: 12px;
}
}
&:hover {
.team-icon {
background-color: $color-primary;
}
}
.team-text {
width: 150px;
}
}
.team-icon {
display: flex;
align-items: center;
padding-right: 10px;
svg {
width: 23px;
height: 23px;
fill: $color-gray-60;
}
img {
border-radius: 50%;
flex-shrink: 0;
height: 23px;
width: 23px;
}
}
.team-text {
color: $color-gray-60;
// @include text-ellipsis;
width: 130px;
text-align: left;
}
.icon {
margin-left: auto;
svg {
fill: $color-gray-60;
}
}
}
.switch-icon {
display: flex;
align-items: center;
justify-content: center;
svg {
width: 10px;
height: 10px;
fill: $color-gray-60;
}
}
}
.sidebar-empty-placeholder {
padding: 10px 12px;
color: $color-gray-30;
display: flex;
align-items: flex-start;
.icon {
padding: 0px 10px;
svg {
fill: $color-gray-30;
width: 12px;
height: 12px;
}
}
.text {
font-size: $fs12;
}
}
.sidebar-nav {
display: flex;
flex-direction: column;
overflow-y: auto;
margin: 0;
user-select: none;
// TODO: should be deprecated / unclear name
&.dashboard-common {
overflow: unset;
}
&.no-overflow {
overflow: unset;
}
& > li {
align-items: center;
cursor: pointer;
display: flex;
flex-shrink: 0;
padding: $size-2;
a {
font-weight: $fw400;
width: 100%;
&:hover {
text-decoration: none;
}
}
svg {
fill: $color-black;
margin-right: 8px;
height: $size-3;
width: $size-3;
}
span.element-title {
color: $color-gray-60;
font-size: $fs14;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&::before {
background-color: transparent;
border-radius: $br3;
content: "";
height: 26px;
margin-right: $size-2;
width: 4px;
}
&.recent-projects {
svg {
fill: $color-white;
}
}
& .edit-wrapper {
border: 1px solid $color-gray-10;
border-radius: $br3;
display: flex;
width: 100%;
}
input.element-title {
border: 0;
height: 30px;
padding: 5px;
margin: 0;
width: 100%;
background-color: $color-white;
}
.close {
background-color: $color-white;
cursor: pointer;
padding-left: 5px;
svg {
fill: $color-gray-30;
height: 15px;
transform: rotate(45deg) translateY(7px);
width: 15px;
margin: 0;
}
}
.element-subtitle {
color: $color-gray-20;
font-style: italic;
}
&:hover {
&::before {
background-color: $color-gray-10;
}
}
&.current {
a {
font-weight: $fw700;
}
&::before {
background-color: $color-primary;
}
}
&.dragging {
//background-color: color.adjust($color-primary, $alpha: -0.69);
}
}
}
.sidebar-search {
align-items: center;
background-color: $color-white;
border: 1px solid $color-gray-10;
border-radius: $br5;
display: flex;
margin: 5px 15px;
.input-text {
background: transparent;
border: 0;
color: $color-gray-60;
font-size: $fs14;
padding: 6px;
margin: 0;
max-width: 195px;
width: 100%;
height: 40px;
}
&:focus,
&:focus-within {
border-color: $color-black;
}
.search,
.clear-search {
align-items: center;
cursor: pointer;
display: flex;
height: 22px;
margin-left: auto;
padding: 0 $size-2;
width: 32px;
svg {
fill: $color-gray-30;
height: 15px;
width: 15px;
}
}
.clear-search svg {
transform: rotate(45deg);
&:hover {
fill: $color-danger;
}
}
}
&.profile-bar {
background-color: $color-gray-10;
.dashboard-sidebar-inside {
display: none;
}
}
}
.dashboard-sidebar {
&.settings {
.back-to-dashboard {
padding: 12px 18px;
font-size: $fs14;
cursor: pointer;
display: flex;
.icon {
display: flex;
align-items: center;
margin-right: 14px;
}
.text {
color: $color-gray-60;
}
svg {
fill: $color-gray-60;
transform: rotate(90deg);
width: 12px;
height: 12px;
}
}
}
}
.dashboard-settings {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
.form-container {
margin-top: 50px;
display: flex;
max-width: 368px;
margin-bottom: 2rem;
width: 100%;
&.two-columns {
max-width: 536px;
justify-content: space-between;
flex-direction: row;
}
h2 {
margin-bottom: 1rem;
}
}
.avatar-form {
display: flex;
flex-direction: column;
width: 120px;
min-width: 120px;
img {
border-radius: 50%;
flex-shrink: 0;
height: 120px;
margin-right: $size-4;
width: 120px;
}
.image-change-field {
position: relative;
width: 120px;
height: 120px;
.update-overlay {
opacity: 0;
cursor: pointer;
position: absolute;
width: 121px;
height: 121px;
border-radius: 50%;
font-size: $fs24;
color: $color-white;
line-height: $lh-500; // Original value was 120px; 120px/24px = 500% => $lh-500
text-align: center;
background: $color-primary-dark;
z-index: 14;
}
input[type="file"] {
width: 120px;
height: 120px;
position: absolute;
opacity: 0;
cursor: pointer;
top: 0;
z-index: 15;
}
&:hover {
.update-overlay {
opacity: 0.8;
}
}
}
}
.profile-form {
display: flex;
flex-direction: column;
max-width: 368px;
width: 100%;
.newsletter-subs {
border-bottom: 1px solid $color-gray-20;
border-top: 1px solid $color-gray-20;
padding: 30px 0;
margin-bottom: 31px;
.newsletter-title {
font-family: "worksans", sans-serif;
color: $color-gray-30;
font-size: $fs14;
}
label {
font-family: "worksans", sans-serif;
color: $color-gray-60;
font-size: $fs12;
margin-right: -17px;
margin-bottom: 13px;
}
.info {
font-family: "worksans", sans-serif;
color: $color-gray-30;
font-size: $fs12;
margin-bottom: 8px;
}
.input-checkbox label {
align-items: flex-start;
}
}
}
.options-form,
.password-form {
h2 {
font-size: $fs14;
margin-bottom: 20px;
}
}
}
.dashboard-access-tokens {
display: flex;
flex-direction: column;
align-items: center;
.access-tokens-hero-container {
max-width: 1000px;
width: 100%;
display: flex;
flex-direction: column;
}
.access-tokens-hero {
font-size: $fs14;
padding: $size-6;
background-color: $color-white;
margin-top: $size-6;
display: flex;
justify-content: space-between;
.desc {
width: 80%;
color: $color-gray-40;
h2 {
margin-bottom: $size-4;
color: $color-black;
}
p {
font-size: $fs16;
}
}
.btn-primary {
flex-shrink: 0;
}
}
.access-tokens-empty {
text-align: center;
max-width: 1000px;
width: 100%;
padding: $size-6;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px dashed $color-gray-20;
color: $color-gray-40;
margin-top: 12px;
min-height: 136px;
}
.table-row {
background-color: $color-white;
display: grid;
grid-template-columns: 1fr 43% 12px;
height: 63px;
&:not(:first-child) {
margin-top: 8px;
}
}
.table-field {
&.name {
color: $color-gray-60;
}
&.expiration-date {
color: $color-gray-40;
font-size: $fs14;
.content {
padding: 2px 5px;
&.expired {
background-color: $color-warning-lighter;
border-radius: $br4;
color: $color-gray-40;
}
}
}
&.access-token-created {
word-break: break-all;
}
&.actions {
position: relative;
}
}
}
.access-tokens-modal {
.action-buttons {
gap: 10px;
.cancel-button {
border: 1px solid $color-gray-30;
background: $color-canvas;
border-radius: $br3;
padding: 0.5rem 1rem;
cursor: pointer;
margin-right: 8px;
&:hover {
background: $color-gray-20;
}
}
}
.access-token-created {
position: relative;
word-break: break-all;
.custom-input input {
background-color: $color-success-lighter;
border: 0;
padding: 0 0 0 15px;
}
}
.help-icon {
border: none;
height: 40px;
width: 40px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
background-color: $color-success-lighter;
svg {
fill: $color-gray-30;
}
&:hover {
svg {
fill: $color-gray-60;
}
}
}
.token-created-info {
font-size: $fs12;
color: $color-gray-40;
}
}
.dashboard-sidebar {
background-color: $db-primary;
border-right: 1px solid $db-cuaternary;
grid-row: 1 / span 2;
grid-column: 1 / span 2;
margin: 0 1rem 0 0;
padding: 1rem 0 0 0;
.dropdown {
background-color: $db-tertiary;
border: 1px solid $db-cuaternary;
border-radius: 8px;
min-width: 252px;
.separator {
border-color: transparent;
margin-top: 10px;
}
li {
border-radius: 8px;
height: 40px;
margin: 5px;
&:hover {
background-color: $db-cuaternary;
}
}
&.options-dropdown {
li {
color: $df-primary;
&.warning {
color: $color-danger;
}
}
}
}
.sidebar-content {
.back-to-dashboard {
.icon {
svg {
fill: $df-secondary;
}
}
.text {
color: $df-primary;
}
}
.sidebar-team-switch {
.switch-content {
background-color: $db-tertiary;
border-radius: 8px;
border-color: transparent;
height: 48px;
.current-team {
border-right: 1px solid $db-primary;
height: 100%;
}
svg {
fill: $df-secondary;
}
.team-name {
.team-text {
color: $df-primary;
width: 145px;
}
}
}
}
.teams-dropdown {
background-color: $db-tertiary;
border-radius: 8px;
border: 1px solid $db-cuaternary;
min-width: 248px;
li {
border-radius: 8px;
height: 42px;
padding: 0 5px;
margin: 5px;
.team-text {
color: $df-primary;
width: 165px;
}
svg {
fill: $df-secondary;
}
&:hover {
background-color: $db-cuaternary;
.team-icon {
&.new-team {
background-color: $da-primary;
svg {
fill: $db-secondary;
}
}
}
}
.team-icon {
&.new-team {
background-color: $db-cuaternary;
}
}
}
}
.sidebar-search {
background-color: $db-tertiary;
border-color: transparent;
border-radius: 8px;
margin-bottom: 2rem;
margin-top: 0;
position: relative;
.input-text {
border-radius: 8px;
color: $df-primary;
max-width: 100%;
padding: 6px 10px;
&:focus {
border: 1px solid $da-primary;
}
}
::placeholder {
color: $df-secondary;
}
.search {
position: absolute;
top: 10px;
right: 2px;
}
}
.sidebar-nav {
li {
padding: 0.6rem 0.6rem 0.6rem 1.4rem;
&.current {
background-color: $db-cuaternary;
a {
font-weight: 400;
span {
color: $da-primary;
}
}
span {
color: $da-primary;
}
}
&:hover {
background-color: $db-cuaternary;
}
span {
color: $df-secondary;
}
&::before {
display: none;
}
svg {
display: none;
}
}
}
}
.sidebar-empty-placeholder {
color: $df-secondary;
}
// Profile sidebar
.profile-section {
background-color: $db-tertiary;
border-top: 1px solid $db-cuaternary;
span {
color: $df-primary;
}
.dashboard-comments-section {
border-color: transparent;
border-radius: 8px;
background-color: $db-primary;
height: 32px;
width: 32px;
.button {
border-radius: 8px;
background-color: $db-primary;
height: 32px;
width: 32px;
svg {
fill: $df-secondary;
}
&:hover {
background-color: $db-cuaternary;
svg {
fill: $da-primary;
}
}
}
}
}
}