Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 07:29:08 -05:00
Code Issues 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
Show stats 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;
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;

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

@ -44,7 +44,6 @@
height: 30px;
width: 30px;
}
}
.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;
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 {

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

@ -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)

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

@ -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")]]]))

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

@ -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]])

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

@ -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]]))