Merge pull request #198 from uxbox/300/button-system

300/button system

frontend/resources/styles/common/framework.scss

@@ -2,60 +2,63 @@
 // 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 <niwi@niwi.nz>
+// Copyright (c) 2020 Andrey Antukh <niwi@niwi.nz>
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+// Copyright (c) 2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 // 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 {
+  svg {
-    padding: 2rem 1rem;
+    height: 15px;
+    width: 15px;
   }
-  &.btn-noshr {
+  &.btn-large {
-    flex-shrink: 0;
+    font-size: $fs14;
+    height: 40px;
+    svg {
+      height: 20px;
+      width: 20px;
+    }
   }
   &.btn-small {
-    font-size: $fs13;
+    height: 25px;
-    padding: .7rem 1rem;
-    line-height: 1.15;
   }
 }
 
 .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;
+  background: $color-white;
-  color: $color-white;
+  border: 1px solid $color-black;
+  color: $color-black;
   &:hover {
-    background: $color-success-dark;
+    background: $color-primary;
-    color: $color-white;
+    border-color: $color-primary;
+    color: $color-black;
   }
 }
 
-.btn-delete {
+.btn-warning {
   @extend %btn;
   background: $color-danger;
   color: $color-white;
@@ -65,6 +68,63 @@
   }
 }
 
+.btn-text-basic {
+  @extend %btn;
+  background: transparent;
+  color: $color-primary-dark;
+  &:hover {
+    background: rgba(49,239,184,.12);
+  }
+}
+
+.btn-icon-dark {
+  @extend %btn;
+  background: $color-gray-60;
+  color: $color-gray-20;
+  padding: $x-small;
+  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;
+  padding: $x-small;
+  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;
+  padding: $x-small;
+  svg {
+    fill: $color-gray-60;
+  }
+  &:hover {
+    background: transparent;
+    svg {
+      fill: $color-primary;
+    }
+  }
+}
+
 .btn-gray {
   @extend %btn;
   background: $color-gray-30;
@@ -74,33 +134,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 {
@@ -130,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;

frontend/resources/styles/main/layouts/library-page.scss

@@ -71,19 +71,8 @@
     overflow: hidden;
 }
 
-.library-sidebar-add-item {
+.btn-primary {
-    background-color: $color-primary;
-    border-radius: 2px;
-    border: none;
-    cursor: pointer;
-    font-size: 12px;
-    padding: $size-2;
     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 {
+    .btn-secondary {
-        background-color: transparent;
         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 {

frontend/resources/styles/main/layouts/login.scss

@@ -108,7 +108,7 @@
         }
       }
 
-      .btn-dashboard {
+      .btn-secondary {
         margin-top: 5rem;
       }
 

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

frontend/resources/styles/main/partials/library-bar.scss

@@ -149,30 +149,8 @@
     font-size: $fs14;
   }
 
-  .add-project {
+  .btn-icon-light {
-    align-items: center;
-    background-color: $color-gray-10;
-    border-radius: $br-small;
-    border: 1px solid transparent;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
     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;
-      }
-    }
   }
 }
 

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

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;

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 {
@@ -197,10 +164,9 @@
       justify-content: center;
       align-items: center;
 
-      .btn-delete,
+      .btn-warning,
       .btn-primary {
         width: 50%;
-        padding: $small;
       }
 
     }

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;

frontend/src/uxbox/main/ui/dashboard/grid.cljs

@@ -122,4 +122,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")]]])]]))

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"

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

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

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

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

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

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

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

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