mirror of
https://github.com/penpot/penpot.git
synced 2025-03-10 14:51:37 -05:00
🚧 Basic user profile style refactor.
This commit is contained in:
Andrey Antukh
parent
0c4c50270c
commit
62d90caf51
13 changed files with 112 additions and 122 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -129,6 +129,14 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.profile-bar {
|
||||
background-color: $color-gray-10;
|
||||
|
||||
.library-bar-inside {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.projects-row {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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}))]]]))
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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))]]]))
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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")]]]))
|
||||
|
|
|
|||
|
|
@ -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]])
|
||||
|
|
|
|||
|
|
@ -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]])
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue