From b39d747e8f7f81cbde6814e672b8fbdec29528b8 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 26 Mar 2020 11:25:16 +0100 Subject: [PATCH] :recycle: Fix many issues on profile settings page. --- .../styles/main/layouts/main-layout.scss | 11 +---- .../styles/main/partials/main-bar.scss | 1 - .../styles/main/partials/user-settings.scss | 41 ++++++++++++++++++- frontend/src/uxbox/main/ui/settings.cljs | 7 ++-- .../src/uxbox/main/ui/settings/header.cljs | 7 ++-- .../src/uxbox/main/ui/settings/password.cljs | 4 +- .../src/uxbox/main/ui/settings/profile.cljs | 30 ++++++++------ 7 files changed, 68 insertions(+), 33 deletions(-) diff --git a/frontend/resources/styles/main/layouts/main-layout.scss b/frontend/resources/styles/main/layouts/main-layout.scss index 1f8cd073a..228fe088c 100644 --- a/frontend/resources/styles/main/layouts/main-layout.scss +++ b/frontend/resources/styles/main/layouts/main-layout.scss @@ -32,21 +32,14 @@ background-color: $color-white; display: grid; grid-template-rows: 40px 1fr; - grid-template-columns: 40px 1fr; + grid-template-columns: 1fr; height: 100vh; - & .left-bar { - grid-row: 2; - grid-column: 1; - } - & .settings-content { - grid-row: 1 / span 2; + grid-row: 1; } } - - .dashboard-content { background-color: lighten($color-gray-10, 5%); display: flex; diff --git a/frontend/resources/styles/main/partials/main-bar.scss b/frontend/resources/styles/main/partials/main-bar.scss index f0cc8775d..96364f0a1 100644 --- a/frontend/resources/styles/main/partials/main-bar.scss +++ b/frontend/resources/styles/main/partials/main-bar.scss @@ -44,7 +44,6 @@ height: 30px; width: 30px; } - } .main-nav { diff --git a/frontend/resources/styles/main/partials/user-settings.scss b/frontend/resources/styles/main/partials/user-settings.scss index 36aa8df59..302a696bf 100644 --- a/frontend/resources/styles/main/partials/user-settings.scss +++ b/frontend/resources/styles/main/partials/user-settings.scss @@ -1,10 +1,46 @@ -.user-settings-page { +.settings-content { + .main-logo { + position: fixed; + left: 0; + top:0; + width: 40px; + height: 40px; + z-index: 12; + cursor: pointer; + } + + nav { + display: flex; + left: 0; + width: 100%; + justify-content: center; + + .nav-item { + margin: 0 $size-6; + color: $color-gray; + text-transform: uppercase; + border-bottom: 1px solid transparent; + + &:hover { + color: $color-black; + } + + &.current { + color: $color-black; + border-bottom: 1px solid $color-primary; + } + } + } +} + +.settings-profile, +.settings-password { display: flex; flex-direction: column; margin: 0 auto; width: 500px; - .user-settings-label { + .settings-label { color: $color-black; font-size: $fs15; margin: $x-big 0 $x-small 0; @@ -13,6 +49,7 @@ .input-text { color: $color-gray-60; + background-color: $color-gray-10; } .btn-primary { diff --git a/frontend/src/uxbox/main/ui/settings.cljs b/frontend/src/uxbox/main/ui/settings.cljs index 8477c84a2..000daa173 100644 --- a/frontend/src/uxbox/main/ui/settings.cljs +++ b/frontend/src/uxbox/main/ui/settings.cljs @@ -12,6 +12,8 @@ [rumext.alpha :as mf] [uxbox.builtins.icons :as i] [uxbox.main.refs :as refs] + [uxbox.main.store :as st] + [uxbox.util.router :as rt] [uxbox.main.ui.dashboard.profile :refer [profile-section]] [uxbox.main.ui.messages :refer [messages-widget]] [uxbox.main.ui.settings.header :refer [header]] @@ -24,11 +26,10 @@ profile (mf/deref refs/profile)] [:main.settings-main [:& messages-widget] - [:section.settings-layout - [:div.main-logo i/logo-icon] - [:div.left-bar] [:div.settings-content + [:div.main-logo {:on-click #(st/emit! (rt/nav :dashboard-team {:team-id "self"}))} + i/logo-icon] [:& header {:section section}] (case section :settings-profile (mf/element profile-page) diff --git a/frontend/src/uxbox/main/ui/settings/header.cljs b/frontend/src/uxbox/main/ui/settings/header.cljs index 1db760f81..807f215d3 100644 --- a/frontend/src/uxbox/main/ui/settings/header.cljs +++ b/frontend/src/uxbox/main/ui/settings/header.cljs @@ -20,12 +20,13 @@ password? (= section :settings-password) locale (i18n/use-locale)] [:header.main-bar - [:nav.library-header-navigation - [:a.library-header-navigation-item + [:nav + [:a.nav-item {:class (when profile? "current") :on-click #(st/emit! (rt/nav :settings-profile))} (t locale "settings.profile")] - [:a.library-header-navigation-item + [:a.nav-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 d2a9db53f..90386e45b 100644 --- a/frontend/src/uxbox/main/ui/settings/password.cljs +++ b/frontend/src/uxbox/main/ui/settings/password.cljs @@ -61,7 +61,7 @@ :validators [password-equality] :initial {})] [:form.password-form {:on-submit #(on-submit % form)} - [:span.user-settings-label (tr "settings.password.change-password")] + [:span.settings-label (tr "settings.password.change-password")] [:input.input-text {:type "password" :name "password-old" @@ -105,5 +105,5 @@ (mf/defc password-page [props] - [:section.user-settings-page + [:section.settings-password [:& password-form]]) diff --git a/frontend/src/uxbox/main/ui/settings/profile.cljs b/frontend/src/uxbox/main/ui/settings/profile.cljs index 609856589..97ff7e849 100644 --- a/frontend/src/uxbox/main/ui/settings/profile.cljs +++ b/frontend/src/uxbox/main/ui/settings/profile.cljs @@ -25,7 +25,7 @@ (l/derive st/state))) (s/def ::fullname ::fm/not-empty-string) -(s/def ::lang ::fm/not-empty-string) +(s/def ::lang (s/nilable ::fm/not-empty-string)) (s/def ::email ::fm/email) (s/def ::profile-form @@ -59,9 +59,12 @@ (mf/defc profile-form [props] (let [locale (i18n/use-locale) - {:keys [data] :as form} (fm/use-form ::profile-form #(deref profile-iref))] + form (fm/use-form ::profile-form #(deref profile-iref)) + data (:data form)] + (prn "data" form) [:form.profile-form {:on-submit #(on-submit % form)} - [:span.user-settings-label (t locale "settings.profile.section-basic-data")] + [:span.settings-label (t locale "settings.profile.section-basic-data")] + [:input.input-text {:type "text" :name "fullname" @@ -70,7 +73,6 @@ :on-change (fm/on-input-change form :fullname) :value (:fullname data "") :placeholder (t locale "settings.profile.your-name")}] - [:& fm/field-error {:form form :type #{::api} :field :fullname}] @@ -83,13 +85,12 @@ :on-change (fm/on-input-change form :email) :value (:email data "") :placeholder (t locale "settings.profile.your-email")}] - [:& fm/field-error {:form form :type #{::api} :field :email}] - [:span.user-settings-label (t locale "settings.profile.lang")] - [:select.input-select {:value (:lang data) + [:span.settings-label (t locale "settings.profile.lang")] + [:select.input-select {:value (or (:lang data) "en") :name "lang" :class (fm/error-class form :lang) :on-blur (fm/on-input-blur form :lang) @@ -107,7 +108,8 @@ (mf/defc profile-photo-form [props] - (let [photo (:photo-uri (mf/deref profile-iref)) + (let [profile (mf/deref profile-iref) + photo (:photo-uri profile) photo (if (or (str/empty? photo) (nil? photo)) "images/avatar.jpg" photo) @@ -129,8 +131,10 @@ ;; --- Profile Page (mf/defc profile-page - [] - [:section.user-settings-page - [:span.user-settings-label (tr "settings.profile.your-avatar")] - [:& profile-photo-form] - [:& profile-form]]) + {::mf/wrap-props false} + [props] + (let [locale (i18n/use-locale)] + [:section.settings-profile + [:span.settings-label (t locale "settings.profile.your-avatar")] + [:& profile-photo-form] + [:& profile-form]]))