From 62d90caf51b4c8e77674b12cfc716de0dc0dbbb9 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 24 Mar 2020 23:25:16 +0100 Subject: [PATCH] :construction: Basic user profile style refactor. --- .../styles/common/dependencies/helpers.scss | 2 + .../resources/styles/common/framework.scss | 30 ++++--- .../styles/main/layouts/library-page.scss | 11 ++- .../styles/main/layouts/main-layout.scss | 19 +++++ .../styles/main/partials/library-bar.scss | 8 ++ .../styles/main/partials/user-settings.scss | 83 +++++-------------- frontend/src/uxbox/main/ui/dashboard.cljs | 6 +- .../src/uxbox/main/ui/dashboard/project.cljs | 3 +- .../uxbox/main/ui/dashboard/recent_files.cljs | 3 +- frontend/src/uxbox/main/ui/settings.cljs | 21 +++-- .../src/uxbox/main/ui/settings/header.cljs | 34 +++----- .../src/uxbox/main/ui/settings/password.cljs | 5 +- .../src/uxbox/main/ui/settings/profile.cljs | 9 +- 13 files changed, 112 insertions(+), 122 deletions(-) diff --git a/frontend/resources/styles/common/dependencies/helpers.scss b/frontend/resources/styles/common/dependencies/helpers.scss index dd4447e8f..550575db8 100644 --- a/frontend/resources/styles/common/dependencies/helpers.scss +++ b/frontend/resources/styles/common/dependencies/helpers.scss @@ -17,6 +17,8 @@ $size-1: 0.25rem; $size-2: 0.5rem; $size-3: 0.8rem; $size-4: 1rem; +$size-5: 1.5rem; +$size-6: 2rem; // Border radius $br-small: 3px; diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index d3513a006..3e5044150 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/frontend/resources/styles/common/framework.scss @@ -14,8 +14,7 @@ border-radius: 3px; cursor: pointer; display: flex; - font-size: $fs16; - font-weight: bold; + font-size: $fs14; justify-content: center; padding: 1rem; transition: all .4s; @@ -26,7 +25,7 @@ flex-shrink: 0; } &.btn-small { - font-size: $fs14; + font-size: $fs12; padding: .7rem 1rem; line-height: 1.15; } @@ -36,13 +35,13 @@ @extend %btn; align-items: center; background: $color-primary; - color: $color-white; + color: $color-black; justify-content: center; display: flex; padding: 1rem; &:hover { - background: $color-primary-dark; - color: $color-white; + background: $color-black; + color: $color-primary; } } @@ -137,8 +136,6 @@ border: 1px solid $color-black; border-radius: 2px; color: $color-black; - font-size: $fs12; - font-weight: normal; padding: $x-small $small; &:hover { @@ -150,7 +147,8 @@ input[type=button][disabled], .btn-disabled { - opacity: .5; + background-color: $color-gray-10; + color: $color-gray-40; pointer-events: none; } @@ -383,11 +381,11 @@ ul.slider-dots { input, select { - background-color: $color-gray-50; + background-color: $color-white; box-sizing: border-box; color: $color-gray-60; font-family: "sourcesanspro", sans-serif; - font-size: $fs16; + font-size: $fs14; margin-bottom: $medium; -webkit-appearance: none; -moz-appearance: none; @@ -419,8 +417,8 @@ input[type="checkbox"]:focus { .input-text { border: none; - border-bottom: 1px solid $color-gray-60; - background-color: $color-gray-50; + border-bottom: 1px solid transparent; + background-color: $color-white; box-shadow: none; outline: none; padding: $small $big $small $small; @@ -501,7 +499,7 @@ input.element-name { cursor: pointer; display: flex; margin-right: 15px; - font-size: 13px; + font-size: $fs13; &:before{ content:""; @@ -622,7 +620,7 @@ input[type=radio]:checked + label:before{ position: absolute; left: 3.2px; top: 0px; - font-size: 11px; + font-size: $fs11; transition: border 0.2s linear 0s, color 0.2s linear 0s; } @@ -663,7 +661,7 @@ input[type=radio]:checked + label:before{ &::after { content:"✓"; color: #000000; - font-size: 16px; + font-size: $fs16; } } diff --git a/frontend/resources/styles/main/layouts/library-page.scss b/frontend/resources/styles/main/layouts/library-page.scss index 34b0c29c1..9db0d4c81 100644 --- a/frontend/resources/styles/main/layouts/library-page.scss +++ b/frontend/resources/styles/main/layouts/library-page.scss @@ -46,17 +46,24 @@ } .library-header-navigation-item { - margin: 0 $size-4; + margin: 0 $size-6; color: $color-gray; text-transform: uppercase; border-bottom: 1px solid transparent; - &:hover, &.current { + &:hover { + color: $color-black; + } + + &.current { color: $color-black; border-bottom: 1px solid $color-primary; } + } + + .library-sidebar { background-color: $color-white; padding: $size-2; diff --git a/frontend/resources/styles/main/layouts/main-layout.scss b/frontend/resources/styles/main/layouts/main-layout.scss index 738f6c0ab..1f8cd073a 100644 --- a/frontend/resources/styles/main/layouts/main-layout.scss +++ b/frontend/resources/styles/main/layouts/main-layout.scss @@ -28,6 +28,25 @@ } } +.settings-layout { + background-color: $color-white; + display: grid; + grid-template-rows: 40px 1fr; + grid-template-columns: 40px 1fr; + height: 100vh; + + & .left-bar { + grid-row: 2; + grid-column: 1; + } + + & .settings-content { + grid-row: 1 / span 2; + } +} + + + .dashboard-content { background-color: lighten($color-gray-10, 5%); display: flex; diff --git a/frontend/resources/styles/main/partials/library-bar.scss b/frontend/resources/styles/main/partials/library-bar.scss index ec1449ace..8f16f7d04 100644 --- a/frontend/resources/styles/main/partials/library-bar.scss +++ b/frontend/resources/styles/main/partials/library-bar.scss @@ -129,6 +129,14 @@ } } } + + &.profile-bar { + background-color: $color-gray-10; + + .library-bar-inside { + display: none; + } + } } .projects-row { diff --git a/frontend/resources/styles/main/partials/user-settings.scss b/frontend/resources/styles/main/partials/user-settings.scss index f1a222469..36aa8df59 100644 --- a/frontend/resources/styles/main/partials/user-settings.scss +++ b/frontend/resources/styles/main/partials/user-settings.scss @@ -1,51 +1,14 @@ -.user-settings { - flex-direction: column; -} - -.user-settings-nav { - display: flex; - - .user-settings-nav-inside { - align-items: center; - display: flex; - margin: 0 auto; - - li { - background-color: transparent; - border: 1px solid $color-gray-20; - border-radius: $br-small; - cursor: pointer; - margin: $medium; - padding: $small $medium; - - &:hover { - background-color: $color-gray-10; - border-color: transparent; - } - - &.current { - background-color: $color-gray-50; - border: 0; - color: $color-primary; - } - - } - - } - -} - -.user-settings-content { +.user-settings-page { display: flex; flex-direction: column; margin: 0 auto; width: 500px; .user-settings-label { - border-bottom: 1px solid $color-gray-60; - font-weight: bold; - margin: $x-small 0 $medium 0; - padding: $medium; + color: $color-black; + font-size: $fs15; + margin: $x-big 0 $x-small 0; + padding: $medium 0; } .input-text { @@ -56,24 +19,24 @@ margin-top: $medium; } -} - -.profile-form, -.password-form { - display: flex; - flex-direction: column; -} - -.avatar-form { - align-items: center; - display: flex; - - img { - border-radius: 50%; - flex-shrink: 0; - height: 120px; - margin-right: $medium; - width: 120px; + .profile-form, + .password-form { + display: flex; + flex-direction: column; } + .avatar-form { + align-items: center; + display: flex; + + img { + border-radius: 50%; + flex-shrink: 0; + height: 120px; + margin-right: $medium; + width: 120px; + } + + } } + diff --git a/frontend/src/uxbox/main/ui/dashboard.cljs b/frontend/src/uxbox/main/ui/dashboard.cljs index ab0549a75..b43578142 100644 --- a/frontend/src/uxbox/main/ui/dashboard.cljs +++ b/frontend/src/uxbox/main/ui/dashboard.cljs @@ -5,8 +5,7 @@ ;; This Source Code Form is "Incompatible With Secondary Licenses", as ;; defined by the Mozilla Public License, v. 2.0. ;; -;; Copyright (c) 2020 Juan de la Cruz -;; Copyright (c) 2020 Andrey Antukh +;; Copyright (c) 2020 UXBOX Labs SL (ns uxbox.main.ui.dashboard (:require @@ -94,5 +93,4 @@ :dashboard-project (mf/element project-page #js {:team-id team-id - :project-id project-id}))]]]) - ) + :project-id project-id}))]]])) diff --git a/frontend/src/uxbox/main/ui/dashboard/project.cljs b/frontend/src/uxbox/main/ui/dashboard/project.cljs index 60aa4fbda..98a8ca596 100644 --- a/frontend/src/uxbox/main/ui/dashboard/project.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/project.cljs @@ -5,8 +5,7 @@ ;; This Source Code Form is "Incompatible With Secondary Licenses", as ;; defined by the Mozilla Public License, v. 2.0. ;; -;; Copyright (c) 2020 Andrey Antukh -;; Copyright (c) 2020 Juan de la Cruz +;; Copyright (c) 2020 UXBOX Labs SL (ns uxbox.main.ui.dashboard.project (:require diff --git a/frontend/src/uxbox/main/ui/dashboard/recent_files.cljs b/frontend/src/uxbox/main/ui/dashboard/recent_files.cljs index cf2b309dc..3a928fec0 100644 --- a/frontend/src/uxbox/main/ui/dashboard/recent_files.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/recent_files.cljs @@ -5,8 +5,7 @@ ;; 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 +;; Copyright (c) 2020 UXBOX Labs SL (ns uxbox.main.ui.dashboard.recent-files (:require diff --git a/frontend/src/uxbox/main/ui/settings.cljs b/frontend/src/uxbox/main/ui/settings.cljs index 00fe86e0b..8477c84a2 100644 --- a/frontend/src/uxbox/main/ui/settings.cljs +++ b/frontend/src/uxbox/main/ui/settings.cljs @@ -11,21 +11,28 @@ [potok.core :as ptk] [rumext.alpha :as mf] [uxbox.builtins.icons :as i] + [uxbox.main.refs :as refs] + [uxbox.main.ui.dashboard.profile :refer [profile-section]] [uxbox.main.ui.messages :refer [messages-widget]] [uxbox.main.ui.settings.header :refer [header]] [uxbox.main.ui.settings.password :refer [password-page]] [uxbox.main.ui.settings.profile :refer [profile-page]])) (mf/defc settings - {:wrap [mf/wrap-memo]} [{:keys [route] :as props}] - (let [section (get-in route [:data :name])] - [:main.dashboard-main + (let [section (get-in route [:data :name]) + profile (mf/deref refs/profile)] + [:main.settings-main [:& messages-widget] - [:& header {:section section}] - (case section - :settings-profile (mf/element profile-page) - :settings-password (mf/element password-page))])) + + [:section.settings-layout + [:div.main-logo i/logo-icon] + [:div.left-bar] + [:div.settings-content + [:& header {:section section}] + (case section + :settings-profile (mf/element profile-page) + :settings-password (mf/element password-page))]]])) diff --git a/frontend/src/uxbox/main/ui/settings/header.cljs b/frontend/src/uxbox/main/ui/settings/header.cljs index fbee35ef7..1db760f81 100644 --- a/frontend/src/uxbox/main/ui/settings/header.cljs +++ b/frontend/src/uxbox/main/ui/settings/header.cljs @@ -2,8 +2,7 @@ ;; 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) 2015-2017 Andrey Antukh -;; Copyright (c) 2015-2017 Juan de la Cruz +;; Copyright (c) 2020 UXBOX Labs SL (ns uxbox.main.ui.settings.header (:require @@ -15,25 +14,18 @@ [uxbox.util.i18n :as i18n :refer [tr t]] [uxbox.util.router :as rt])) -(mf/defc header-link - [{:keys [section content] :as props}] - (let [on-click #(st/emit! (rt/nav section))] - [:a {:on-click on-click} content])) - (mf/defc header [{:keys [section] :as props}] (let [profile? (= section :settings-profile) - password? (= section :settings-password)] - [:header#main-bar.main-bar - [:div.main-logo - [:& header-link {:section :dashboard-projects - :content i/logo}]] - [:ul.main-nav - [:li {:class (when profile? "current")} - [:& header-link {:section :settings-profile - :content (tr "settings.profile")}]] - [:li {:class (when password? "current")} - [:& header-link {:section :settings-password - :content (tr "settings.password")}]]] - #_[:& user]])) - + password? (= section :settings-password) + locale (i18n/use-locale)] + [:header.main-bar + [:nav.library-header-navigation + [:a.library-header-navigation-item + {:class (when profile? "current") + :on-click #(st/emit! (rt/nav :settings-profile))} + (t locale "settings.profile")] + [:a.library-header-navigation-item + {:class (when password? "current") + :on-click #(st/emit! (rt/nav :settings-password))} + (t locale "settings.password")]]])) diff --git a/frontend/src/uxbox/main/ui/settings/password.cljs b/frontend/src/uxbox/main/ui/settings/password.cljs index e2099bd5c..d2a9db53f 100644 --- a/frontend/src/uxbox/main/ui/settings/password.cljs +++ b/frontend/src/uxbox/main/ui/settings/password.cljs @@ -105,6 +105,5 @@ (mf/defc password-page [props] - [:section.dashboard-content.user-settings - [:section.user-settings-content - [:& password-form]]]) + [:section.user-settings-page + [:& password-form]]) diff --git a/frontend/src/uxbox/main/ui/settings/profile.cljs b/frontend/src/uxbox/main/ui/settings/profile.cljs index 7f741d3fe..609856589 100644 --- a/frontend/src/uxbox/main/ui/settings/profile.cljs +++ b/frontend/src/uxbox/main/ui/settings/profile.cljs @@ -130,8 +130,7 @@ (mf/defc profile-page [] - [:section.dashboard-content.user-settings - [:section.user-settings-content - [:span.user-settings-label (tr "settings.profile.your-avatar")] - [:& profile-photo-form] - [:& profile-form]]]) + [:section.user-settings-page + [:span.user-settings-label (tr "settings.profile.your-avatar")] + [:& profile-photo-form] + [:& profile-form]])