🚧 Basic user profile style refactor.

2025-03-18 18:51:29 -05:00 · 2020-03-24 23:25:16 +01:00 · 2020-03-24 23:25:16 +01:00 · 62d90caf51
commit 62d90caf51
parent 0c4c50270c
13 changed files with 112 additions and 122 deletions
--- a/frontend/resources/styles/common/dependencies/helpers.scss
+++ b/frontend/resources/styles/common/dependencies/helpers.scss
@ -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;
--- a/frontend/resources/styles/common/framework.scss
+++ b/frontend/resources/styles/common/framework.scss
@ -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;
      }

    }
--- a/frontend/resources/styles/main/layouts/library-page.scss
+++ b/frontend/resources/styles/main/layouts/library-page.scss
@ -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;
--- a/frontend/resources/styles/main/layouts/main-layout.scss
+++ b/frontend/resources/styles/main/layouts/main-layout.scss
@ -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;
--- a/frontend/resources/styles/main/partials/library-bar.scss
+++ b/frontend/resources/styles/main/partials/library-bar.scss
@ -129,6 +129,14 @@
      }
    }
  }
+
+  &.profile-bar {
+    background-color: $color-gray-10;
+
+    .library-bar-inside {
+      display: none;
+    }
+  }
 }

 .projects-row {
--- a/frontend/resources/styles/main/partials/user-settings.scss
+++ b/frontend/resources/styles/main/partials/user-settings.scss
@ -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;
+    }
+
+  }
 }
+
--- a/frontend/src/uxbox/main/ui/dashboard.cljs
+++ b/frontend/src/uxbox/main/ui/dashboard.cljs
@ -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}))]]]))
--- a/frontend/src/uxbox/main/ui/dashboard/project.cljs
+++ b/frontend/src/uxbox/main/ui/dashboard/project.cljs
@ -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
--- a/frontend/src/uxbox/main/ui/dashboard/recent_files.cljs
+++ b/frontend/src/uxbox/main/ui/dashboard/recent_files.cljs
@ -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
--- a/frontend/src/uxbox/main/ui/settings.cljs
+++ b/frontend/src/uxbox/main/ui/settings.cljs
@ -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))]]]))



--- a/frontend/src/uxbox/main/ui/settings/header.cljs
+++ b/frontend/src/uxbox/main/ui/settings/header.cljs
@ -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")]]]))
--- a/frontend/src/uxbox/main/ui/settings/password.cljs
+++ b/frontend/src/uxbox/main/ui/settings/password.cljs
@ -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]])
--- a/frontend/src/uxbox/main/ui/settings/profile.cljs
+++ b/frontend/src/uxbox/main/ui/settings/profile.cljs
@ -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]])