Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-11 22:41:23 -05:00
Code Issues Activity

💪 changes to dashboard layout

Browse source
This commit is contained in:
alonso.torres 2020-03-10 13:26:07 +01:00 • committed by Andrey Antukh
parent 39836fc821
commit 3a24d94c2b
9 changed files with 119 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/styles/common/framework.scss
View file

@ -135,6 +135,7 @@
@extend %btn;
background-color: $color-white;
border: 1px solid $color-black;
border-radius: 2px;
color: $color-black;
font-size: $fs12;
font-weight: normal;

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

@ -11,13 +11,25 @@
position: relative;
}
.dashboard-layout {
background-color: $color-white;
display: grid;
grid-template-rows: 40px 1fr;
grid-template-columns: 40px 180px 1fr;
height: 100vh;
& .library-bar {
grid-row: 2;
grid-column: 1 / span 2;
}
& .dashboard-content {
grid-row: 1 / span 2;
}
}
.dashboard-content {
// background-image: url("../images/dashboard-img.svg");
// background-position: bottom center;
// background-repeat: no-repeat;
// background-size: 100%;
background-color: lighten($color-gray-10, 5%);
display: flex;
flex-direction: column;
height: calc(100vh - 60px);
width: 100%;
}

2
frontend/resources/styles/main/partials/dashboard-grid.scss
View file

@ -295,7 +295,7 @@
// STYLES FOR LIBRARIES
&.library {
padding: $medium $medium $medium 230px;
padding: $medium;
}
}

8
frontend/resources/styles/main/partials/library-bar.scss
View file

@ -7,17 +7,11 @@
.library-bar {
background-color: $color-white;
bottom: 0;
height: 100%;
left: 0;
position: fixed;
width: 230px;
.library-bar-inside {
display: flex;
flex-direction: column;
height: 100%;
padding-top: 40px;
.library-tabs {
align-items: center;
@ -230,4 +224,4 @@
}
}
}

29
frontend/resources/styles/main/partials/main-bar.scss
View file

@ -15,25 +15,27 @@
position: relative;
z-index: 10;
.main-logo {
border-right: 1px solid $color-gray-10;
padding-right: $small;
padding-top: $x-small;
svg {
fill: $color-black;
height: 30px;
width: 30px;
}
}
.btn-dashboard {
margin-left: auto;
}
}
.main-logo {
border-right: 1px solid $color-gray-10;
border-bottom: 1px solid $color-gray-10;
text-align: center;
padding-top: $x-small;
svg {
fill: $color-black;
height: 30px;
width: 30px;
}
}
.main-nav {
align-items: center;
display: flex;
@ -76,6 +78,7 @@
.user-zone {
align-items: center;
border-right: 1px solid $color-gray-10;
border-bottom: 1px solid $color-gray-10;
cursor: pointer;
display: flex;
padding: 0 $x-small 0 $small;

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

@ -12,6 +12,7 @@
(:require
[cuerdas.core :as str]
[rumext.alpha :as mf]
[uxbox.builtins.icons :as i]
[uxbox.common.exceptions :as ex]
[uxbox.common.spec :as us]
[uxbox.main.refs :as refs]
@ -19,6 +20,7 @@
[uxbox.main.ui.dashboard.sidebar :refer [sidebar]]
[uxbox.main.ui.dashboard.project :refer [project-page]]
[uxbox.main.ui.dashboard.team :refer [team-page]]
[uxbox.main.ui.dashboard.profile :refer [profile-section]]
[uxbox.main.ui.messages :refer [messages-widget]]))
(defn- ^boolean uuid-str?
@ -52,15 +54,19 @@
{:keys [team-id project-id]} (parse-params route profile)]
[:main.dashboard-main
[:& messages-widget]
[:& header {:profile profile}]
[:section.dashboard-content
[:section.dashboard-layout
[:div.main-logo i/logo-icon]
[:& profile-section {:profile profile}]
[:& sidebar {:team-id team-id
:project-id project-id
:section section}]
(case section
:dashboard-team
(mf/element team-page #js {:team-id team-id})
[:div.dashboard-content
[:& header]
(case section
:dashboard-team
(mf/element team-page #js {:team-id team-id})
:dashboard-project
(mf/element project-page #js {:team-id team-id
:project-id project-id}))]]))
:dashboard-project
(mf/element project-page #js {:team-id team-id
:project-id project-id}))]]])
)

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

@ -10,59 +10,9 @@
(ns uxbox.main.ui.dashboard.header
(:require
[cuerdas.core :as str]
[lentes.core :as l]
[rumext.alpha :as mf]
[uxbox.builtins.icons :as i]
[uxbox.main.data.auth :as da]
[uxbox.main.data.projects :as dp]
[uxbox.main.store :as st]
[uxbox.main.refs :as refs]
[uxbox.main.ui.navigation :as nav]
[uxbox.util.dom :as dom]
[uxbox.util.i18n :as i18n :refer [t]]
[uxbox.util.router :as rt]))
;; --- Component: User Menu
(mf/defc profile-menu
[props]
(let [locale (i18n/use-locale)
on-click
(fn [event section]
(dom/stop-propagation event)
(if (keyword? section)
(st/emit! (rt/nav section))
(st/emit! section)))]
[:ul.dropdown
[:li {:on-click #(on-click % :settings-profile)}
i/user
[:span (t locale "dashboard.header.profile-menu.profile")]]
[:li {:on-click #(on-click % :settings-password)}
i/lock
[:span (t locale "dashboard.header.profile-menu.password")]]
[:li {:on-click #(on-click % da/logout)}
i/exit
[:span (t locale "dashboard.header.profile-menu.logout")]]]))
;; --- Component: Profile
(mf/defc profile-section
[{:keys [profile] :as props}]
(let [open (mf/use-state false)
photo (:photo-uri profile "")
photo (if (str/empty? photo)
"/images/avatar.jpg"
photo)]
[:div.user-zone {:on-click #(st/emit! (rt/nav :settings-profile))
:on-mouse-enter #(reset! open true)
:on-mouse-leave #(reset! open false)}
[:img {:src photo}]
[:span (:fullname profile)]
(when @open
[:& profile-menu])]))
[uxbox.main.ui.dashboard.profile :refer [profile-section]]))
;; --- Component: Header
@ -71,8 +21,6 @@
[{:keys [profile] :as props}]
(let [locale (i18n/use-locale)]
[:header#main-bar.main-bar
[:div.main-logo i/logo-icon]
[:& profile-section {:profile profile}]
[:h1.dashboard-title "Personal"]
[:a.btn-dashboard "+ New project"]]))

65
frontend/src/uxbox/main/ui/dashboard/profile.cljs Normal file
View file

@ -0,0 +1,65 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; This Source Code Form is "Incompatible With Secondary Licenses", as
;; defined by the Mozilla Public License, v. 2.0.
;;
;; Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns uxbox.main.ui.dashboard.profile
(:require
[cuerdas.core :as str]
[lentes.core :as l]
[rumext.alpha :as mf]
[uxbox.builtins.icons :as i]
[uxbox.main.data.auth :as da]
[uxbox.main.data.projects :as dp]
[uxbox.main.store :as st]
[uxbox.main.refs :as refs]
[uxbox.main.ui.navigation :as nav]
[uxbox.util.dom :as dom]
[uxbox.util.i18n :as i18n :refer [t]]
[uxbox.util.router :as rt]))
;; --- Component: User Menu
(mf/defc profile-menu
[props]
(let [locale (i18n/use-locale)
on-click
(fn [event section]
(dom/stop-propagation event)
(if (keyword? section)
(st/emit! (rt/nav section))
(st/emit! section)))]
[:ul.dropdown
[:li {:on-click #(on-click % :settings-profile)}
i/user
[:span (t locale "dashboard.header.profile-menu.profile")]]
[:li {:on-click #(on-click % :settings-password)}
i/lock
[:span (t locale "dashboard.header.profile-menu.password")]]
[:li {:on-click #(on-click % da/logout)}
i/exit
[:span (t locale "dashboard.header.profile-menu.logout")]]]))
;; --- Component: Profile
(mf/defc profile-section
[{:keys [profile] :as props}]
(let [open (mf/use-state false)
photo (:photo-uri profile "")
photo (if (str/empty? photo)
"/images/avatar.jpg"
photo)]
[:div.user-zone {:on-click #(st/emit! (rt/nav :settings-profile))
:on-mouse-enter #(reset! open true)
:on-mouse-leave #(reset! open false)}
[:img {:src photo}]
[:span (:fullname profile)]
(when @open
[:& profile-menu])]))

4
frontend/src/uxbox/main/ui/dashboard/team.cljs
View file

@ -46,6 +46,6 @@
(mf/use-effect
{:fn #(st/emit! (dsh/initialize-team team-id))
:deps (mf/deps team-id)})
[:section
[:p "TODO"]])
[:p "TEAM PAGE"]])