Deduplicate floating button code (#340)

Rename minor to major and inverse the logic.
jakearchibald · Oct 13, 2021 · 68c6574 · 68c6574
1 parent 967c86d
commit 68c6574
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 63 deletions.
diff --git a/src/css/_components.scss b/src/css/_components.scss
@@ -1,7 +1,6 @@
 @import 'components/settings';
 @import 'components/material-switch';
 @import 'components/toolbar';
-@import 'components/minor-floating-action-button';
 @import 'components/floating-action-button';
 @import 'components/spinner';
 @import 'components/toasts';

diff --git a/src/css/_main-layout.scss b/src/css/_main-layout.scss
@@ -49,7 +49,7 @@
   .minor-action-container {
     display: flex;
 
-    .minor-floating-action-button {
+    .floating-action-button {
       margin-right: 10px;
     }
   }
@@ -68,7 +68,7 @@
       bottom: 58px;
       right: 8px;
 
-      .minor-floating-action-button {
+      .floating-action-button {
         margin-bottom: 10px;
         margin-right: 0;
       }

diff --git a/src/css/components/_floating-action-button.scss b/src/css/components/_floating-action-button.scss
@@ -1,20 +1,22 @@
 .floating-action-button {
-  width: 56px;
-  height: 56px;
-  border-radius: 28px;
-  background-color: #00bcd4;
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  background-color: #fff;
   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
   position: relative;
+  cursor: pointer;
+  overflow: hidden;
+  z-index: 0; // Is this really needed?
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
 
   @media (min-width: 640px) {
     box-shadow: 0 4px 11px rgba(0, 0, 0, 0.3);
   }
 
-  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
-
   &:hover,
   &.key-focused {
     transform: scale(1.15);
@@ -29,20 +31,35 @@
     display: block;
     width: 24px;
     height: 24px;
-    fill: #fff;
+    fill: #000;
     z-index: 1;
   }
 
-  .spinner {
-    position: absolute;
-    top: 0;
-    left: 0;
+  .ripple {
+    background-color: #00bcd4;
+  }
+
+  &.major-floating-action-button {
     width: 56px;
     height: 56px;
-    border-color: #fff;
-  }
+    border-radius: 28px;
+    background-color: #00bcd4;
 
-  .ripple {
-    background-color: #fff;
+    .icon {
+      fill: #fff;
+    }
+
+    .spinner {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 56px;
+      height: 56px;
+      border-color: #fff;
+    }
+
+    .ripple {
+      background-color: #fff;
+    }
   }
 }
diff --git a/src/css/components/_minor-floating-action-button.scss b/src/css/components/_minor-floating-action-button.scss
diff --git a/src/js/page/ui/floating-action-button.js b/src/js/page/ui/floating-action-button.js
@@ -2,24 +2,27 @@ import { strToEl } from '../utils';
 import Ripple from './ripple';
 
 export default class FloatingActionButton {
-  constructor({ title, href, iconSvg, classList, major = false }) {
+  constructor({ title, href, iconSvg, major = false }) {
     this.container = strToEl(
       (href ? '<a>' : '<div role="button" tabindex="0">') +
         iconSvg +
       (href ? '</a>' : '</div>') +
     '');
 
+    const classes = ['floating-action-button'];
+
     if (href) {
       this.container.href = href;
     }
     if (title) {
       this.container.setAttribute('title', title);
     }
-    this.container.classList.add(major ? 'floating-action-button' : 'minor-floating-action-button');
-    if (classList) {
-      classList.forEach((className) => { this.container.classList.add(className); });
+    if (major) {
+      classes.push('major-floating-action-button');
     }
 
+    this.container.classList.add(...classes);
+
     this._ripple = new Ripple();
     this.container.appendChild(this._ripple.container);
     this.container.addEventListener('click', () => this.onClick());