From 3a24d94c2b575d7283c435a8dbafbf38eb8616f2 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 10 Mar 2020 13:26:07 +0100 Subject: [PATCH] :muscle: changes to dashboard layout --- .../resources/styles/common/framework.scss | 1 + .../styles/main/layouts/main-layout.scss | 24 +++++-- .../styles/main/partials/dashboard-grid.scss | 2 +- .../styles/main/partials/library-bar.scss | 8 +-- .../styles/main/partials/main-bar.scss | 29 +++++---- frontend/src/uxbox/main/ui/dashboard.cljs | 22 ++++--- .../src/uxbox/main/ui/dashboard/header.cljs | 54 +-------------- .../src/uxbox/main/ui/dashboard/profile.cljs | 65 +++++++++++++++++++ .../src/uxbox/main/ui/dashboard/team.cljs | 4 +- 9 files changed, 119 insertions(+), 90 deletions(-) create mode 100644 frontend/src/uxbox/main/ui/dashboard/profile.cljs diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index 9a0be2c0e..38def5a4d 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/frontend/resources/styles/common/framework.scss @@ -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; diff --git a/frontend/resources/styles/main/layouts/main-layout.scss b/frontend/resources/styles/main/layouts/main-layout.scss index bb7b7ee50..738f6c0ab 100644 --- a/frontend/resources/styles/main/layouts/main-layout.scss +++ b/frontend/resources/styles/main/layouts/main-layout.scss @@ -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%; } diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss index e2bc9a26d..d4576687c 100644 --- a/frontend/resources/styles/main/partials/dashboard-grid.scss +++ b/frontend/resources/styles/main/partials/dashboard-grid.scss @@ -295,7 +295,7 @@ // STYLES FOR LIBRARIES &.library { - padding: $medium $medium $medium 230px; + padding: $medium; } } diff --git a/frontend/resources/styles/main/partials/library-bar.scss b/frontend/resources/styles/main/partials/library-bar.scss index d5301b3f6..92452dcb2 100644 --- a/frontend/resources/styles/main/partials/library-bar.scss +++ b/frontend/resources/styles/main/partials/library-bar.scss @@ -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 @@ } -} \ No newline at end of file +} diff --git a/frontend/resources/styles/main/partials/main-bar.scss b/frontend/resources/styles/main/partials/main-bar.scss index 97554569a..25c788f67 100644 --- a/frontend/resources/styles/main/partials/main-bar.scss +++ b/frontend/resources/styles/main/partials/main-bar.scss @@ -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; diff --git a/frontend/src/uxbox/main/ui/dashboard.cljs b/frontend/src/uxbox/main/ui/dashboard.cljs index ae53017f8..69b53b040 100644 --- a/frontend/src/uxbox/main/ui/dashboard.cljs +++ b/frontend/src/uxbox/main/ui/dashboard.cljs @@ -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}))]]]) + ) diff --git a/frontend/src/uxbox/main/ui/dashboard/header.cljs b/frontend/src/uxbox/main/ui/dashboard/header.cljs index 2c90be7d0..9a56e150f 100644 --- a/frontend/src/uxbox/main/ui/dashboard/header.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/header.cljs @@ -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"]])) diff --git a/frontend/src/uxbox/main/ui/dashboard/profile.cljs b/frontend/src/uxbox/main/ui/dashboard/profile.cljs new file mode 100644 index 000000000..b06e817df --- /dev/null +++ b/frontend/src/uxbox/main/ui/dashboard/profile.cljs @@ -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 +;; Copyright (c) 2015-2020 Juan de la Cruz + +(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])])) diff --git a/frontend/src/uxbox/main/ui/dashboard/team.cljs b/frontend/src/uxbox/main/ui/dashboard/team.cljs index 1da448aa8..c9de50c97 100644 --- a/frontend/src/uxbox/main/ui/dashboard/team.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/team.cljs @@ -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"]])