0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-10 06:41:40 -05:00

🚧 Basic user profile style refactor.

This commit is contained in:
Andrey Antukh 2020-03-24 23:25:16 +01:00
parent 0c4c50270c
commit 62d90caf51
13 changed files with 112 additions and 122 deletions

View file

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

View file

@ -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;
}
}

View file

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

View file

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

View file

@ -129,6 +129,14 @@
}
}
}
&.profile-bar {
background-color: $color-gray-10;
.library-bar-inside {
display: none;
}
}
}
.projects-row {

View file

@ -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;
}
}
}

View file

@ -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 <delacruzgarciajuan@gmail.com>
;; Copyright (c) 2020 Andrey Antukh <niwi@niwi.nz>
;; 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}))]]]))

View file

@ -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 <niwi@niwi.nz>
;; Copyright (c) 2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
;; Copyright (c) 2020 UXBOX Labs SL
(ns uxbox.main.ui.dashboard.project
(:require

View file

@ -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 <niwi@niwi.nz>
;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
;; Copyright (c) 2020 UXBOX Labs SL
(ns uxbox.main.ui.dashboard.recent-files
(:require

View file

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

View file

@ -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 <niwi@niwi.nz>
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
;; 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")]]]))

View file

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

View file

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