Merge remote-tracking branch 'saxamaphone69/settings-change'

src/General/Settings.coffee

@@ -4,7 +4,7 @@ Settings =
     link = $.el 'a',
       className:   'settings-link fa fa-wrench'
       textContent: 'Settings'
-      title: '<%= meta.name %> Settings'
+      title:       '<%= meta.name %> Settings'
       href:        'javascript:;'
     $.on link, 'click', Settings.open
 
@@ -38,16 +38,13 @@ Settings =
           Object.defineProperty window, 'Config', {value: {disableAll: true}}
 
   open: (openSection) ->
-    return if Settings.overlay
+    return if Settings.dialog
     $.event 'CloseMenu'
 
     Settings.dialog = dialog = $.el 'div',
-      id:        'fourchanx-settings'
+      id:        'overlay'
-      className: 'dialog'
+    ,
-    $.extend dialog, <%= readHTML('Settings.html') %>
+      <%= readHTML('Settings.html') %>
-
-    Settings.overlay = overlay = $.el 'div',
-      id: 'overlay'
 
     $.on $('.export', dialog), 'click',  Settings.export
     $.on $('.import', dialog), 'click',  Settings.import
@@ -68,10 +65,12 @@ Settings =
     (if sectionToOpen then sectionToOpen else links[0]).click() unless openSection is 'none'
 
     $.on $('.close', dialog), 'click', Settings.close
-    $.on overlay, 'click', Settings.close
     $.on window, 'beforeunload', Settings.close
+    $.on dialog, 'click', Settings.close
+    $.on dialog.firstElementChild, 'click', (e) -> e.stopPropagation()
 
-    $.add d.body, [overlay, dialog]
+    $.addClass d.body, 'unscroll'
+    $.add d.body, dialog
 
     $.event 'OpenSettings', null, dialog
 
@@ -79,9 +78,8 @@ Settings =
     return unless Settings.dialog
     # Unfocus current field to trigger change event.
     d.activeElement?.blur()
-    $.rm Settings.overlay
+    $.rmClass d.body, 'unscroll'
     $.rm Settings.dialog
-    delete Settings.overlay
     delete Settings.dialog
 
   sections: []
@@ -388,7 +386,7 @@ Settings =
     if compareString < '00001.00011.00017.00006'
       if data['sauces']?
         set 'sauces', data['sauces'].replace(/^(#?\s*)http:\/\/iqdb\.org\//mg, '$1//iqdb.org/')
-    if compareString < '00001.00011.00019.00003' and not Settings.overlay
+    if compareString < '00001.00011.00019.00003' and not Settings.dialog
       $.queueTask -> Settings.warnings.ads (item) -> new Notice 'warning', [item.childNodes...]
     if compareString < '00001.00011.00020.00003'
       for key, value of {'Inline Cross-thread Quotes Only': false, 'Pass Link': true}

src/General/Settings/Settings.html

@@ -1,15 +1,17 @@
-<nav>
+<div id="fourchanx-settings" class="dialog">
-  <div class="sections-list"></div>
+  <nav>
-  <p class="imp-exp-result warning"></p>
+    <div class="sections-list"></div>
-  <div class="credits">
+    <p class="imp-exp-result warning"></p>
-      <a class="export">Export</a>&nbsp|&nbsp
+    <div class="credits">
-      <a class="import">Import</a>&nbsp|&nbsp
+        <a class="export">Export</a>&nbsp|&nbsp
-      <a class="reset">Reset Settings</a>&nbsp|&nbsp
+        <a class="import">Import</a>&nbsp|&nbsp
-      <input type="file" hidden>
+        <a class="reset">Reset Settings</a>&nbsp|&nbsp
-    <a href="<%= meta.page %>" target="_blank"><%= meta.name %></a>&nbsp|&nbsp
+        <input type="file" hidden>
-    <a href="<%= meta.changelog %>" target="_blank">${g.VERSION}</a>&nbsp|&nbsp
+      <a href="<%= meta.page %>" target="_blank"><%= meta.name %></a>&nbsp|&nbsp
-    <a href="<%= meta.issues %>" target="_blank">Issues</a>&nbsp|&nbsp
+      <a href="<%= meta.changelog %>" target="_blank">${g.VERSION}</a>&nbsp|&nbsp
-    <a href="javascript:;" class="close fa fa-times" title="Close"></a>
+      <a href="<%= meta.issues %>" target="_blank">Issues</a>&nbsp|&nbsp
-  </div>
+      <a href="javascript:;" class="close fa fa-times" title="Close"></a>
-</nav>
+    </div>
-<div class="section-container"><section></section></div>
+  </nav>
+  <div class="section-container"><section></section></div>
+</div>

src/css/style.css

@@ -186,7 +186,6 @@ audio.controls-added {
 
 /* fixed, z-index */
 #overlay,
-#fourchanx-settings,
 #qp, #ihover,
 #navlinks, .fixed #header-bar,
 :root.float #updater,
@@ -194,11 +193,8 @@ audio.controls-added {
 #qr {
   position: fixed;
 }
-#fourchanx-settings {
-  z-index: 999;
-}
 #overlay {
-  z-index: 900;
+  z-index: 999;
 }
 #qp, #ihover {
   z-index: 60;
@@ -509,6 +505,8 @@ audio.controls-added {
 }
 #overlay {
   background-color: rgba(0, 0, 0, .5);
+  display: -webkit-flex;
+  display: flex;
   top: 0;
   left: 0;
   height: 100%;
@@ -523,16 +521,16 @@ audio.controls-added {
   width: 900px;
   max-width: 100%;
   margin: auto;
-  padding: 3px;
+  padding: 5px;
-  top: 50%;
+  display: -webkit-flex;
-  left: 50%;
+  display: flex;
-  -moz-transform: translate(-50%, -50%);
+  -webkit-flex-direction: column;
-  -webkit-transform: translate(-50%, -50%);
+  flex-direction: column;
-  transform: translate(-50%, -50%);
 }
 #fourchanx-settings > nav {
-  padding: 2px 2px 0;
+  padding: 2px 2px 8px;
-  height: 15px;
+  display: -webkit-flex;
+  display: flex;
 }
 #fourchanx-settings > nav a {
   text-decoration: underline;
@@ -543,20 +541,16 @@ audio.controls-added {
   margin: 0;
 }
 .section-container {
+  -webkit-flex: 1;
+  flex: 1;
+  position: relative;
   overflow: auto;
-  position: absolute;
+  padding-top: 8px;
-  top: 2.1em;
-  right: 5px;
-  bottom: 5px;
-  left: 5px;
   padding-right: 5px;
 }
 .sections-list {
-  padding: 0 3px;
+  -webkit-flex: 1;
-  float: left;
+  flex: 1;
-}
-.credits {
-  float: right;
 }
 .export, .import, .reset {
   cursor: pointer;