From e6aaf65d032ecd02b4e2bbc710bce58a264696e8 Mon Sep 17 00:00:00 2001 From: Juan de la Cruz Date: Wed, 6 May 2020 08:45:15 +0200 Subject: [PATCH 1/3] changing btn styles --- .../resources/styles/common/framework.scss | 77 +++++++------------ .../styles/main/partials/project-bar.scss | 2 +- .../styles/main/partials/viewer-header.scss | 3 +- frontend/src/uxbox/main/ui/viewer/header.cljs | 2 +- 4 files changed, 30 insertions(+), 54 deletions(-) diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index 02022aa2f..28ddbf920 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/frontend/resources/styles/common/framework.scss @@ -2,60 +2,55 @@ // 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-2016 Andrey Antukh -// Copyright (c) 2015-2016 Juan de la Cruz +// Copyright (c) 2020 Andrey Antukh +// Copyright (c) 2020 Juan de la Cruz // Buttons %btn { appearance: none; - align-items: stretch; + align-items: center; border: none; border-radius: 3px; cursor: pointer; display: flex; - font-size: $fs14; + font-size: $fs13; + height: 30px; justify-content: center; - padding: 1rem; + padding: 0 1rem; transition: all .4s; - &.btn-big { - padding: 2rem 1rem; - } - &.btn-noshr { - flex-shrink: 0; + &.btn-large { + font-size: $fs14; + height: 40px; } &.btn-small { - font-size: $fs13; - padding: .7rem 1rem; - line-height: 1.15; + height: 25px; } } .btn-primary { @extend %btn; - align-items: center; background: $color-primary; color: $color-black; - justify-content: center; - display: flex; - padding: 1rem; &:hover { background: $color-black; color: $color-primary; } } -.btn-success { +.btn-secondary { @extend %btn; - background: $color-success; - color: $color-white; + background: $color-white; + border: 1px solid $color-black; + color: $color-black; &:hover { - background: $color-success-dark; - color: $color-white; + background: $color-primary; + border-color: $color-primary; + color: $color-black; } } -.btn-delete { +.btn-warning { @extend %btn; background: $color-danger; color: $color-white; @@ -65,6 +60,15 @@ } } +.btn-text-basic { + @extend %btn; + background: transparent; + color: $color-primary-dark; + &:hover { + background: rgba(49,239,184,.12); + } +} + .btn-gray { @extend %btn; background: $color-gray-30; @@ -74,33 +78,6 @@ } } -.btn-complete { - @extend %btn; - background: $color-complete; - color: $color-white; - &:hover { - background: $color-complete-dark; - color: $color-white; - } -} - -.btn-transparent { - @extend %btn; - background: transparent; - border: 2px solid $color-white; - color: $color-white; - &:hover { - background: $color-white; - color: $color-info-dark; - } -} -.btn-large { - flex-grow: 3; - max-width: 400px; - flex-basis: 60%; - width: 100%; -} - .btn-option { display: flex; a { diff --git a/frontend/resources/styles/main/partials/project-bar.scss b/frontend/resources/styles/main/partials/project-bar.scss index aef5e3aa3..709d2b2ea 100644 --- a/frontend/resources/styles/main/partials/project-bar.scss +++ b/frontend/resources/styles/main/partials/project-bar.scss @@ -35,7 +35,7 @@ } .btn-primary, - .btn-delete { + .btn-warning { font-size: $fs13; margin-bottom: .5rem; padding: 8px $small; diff --git a/frontend/resources/styles/main/partials/viewer-header.scss b/frontend/resources/styles/main/partials/viewer-header.scss index 6402b4d27..5a493a1c7 100644 --- a/frontend/resources/styles/main/partials/viewer-header.scss +++ b/frontend/resources/styles/main/partials/viewer-header.scss @@ -197,10 +197,9 @@ justify-content: center; align-items: center; - .btn-delete, + .btn-warning, .btn-primary { width: 50%; - padding: $small; } } diff --git a/frontend/src/uxbox/main/ui/viewer/header.cljs b/frontend/src/uxbox/main/ui/viewer/header.cljs index 98b48b499..518d1d563 100644 --- a/frontend/src/uxbox/main/ui/viewer/header.cljs +++ b/frontend/src/uxbox/main/ui/viewer/header.cljs @@ -88,7 +88,7 @@ [:span.share-link-subtitle (t locale "viewer.header.share.subtitle")] [:div.share-link-buttons (if (string? token) - [:button.btn-delete {:on-click delete} + [:button.btn-warning {:on-click delete} (t locale "viewer.header.share.remove-link")] [:button.btn-primary {:on-click create} (t locale "viewer.header.share.create-link")])]]]])) From 323832da633bb7a7762880a219ae2f565a230a0e Mon Sep 17 00:00:00 2001 From: Juan de la Cruz Date: Wed, 6 May 2020 09:35:28 +0200 Subject: [PATCH 2/3] Add btn icon styles --- .../resources/styles/common/framework.scss | 53 +++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index 28ddbf920..3b87bfe35 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/frontend/resources/styles/common/framework.scss @@ -19,9 +19,17 @@ justify-content: center; padding: 0 1rem; transition: all .4s; + svg { + height: 15px; + width: 15px; + } &.btn-large { font-size: $fs14; height: 40px; + svg { + height: 20px; + width: 20px; + } } &.btn-small { height: 25px; @@ -69,6 +77,51 @@ } } +.btn-icon-dark { + @extend %btn; + background: $color-gray-60; + color: $color-gray-20; + svg { + fill: $color-gray-20; + } + &:hover { + background: $color-primary; + svg { + fill: $color-gray-60; + } + } +} + +.btn-icon-light { + @extend %btn; + background: $color-gray-10; + color: $color-gray-40; + svg { + fill: $color-gray-40; + } + &:hover { + background: $color-primary; + svg { + fill: $color-gray-60; + } + } +} + +.btn-icon-basic { + @extend %btn; + background: transparent; + color: $color-gray-60; + svg { + fill: $color-gray-60; + } + &:hover { + background: transparent; + svg { + fill: $color-primary; + } + } +} + .btn-gray { @extend %btn; background: $color-gray-30; From c4a21907bd5fc714444cee62c483e5f98baf9cfd Mon Sep 17 00:00:00 2001 From: Juan de la Cruz Date: Wed, 6 May 2020 15:31:44 +0200 Subject: [PATCH 3/3] Apply all btn changes --- .../resources/styles/common/framework.scss | 18 ++----- .../styles/main/layouts/library-page.scss | 23 +++----- .../resources/styles/main/layouts/login.scss | 2 +- .../styles/main/partials/dashboard-grid.scss | 6 +-- .../styles/main/partials/library-bar.scss | 24 +-------- .../styles/main/partials/main-bar.scss | 2 +- .../styles/main/partials/viewer-header.scss | 35 +------------ .../main/partials/workspace-header.scss | 52 +------------------ .../src/uxbox/main/ui/dashboard/grid.cljs | 2 +- .../src/uxbox/main/ui/dashboard/library.cljs | 6 +-- .../src/uxbox/main/ui/dashboard/project.cljs | 2 +- .../uxbox/main/ui/dashboard/recent_files.cljs | 2 +- .../src/uxbox/main/ui/dashboard/sidebar.cljs | 2 +- frontend/src/uxbox/main/ui/login.cljs | 4 +- .../src/uxbox/main/ui/settings/password.cljs | 2 +- .../src/uxbox/main/ui/settings/profile.cljs | 2 +- frontend/src/uxbox/main/ui/viewer/header.cljs | 4 +- .../src/uxbox/main/ui/workspace/header.cljs | 4 +- 18 files changed, 32 insertions(+), 160 deletions(-) diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index 3b87bfe35..e0b5b2386 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/frontend/resources/styles/common/framework.scss @@ -81,6 +81,7 @@ @extend %btn; background: $color-gray-60; color: $color-gray-20; + padding: $x-small; svg { fill: $color-gray-20; } @@ -96,6 +97,7 @@ @extend %btn; background: $color-gray-10; color: $color-gray-40; + padding: $x-small; svg { fill: $color-gray-40; } @@ -111,6 +113,7 @@ @extend %btn; background: transparent; color: $color-gray-60; + padding: $x-small; svg { fill: $color-gray-60; } @@ -160,21 +163,6 @@ } } -.btn-dashboard { - @extend %btn; - background-color: $color-white; - border: 1px solid $color-black; - border-radius: 2px; - color: $color-black; - padding: $x-small $small; - - &:hover { - background-color: $color-primary; - border-color: $color-primary; - color: $color-black; - } -} - input[type=button][disabled], .btn-disabled { background-color: $color-gray-10; diff --git a/frontend/resources/styles/main/layouts/library-page.scss b/frontend/resources/styles/main/layouts/library-page.scss index d2b50457d..8e5261c8a 100644 --- a/frontend/resources/styles/main/layouts/library-page.scss +++ b/frontend/resources/styles/main/layouts/library-page.scss @@ -71,19 +71,8 @@ overflow: hidden; } -.library-sidebar-add-item { - background-color: $color-primary; - border-radius: 2px; - border: none; - cursor: pointer; - font-size: 12px; - padding: $size-2; +.btn-primary { width: 100%; - - &:hover { - background-color: $color-black; - color: $color-primary; - } } .library-sidebar-list { @@ -157,8 +146,7 @@ .library-top-menu-actions { display: flex; - .btn-dashboard { - background-color: transparent; + .btn-secondary { margin-left: $size-2; } } @@ -166,7 +154,12 @@ .library-top-menu-actions-delete { display: flex; justify-content: center; - flex-direction: column + flex-direction: column; + &:hover { + svg { + fill: $color-danger; + } + } } .library-page-cards-container { diff --git a/frontend/resources/styles/main/layouts/login.scss b/frontend/resources/styles/main/layouts/login.scss index ff49584ba..b5e4a5d4e 100644 --- a/frontend/resources/styles/main/layouts/login.scss +++ b/frontend/resources/styles/main/layouts/login.scss @@ -108,7 +108,7 @@ } } - .btn-dashboard { + .btn-secondary { margin-top: 5rem; } diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss index 97bd06fc6..d3fef6d85 100644 --- a/frontend/resources/styles/main/partials/dashboard-grid.scss +++ b/frontend/resources/styles/main/partials/dashboard-grid.scss @@ -224,7 +224,7 @@ transform: scale(1.4); svg { - fill: $color-danger; + fill: $color-primary-dark; } } @@ -462,7 +462,3 @@ margin-bottom: $medium; } } - -.grid-files-link-text { - color: $color-black; -} diff --git a/frontend/resources/styles/main/partials/library-bar.scss b/frontend/resources/styles/main/partials/library-bar.scss index 6f2196d02..ab5623440 100644 --- a/frontend/resources/styles/main/partials/library-bar.scss +++ b/frontend/resources/styles/main/partials/library-bar.scss @@ -149,30 +149,8 @@ font-size: $fs14; } - .add-project { - align-items: center; - background-color: $color-gray-10; - border-radius: $br-small; - border: 1px solid transparent; - cursor: pointer; - display: flex; - justify-content: center; + .btn-icon-light { margin-left: auto; - padding: $x-small; - - svg { - fill: $color-gray-60; - height: $size-2; - width: $size-2; - } - - &:hover { - background-color: $color-primary; - - svg { - fill: $color-gray-60; - } - } } } diff --git a/frontend/resources/styles/main/partials/main-bar.scss b/frontend/resources/styles/main/partials/main-bar.scss index 759ad2dcf..5b5d5990a 100644 --- a/frontend/resources/styles/main/partials/main-bar.scss +++ b/frontend/resources/styles/main/partials/main-bar.scss @@ -20,7 +20,7 @@ margin-right: $small; } - .btn-dashboard { + .btn-secondary { flex-shrink: 0; margin-left: auto; } diff --git a/frontend/resources/styles/main/partials/viewer-header.scss b/frontend/resources/styles/main/partials/viewer-header.scss index 5a493a1c7..20fda06d5 100644 --- a/frontend/resources/styles/main/partials/viewer-header.scss +++ b/frontend/resources/styles/main/partials/viewer-header.scss @@ -112,7 +112,7 @@ .options-zone { align-items: center; display: flex; - width: 350px; + width: 365px; justify-content: flex-end; position: relative; @@ -134,39 +134,6 @@ height: 20px; } } - - .btn-primary { - padding: 0.4rem 1rem; - } - - .btn-primary.btn-small { - height: 25px; - } - - .btn-fullscreen { - align-items: center; - background-color: $color-gray-60; - border-radius: $br-small; - cursor: pointer; - display: flex; - height: 25px; - justify-content: center; - width: 25px; - - svg { - fill: $color-gray-20; - width: 15px; - height: 15px; - } - - &:hover { - background-color: $color-primary; - - svg { - fill: $color-gray-60; - } - } - } } .share-link-dropdown { diff --git a/frontend/resources/styles/main/partials/workspace-header.scss b/frontend/resources/styles/main/partials/workspace-header.scss index 638d0849f..16bd5a8da 100644 --- a/frontend/resources/styles/main/partials/workspace-header.scss +++ b/frontend/resources/styles/main/partials/workspace-header.scss @@ -75,36 +75,11 @@ } } - .menu-button { - align-items: center; - background-color: $color-gray-60; - cursor: pointer; - border-radius: $br-small; - display: flex; - margin-right: $x-small; - padding: $x-small; - width: 25px; - height: 25px; - - svg { - height: 15px; - fill: $color-gray-20; - width: 15px; - } - - &:hover { - background-color: $color-primary; - - svg { - fill: $color-gray-60; - } - } - } - .project-tree { align-items: center; cursor: pointer; display: flex; + margin-left: $x-small; padding: $x-small; svg { @@ -128,31 +103,6 @@ } } - .preview-button { - align-items: center; - background-color: $color-gray-60; - border-radius: $br-small; - cursor: pointer; - display: flex; - height: 25px; - justify-content: center; - width: 25px; - - svg { - fill: $color-gray-20; - width: 15px; - height: 15px; - } - - &:hover { - background-color: $color-primary; - - svg { - fill: $color-gray-60; - } - } - } - .menu { position: absolute; top: 40px; diff --git a/frontend/src/uxbox/main/ui/dashboard/grid.cljs b/frontend/src/uxbox/main/ui/dashboard/grid.cljs index 059ae22ec..a44a26cc8 100644 --- a/frontend/src/uxbox/main/ui/dashboard/grid.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/grid.cljs @@ -113,4 +113,4 @@ [:div.grid-files-empty [:div.grid-files-desc (t locale "dashboard.grid.empty-files")] [:div.grid-files-link - [:a.grid-files-link-text {:on-click on-click} (t locale "ds.new-file")]]])]])) + [:a.btn-text-basic.btn-small {:on-click on-click} (t locale "ds.new-file")]]])]])) diff --git a/frontend/src/uxbox/main/ui/dashboard/library.cljs b/frontend/src/uxbox/main/ui/dashboard/library.cljs index a6e4d3765..543cb7875 100644 --- a/frontend/src/uxbox/main/ui/dashboard/library.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/library.cljs @@ -107,7 +107,7 @@ [{:keys [section items team-id library-id]}] (let [locale (i18n/use-locale)] [:aside.library-sidebar - [:button.library-sidebar-add-item + [:button.btn-primary.btn-small {:type "button" :on-click #(create-library section team-id)} (t locale (str "dashboard.library.add-library." (name section)))] @@ -166,12 +166,12 @@ i/trash] (if (= section :palettes) - [:button.btn-dashboard + [:button.btn-secondary.btn-small {:on-click #(create-item section library-id)} (t locale (str "dashboard.library.add-item." (name section)))] [:* - [:label {:for "file-upload" :class-name "btn-dashboard"} + [:label {:for "file-upload" :class-name "btn-secondary btn-small"} (t locale (str "dashboard.library.add-item." (name section)))] [:input {:on-change #(create-item section library-id %) :id "file-upload" diff --git a/frontend/src/uxbox/main/ui/dashboard/project.cljs b/frontend/src/uxbox/main/ui/dashboard/project.cljs index 535553657..902615039 100644 --- a/frontend/src/uxbox/main/ui/dashboard/project.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/project.cljs @@ -66,7 +66,7 @@ :on-key-down on-key-down :on-blur on-blur :default-value (:name project)}])]) - [:a.btn-dashboard {:on-click #(do + [:a.btn-secondary.btn-small {:on-click #(do (dom/prevent-default %) (st/emit! (dsh/create-file project-id)))} (t locale "dashboard.header.new-file")]])) diff --git a/frontend/src/uxbox/main/ui/dashboard/recent_files.cljs b/frontend/src/uxbox/main/ui/dashboard/recent_files.cljs index 807a04a87..d03fe458e 100644 --- a/frontend/src/uxbox/main/ui/dashboard/recent_files.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/recent_files.cljs @@ -46,7 +46,7 @@ (let [locale (i18n/use-locale)] [:header#main-bar.main-bar [:h1.dashboard-title "Recent"] - [:a.btn-dashboard {:on-click #(st/emit! dsh/create-project)} + [:a.btn-secondary.btn-small {:on-click #(st/emit! dsh/create-project)} (t locale "dashboard.header.new-project")]])) (mf/defc recent-project diff --git a/frontend/src/uxbox/main/ui/dashboard/sidebar.cljs b/frontend/src/uxbox/main/ui/dashboard/sidebar.cljs index f7c8f5fef..e4e75edbb 100644 --- a/frontend/src/uxbox/main/ui/dashboard/sidebar.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/sidebar.cljs @@ -119,7 +119,7 @@ [:div.projects-row [:span "PROJECTS"] - [:a.add-project {:on-click #(st/emit! dsh/create-project)} + [:a.btn-icon-light.btn-small {:on-click #(st/emit! dsh/create-project)} i/close]] [:& sidebar-projects diff --git a/frontend/src/uxbox/main/ui/login.cljs b/frontend/src/uxbox/main/ui/login.cljs index 0049de470..b6ee0a237 100644 --- a/frontend/src/uxbox/main/ui/login.cljs +++ b/frontend/src/uxbox/main/ui/login.cljs @@ -70,7 +70,7 @@ :on-change (fm/on-input-change form :password) :placeholder (tr "login.password") :type "password"}] - [:input.btn-primary + [:input.btn-primary.btn-large {:name "login" :tab-index "4" :class (when-not (:valid form) "btn-disabled") @@ -85,7 +85,7 @@ [:a {:on-click #(st/emit! (rt/nav :profile-register)) :tab-index "6"} (tr "login.register")]] - [:a.btn-dashboard {:on-click #(st/emit! da/create-demo-profile) + [:a.btn-secondary.btn-small {:on-click #(st/emit! da/create-demo-profile) :tab-index "7" :title (tr "login.create-demo-profile-description")} (tr "login.create-demo-profile")]]])) diff --git a/frontend/src/uxbox/main/ui/settings/password.cljs b/frontend/src/uxbox/main/ui/settings/password.cljs index bef226283..6baa09e8f 100644 --- a/frontend/src/uxbox/main/ui/settings/password.cljs +++ b/frontend/src/uxbox/main/ui/settings/password.cljs @@ -95,7 +95,7 @@ [:& fm/field-error {:form form :field :password-2}] - [:input.btn-primary + [:input.btn-primary.btn-large {:type "submit" :class (when-not (:valid form) "btn-disabled") :disabled (not (:valid form)) diff --git a/frontend/src/uxbox/main/ui/settings/profile.cljs b/frontend/src/uxbox/main/ui/settings/profile.cljs index a4eaa7e3d..73431667a 100644 --- a/frontend/src/uxbox/main/ui/settings/profile.cljs +++ b/frontend/src/uxbox/main/ui/settings/profile.cljs @@ -102,7 +102,7 @@ :on-change (fm/on-input-change form :theme)} [:option {:value "light"} "Default"]] - [:input.btn-primary + [:input.btn-primary.btn-large {:type "submit" :class (when-not (:valid form) "btn-disabled") :disabled (not (:valid form)) diff --git a/frontend/src/uxbox/main/ui/viewer/header.cljs b/frontend/src/uxbox/main/ui/viewer/header.cljs index 518d1d563..4b6276087 100644 --- a/frontend/src/uxbox/main/ui/viewer/header.cljs +++ b/frontend/src/uxbox/main/ui/viewer/header.cljs @@ -133,7 +133,7 @@ (when-not anonymous? [:& share-link {:page (:page data)}]) (when-not anonymous? - [:a {:on-click on-edit} + [:a.btn-text-basic.btn-small {:on-click on-edit} (t locale "viewer.header.edit-page")]) [:& zoom-widget @@ -144,7 +144,7 @@ :on-zoom-to-100 #(st/emit! dv/reset-zoom) :on-zoom-to-200 #(st/emit! dv/zoom-to-200)}] - [:span.btn-fullscreen.tooltip.tooltip-bottom + [:span.btn-icon-dark.btn-small.tooltip.tooltip-bottom {:alt (t locale "viewer.header.fullscreen") :on-click toggle-fullscreen} (if fullscreen? diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs index 405010be9..15899cb81 100644 --- a/frontend/src/uxbox/main/ui/workspace/header.cljs +++ b/frontend/src/uxbox/main/ui/workspace/header.cljs @@ -70,7 +70,7 @@ locale (i18n/use-locale)] [:div.menu-section - [:div.menu-button {:on-click #(reset! show-menu? true)} i/actions] + [:div.btn-icon-dark.btn-small {:on-click #(reset! show-menu? true)} i/actions] [:div.project-tree {:alt (t locale "header.sitemap") :class (classnames :selected (contains? layout :sitemap)) :on-click toggle-sitemap} @@ -148,7 +148,7 @@ :on-zoom-to-100 #(st/emit! dw/reset-zoom) :on-zoom-to-200 #(st/emit! dw/zoom-to-200)}] - [:a.preview-button + [:a.btn-icon-dark.btn-small {;; :target "__blank" :alt (t locale "workspace.header.viewer") :href (str "#" view-url)} i/play]]]))