3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-05 17:17:18 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Fix many issues on profile settings page.

Browse source
This commit is contained in:
Andrey Antukh 2020-03-26 11:25:16 +01:00
parent 8d6d839878
commit b39d747e8f
7 changed files with 68 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -32,21 +32,14 @@
background-color: $color-white; background-color: $color-white;
display: grid; display: grid;
grid-template-rows: 40px 1fr; grid-template-rows: 40px 1fr;
grid-template-columns: 40px 1fr; grid-template-columns: 1fr;
height: 100vh; height: 100vh;
& .left-bar {
grid-row: 2;
grid-column: 1;
}
& .settings-content { & .settings-content {
grid-row: 1 / span 2; grid-row: 1;
} }
} }
.dashboard-content { .dashboard-content {
background-color: lighten($color-gray-10, 5%); background-color: lighten($color-gray-10, 5%);
display: flex; display: flex;

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

@ -44,7 +44,6 @@
height: 30px; height: 30px;
width: 30px; width: 30px;
} }
} }
.main-nav { .main-nav {

41
frontend/resources/styles/main/partials/user-settings.scss
View file

@ -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; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 auto; margin: 0 auto;
width: 500px; width: 500px;
.user-settings-label { .settings-label {
color: $color-black; color: $color-black;
font-size: $fs15; font-size: $fs15;
margin: $x-big 0 $x-small 0; margin: $x-big 0 $x-small 0;
@ -13,6 +49,7 @@
.input-text { .input-text {
color: $color-gray-60; color: $color-gray-60;
background-color: $color-gray-10;
} }
.btn-primary { .btn-primary {

7
frontend/src/uxbox/main/ui/settings.cljs
View file

@ -12,6 +12,8 @@
[rumext.alpha :as mf] [rumext.alpha :as mf]
[uxbox.builtins.icons :as i] [uxbox.builtins.icons :as i]
[uxbox.main.refs :as refs] [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.dashboard.profile :refer [profile-section]]
[uxbox.main.ui.messages :refer [messages-widget]] [uxbox.main.ui.messages :refer [messages-widget]]
[uxbox.main.ui.settings.header :refer [header]] [uxbox.main.ui.settings.header :refer [header]]
@ -24,11 +26,10 @@
profile (mf/deref refs/profile)] profile (mf/deref refs/profile)]
[:main.settings-main [:main.settings-main
[:& messages-widget] [:& messages-widget]
[:section.settings-layout [:section.settings-layout
[:div.main-logo i/logo-icon]
[:div.left-bar]
[:div.settings-content [:div.settings-content
[:div.main-logo {:on-click #(st/emit! (rt/nav :dashboard-team {:team-id "self"}))}
i/logo-icon]
[:& header {:section section}] [:& header {:section section}]
(case section (case section
:settings-profile (mf/element profile-page) :settings-profile (mf/element profile-page)

7
frontend/src/uxbox/main/ui/settings/header.cljs
View file

@ -20,12 +20,13 @@
password? (= section :settings-password) password? (= section :settings-password)
locale (i18n/use-locale)] locale (i18n/use-locale)]
[:header.main-bar [:header.main-bar
[:nav.library-header-navigation [:nav
[:a.library-header-navigation-item [:a.nav-item
{:class (when profile? "current") {:class (when profile? "current")
:on-click #(st/emit! (rt/nav :settings-profile))} :on-click #(st/emit! (rt/nav :settings-profile))}
(t locale "settings.profile")] (t locale "settings.profile")]
[:a.library-header-navigation-item [:a.nav-item
{:class (when password? "current") {:class (when password? "current")
:on-click #(st/emit! (rt/nav :settings-password))} :on-click #(st/emit! (rt/nav :settings-password))}
(t locale "settings.password")]]])) (t locale "settings.password")]]]))

4
frontend/src/uxbox/main/ui/settings/password.cljs
View file

@ -61,7 +61,7 @@
:validators [password-equality] :validators [password-equality]
:initial {})] :initial {})]
[:form.password-form {:on-submit #(on-submit % form)} [: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 [:input.input-text
{:type "password" {:type "password"
:name "password-old" :name "password-old"
@ -105,5 +105,5 @@
(mf/defc password-page (mf/defc password-page
[props] [props]
[:section.user-settings-page [:section.settings-password
[:& password-form]]) [:& password-form]])

28
frontend/src/uxbox/main/ui/settings/profile.cljs
View file

@ -25,7 +25,7 @@
(l/derive st/state))) (l/derive st/state)))
(s/def ::fullname ::fm/not-empty-string) (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 ::email ::fm/email)
(s/def ::profile-form (s/def ::profile-form
@ -59,9 +59,12 @@
(mf/defc profile-form (mf/defc profile-form
[props] [props]
(let [locale (i18n/use-locale) (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)} [: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 [:input.input-text
{:type "text" {:type "text"
:name "fullname" :name "fullname"
@ -70,7 +73,6 @@
:on-change (fm/on-input-change form :fullname) :on-change (fm/on-input-change form :fullname)
:value (:fullname data "") :value (:fullname data "")
:placeholder (t locale "settings.profile.your-name")}] :placeholder (t locale "settings.profile.your-name")}]
[:& fm/field-error {:form form [:& fm/field-error {:form form
:type #{::api} :type #{::api}
:field :fullname}] :field :fullname}]
@ -83,13 +85,12 @@
:on-change (fm/on-input-change form :email) :on-change (fm/on-input-change form :email)
:value (:email data "") :value (:email data "")
:placeholder (t locale "settings.profile.your-email")}] :placeholder (t locale "settings.profile.your-email")}]
[:& fm/field-error {:form form [:& fm/field-error {:form form
:type #{::api} :type #{::api}
:field :email}] :field :email}]
[:span.user-settings-label (t locale "settings.profile.lang")] [:span.settings-label (t locale "settings.profile.lang")]
[:select.input-select {:value (:lang data) [:select.input-select {:value (or (:lang data) "en")
:name "lang" :name "lang"
:class (fm/error-class form :lang) :class (fm/error-class form :lang)
:on-blur (fm/on-input-blur form :lang) :on-blur (fm/on-input-blur form :lang)
@ -107,7 +108,8 @@
(mf/defc profile-photo-form (mf/defc profile-photo-form
[props] [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)) photo (if (or (str/empty? photo) (nil? photo))
"images/avatar.jpg" "images/avatar.jpg"
photo) photo)
@ -129,8 +131,10 @@
;; --- Profile Page ;; --- Profile Page
(mf/defc profile-page (mf/defc profile-page
[] {::mf/wrap-props false}
[:section.user-settings-page [props]
[:span.user-settings-label (tr "settings.profile.your-avatar")] (let [locale (i18n/use-locale)]
[:section.settings-profile
[:span.settings-label (t locale "settings.profile.your-avatar")]
[:& profile-photo-form] [:& profile-photo-form]
[:& profile-form]]) [:& profile-form]]))