Move the quick-add to a floating action button (FAB) per Material Design guidelines

manastungare · manastungare · commit 55f64e1b4700 · 2015-02-08T14:19:38.000-08:00
diff --git a/src/browser_action.css b/src/browser_action.css
@@ -25,6 +25,33 @@ header {
   height: 48px;
   background: #0086f4;
   padding: 12px;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+}
+
+.header-placeholder {
+  height: 48px;
+}
+
+.fab {
+  height: 42px;
+  width: 42px;
+  cursor: pointer;
+  border-radius: 50%;
+  box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
+  transform: scale(1) rotate(360deg);
+  transition: transform 150ms cubic-bezier(.4,0,1,1);
+  background: #db4437;
+  color: #fff;
+  position: fixed;
+  right: 16px;
+  top: 64px;
+  padding: 9px;
+  z-index: 10;
 }
 
 .popup-title a {
@@ -81,7 +108,7 @@ section {
 
 #quick-add {
   background: #fff;
-  margin: 16px 0;
+  margin: 8px 0;
   padding: 16px;
   box-shadow: 0 2px 4px rgba(0,0,0,0.4);
 }
diff --git a/src/browser_action.html b/src/browser_action.html
@@ -15,7 +15,6 @@
   <body>
     <header>
       <div id="action-bar">
-        <img src="icons/ic_add_white_24dp.png" id="show_quick_add" class="i18n">
         <img src="icons/ic_refresh_white_24dp.png" id="sync_now" class="i18n">
         <img src="icons/ic_settings_white_24dp.png" id="show_options" class="i18n">
       </div>
@@ -24,7 +23,11 @@
           <span class="i18n" id="logo_text">Google Calendar</span>
         </a>
       </div>
+      <div class="fab">
+        <img width="24" height="24" src="icons/ic_add_white_24dp.png" id="show_quick_add" class="i18n">
+      </div>
     </header>
+    <div class="header-placeholder"></div>
     <section>
       <a id="announcement_new_features" class="i18n" href="https://github.com/manastungare/google-calendar-crx/wiki/Changes" target="_blank"></a>
       <div id="error">
