Improve settings UI

Rel: #189

assets/javascripts/views/layout/settings.coffee

@@ -9,6 +9,7 @@ class app.views.Settings extends app.View
     backBtn: 'button[data-back]'
 
   @events:
+    change: 'onChange'
     submit: 'onSubmit'
     click: 'onClick'
 
@@ -52,6 +53,10 @@ class app.views.Settings extends app.View
         app.reload()
     return
 
+  onChange: =>
+    @addClass('_dirty')
+    return
+
   onEnter: =>
     @save()
     return

assets/stylesheets/components/_mobile.scss

@@ -32,7 +32,7 @@
 
   ._header { position: fixed; }
 
-  ._header, ._list, ._sidebar-footer {
+  ._header, ._list {
     width: 100%;
     border-right: 0;
     box-shadow: none;
@@ -42,7 +42,7 @@
 
   ._settings { position: relative; }
   ._settings-tabs { display: block; }
-  ._header ._settings-btn { width: auto; }
+  ._header > ._settings-btn-back { width: auto; }
 
   // Header
 

assets/stylesheets/components/_settings.scss

@@ -11,17 +11,14 @@
 
   &._in { display: block; }
 
-  ._sidebar {
-    display: block !important;
+  ._sidebar { display: block !important; }
 
-    &:after { // padding bottom
-      content: '';
-      display: block;
-      height: $headerHeight;
-    }
-  }
+  > ._header { justify-content: space-between; }
 
-  ._header { justify-content: space-between; }
+  &._dirty > ._header {
+    background: $noteGreenBackground;
+    border-color: $noteGreenBorder;
+  }
 }
 
 //
@@ -79,25 +76,9 @@
 }
 
 //
-// Footer
+// Settings buttons
 //
 
-._sidebar-footer {
-  position: absolute;
-  z-index: $headerZ;
-  bottom: 0;
-  left: 0;
-  width: $sidebarWidth;
-  height: $headerHeight;
-  background: $noteGreenBackground;
-  border-top: 1px solid $noteGreenBorder;
-  border-right: 1px solid $noteGreenBorder;
-  @extend %border-box;
-  @extend %user-select-none;
-
-  @media #{$mediumScreen} { width: $sidebarMediumWidth; }
-}
-
 ._settings-btn {
   display: block;
   width: 100%;
@@ -122,6 +103,16 @@
   }
 }
 
+._settings-btn-back {
+  ._dirty & { display: none; }
+}
+
+._settings-btn-save {
+  display: none;
+
+  ._dirty & { display: block; }
+}
+
 //
 // Header tabs
 //
@@ -129,6 +120,8 @@
 ._settings-tabs {
   display: none; // mobile only
   margin-right: .5rem;
+
+  ._dirty & { display: none !important; }
 }
 
 ._settings-tab {

assets/stylesheets/components/_sidebar.scss

@@ -18,6 +18,8 @@
   @extend %border-box;
   @extend %user-select-none;
 
+  &:focus { outline: none; }
+
   ._overlay-scrollbars & {
     padding-top: 0;
     top: $headerHeight;

views/app.erb

@@ -40,19 +40,17 @@
   </div>
   <form class="_settings" id="settings">
     <div class="_header">
-      <button type="button" aria-label="Back" class="_settings-btn" data-back>
+      <button type="button" aria-label="Back" class="_settings-btn _settings-btn-back" data-back>
         <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></svg> Back
       </button>
+      <button type="submit" class="_settings-btn _settings-btn-save">
+        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg> Apply
+      </button>
       <nav class="_settings-tabs">
         <button type="button" class="_settings-tab active" data-tab="doc-picker" hidden>Docs</button><button type="button" class="_settings-tab" data-tab="settings" hidden>Settings</button>
       </nav>
     </div>
     <div class="_sidebar" tabindex="-1"></div>
-    <div class="_sidebar-footer">
-      <button type="submit" class="_settings-btn">
-        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg> Apply
-      </button>
-    </div>
   </form>
 </div>
 <svg style="display:none">
@@ -60,7 +58,7 @@
 </svg>
 <style data-size="<%= app_size %>" data-resizer>
   ._container { margin-left: <%= app_size %>; }
-  ._header, ._list, ._sidebar-footer { width: <%= app_size %>; }
+  ._header, ._list { width: <%= app_size %>; }
   ._list-hover.clone { min-width: <%= app_size %>; }
   ._notice, ._path, ._resizer { left: <%= app_size %>; }
 </style>