Add window buttons conf feature. Ref #6

Former-commit-id: 4b58b90
edipox · Nov 26, 2016 · b635018 · b635018
1 parent 0f5fd1c
commit b635018
Show file tree

Hide file tree

Showing 15 changed files with 11,254 additions and 52 deletions.
diff --git a/css/index.css b/css/index.css
@@ -2,6 +2,7 @@ html,
 header {
     /*-webkit-app-region: drag;*/
     -ms-overflow-style: scrollbar;
+    font-family: sans-serif;
 }
 
 html {
@@ -32,7 +33,7 @@ html, body{
   height: 100%;
 }
 
-#controls #settings-btn{
+#settings-btn{
   border-radius: 25px;
   padding: 5px;
   position: absolute;
@@ -44,38 +45,32 @@ html, body{
   width: 14px;
   height: 14px;
 }
-#controls #settings-btn:hover{
+#settings-btn:hover{
   background: #716e65;
 }
 
-#settings-panel{
-  width: 83px;
-  height: 100px;
+#settings-panel {
+  width: 304px;
+  height: 367px;
   background: white;
   border-radius: 5px;
   margin: auto;
-  position: absolute;
-  top: 30px;
-  right: 30px;
   z-index: 101;
-  text-align: right;
   -webkit-app-region: no-drag;
   border: 1px solid whitesmoke;
+  padding: 20px;
+  text-align: center;
+  position: relative;
+  margin-top: 5vh;
 }
 #popup{
   display: none;
 }
 
 #theme-selector{
-  overflow-y: hidden;
-  border: none;
-  background: white;
-  padding: 7px;
-  border-radius: 4px;
-  z-index: 110;
-  -webkit-app-region: no-drag;
-  height: 100px;
+  margin-bottom: 50px;
 }
+
 #controls .button{
   width: 17px;
   height: 17px;
@@ -292,3 +287,56 @@ svg *{
 .window.right .button{
   float: right!important;
 }
+
+
+.slider-container{
+  text-align: center;
+  margin-bottom: 30px;
+  margin-top: 20px;
+}
+.slider-container .label{
+  display: inline;
+  color: gray;
+  font-weight: lighter;
+  margin-top: -14px;
+}
+.slider-container .left{
+  float: left;
+}
+.slider-container .right{
+  float: right;
+}
+.slider-container .hidden{
+  margin: auto;
+  display: block;
+  margin-top: 10px;
+}
+
+.ui-slider-horizontal .ui-slider-handle {
+    top: -0.39em!important;
+    margin-left: -.6em!important;
+    border-radius: 100px!important;
+    border: none!important;
+    background: #3b9bff!important;
+    padding: 1px!important;
+}
+
+.ui-slider-horizontal {
+    height: 0.5em!important;
+    border: none!important;
+    background: #ececec!important;
+    margin: auto!important;
+    width: 180px!important;
+}
+
+
+#overlay{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99;
+  display: none;
+  background-color: rgba(0,0,0,0.5); /*dim the background*/
+}
diff --git a/css/jquery-ui.min.css b/css/jquery-ui.min.css
diff --git a/css/jquery-ui.theme.min.css b/css/jquery-ui.theme.min.css
diff --git a/index.html b/index.html
@@ -2,7 +2,10 @@
 <html>
   <head>
     <link rel="stylesheet" href="css/index.css">
+    <link rel="stylesheet" href="css/jquery-ui.min.css">
     <script src="js/jquery-3.1.0.min.js"></script>
+    <script src="js/jquery.js"></script>
+    <script src="js/jquery-ui.min.js"></script>
   <body>
     <webview src="https://www.wunderlist.com/#/lists/inbox" autosize="on" preload="js/webview-load.js"  id="webview"  ></webview>
     <div id="controls-container">
@@ -424,21 +427,56 @@
           </span>
         </div><!-- /buttons -->
 
-        <div id="popup">
-          <div id="settings-panel">
-            <select id="theme-selector">
-              <option value="elementary">elementary</option>
-              <option value="adwaita">adwaita</option>
-              <option value="ambiance">ambiance</option>
-              <option value="arc">arc</option>
-              <option value="arc-dark">arc-dark</option>
-            </select>
-          </div>
+
+
+      </div>
+
+    </div>
+    <div id="popup">
+      <div id="settings-panel">
+        <div>
+          <label>Theme:</label>
+          <select id="theme-selector">
+            <option value="elementary">elementary</option>
+            <option value="adwaita">adwaita</option>
+            <option value="ambiance">ambiance</option>
+            <option value="arc">arc</option>
+            <option value="arc-dark">arc-dark</option>
+          </select>
         </div>
 
 
+        <label>Close</label>
+        <div class="slider-container" data-button="close">
+          <div  class="slider"></div>
+          <div class="left label">left</div>
+          <div class="right label">right</div>
+          <div class="hidden label">hidden</div>
+        </div>
+        <label>Maximize</label>
+        <div class="slider-container" data-button="max">
+          <div class="slider"></div>
+          <div class="left label">left</div>
+          <div class="right label">right</div>
+          <div class="hidden label">hidden</div>
+        </div>
+        <label>Minimize</label>
+        <div class="slider-container" data-button="min">
+          <div class="slider"></div>
+          <div class="left label">left</div>
+          <div class="right label">right</div>
+          <div class="hidden label">hidden</div>
+        </div>
+
+        <script>
+
+        </script>
+
       </div>
+
     </div>
+
+    <div id="overlay"></div>
   </body>
   <script src="js/utils.js"></script>
   <script src="js/onload.js"></script>

diff --git a/js/controls.js b/js/controls.js
@@ -13,17 +13,25 @@ var maximize = function(e) {
         window.unmaximize();
     }
 };
+
+var showPopup = function(){
+  jq("#overlay").show();
+  jq("#popup").show();
+}
+var hidePopup = function(){
+  jq("#overlay").hide();
+  jq("#popup").hide();
+}
+
 jq(document).on("dblclick", "#controls", maximize);
 jq(document).on("click", ".max-btn", maximize);
 
+jq(document).on("click", "#overlay", hidePopup);
+
+
 jq(document).on("click", "#settings-btn", function(e) {
     jq("#settings-panel").appendTo("#popup");
-    jq("#popup").show();
-    jq("#theme-selector").trigger('click').attr("size","2");
-
-});
-jq(document).on("mouseup", ":not(#settings-btn), :not(#settings-panel)", function() {
-    jq("#popup").hide();
+    showPopup()
 });
 
 jq(document).on('keydown', function(e) {
@@ -52,6 +60,17 @@ jq(document).on("click", "#share", function(e, v){
 
 jq(document).on("change", "#theme-selector", function(e) {
     var theme = jq(e.target).find("option:selected").text();
-    setCustomTheme(theme)
-    jq("#popup").hide();
+    setCustomTheme(theme);
+});
+
+
+$(".slider").slider({
+  step: 10,
+  max: 20,
+  min: 0,
+  slide: function( event, ui ) {
+    const button = $(this).parent().data("button");
+    const val = ui.value;
+    updateWindowButtons(button, val);
+  }
 });
diff --git a/js/jquery-ui.min.js b/js/jquery-ui.min.js