tweak options menu styles

components/options.html

@@ -1,8 +1,10 @@
-<div id='options-container'>
+
+<div id='options-container' class="slideOut">
+        <div id="settings-button" >⚙</div>
         <label for="refresh-frequency">Refresh every</label>
         <input class="ask-option" type="text" id="refresh-frequency" name="refresh-frequency">
         <p>seconds</p>
-        <br>
+        <div class="divider">|</div>
         <label for="alert-frequency">Alert with</label>
         <select class="ask-option" id="alert-sound" name="alert-sound">
             <option dataVal = "1">Alert One</option>

components/toolbar.html

@@ -1,6 +1,4 @@
-<div id='ask-assist'>
-    <link rel="stylesheet" href="https://icono-49d6.kxcdn.com/icono.min.css">
-    <p id="settings-button" >⚙</p>
+<div id='ask-assist'>    
     <div class='cusBut' id='start-timer'>AskAssist</div>
     <div class='cusBut' id='stop-timer'>Stop Watching</div>
 </div>

script_background.js

@@ -41,7 +41,10 @@ function handleGet(request, sender, sendResponse){
     console.log('fetching files...')
     options.forEach(({path}, i) => {
         files.push(
-            fetch(path).catch(console.log(path, 'notfound'))
+            fetch(path).catch((err)=>{
+                console.log(err);
+                return {err:"not found"}
+            })
         )
         console.log('Files:',files);
     });
@@ -49,12 +52,19 @@ function handleGet(request, sender, sendResponse){
     Promise.all(files).then(function(results){
         console.log('building components...')
         results.forEach(function(file, i){
-            components[i]=file.text();
-            console.log('Components:',components)    
+            if(file['err']){
+                components[i]=file['err'];
+            } else {
+                components[i]=file.text();
+            }
         })
         Promise.all(components).then(function(results){
-            console.log('response', results)
-            sendResponse(results);
+            let response = {}
+            results.forEach((res, i)=>{
+                response[options[i]['name']]=res;
+            })
+            console.log('response', response)
+            sendResponse(response);
         })
     })
 }

script_foreground.js

@@ -5,14 +5,12 @@ let options = {
 };
 
 function appendTool(html){
-    // fetch the plugin HTML from the background script...
-    chrome.runtime.sendMessage({message:{flag:"get", options:[{name:'toolbar', path:"./abccomponents/toolbar.html"}, {name:'options', path:"./components/options.html"}]}}, function(res){
-        //... and append it
-        console.log(res[0]);
-        console.log(res[1]);
-        document.querySelector('.p-ia__view_header__spacer').innerHTML = res[0];
-
-        //... and it's event listeners
+    // fetch the plugin components from the background script...
+    chrome.runtime.sendMessage({message:{flag:"get", options:[{name:'toolbar', path:"./components/toolbar.html"}, {name:'options', path:"./components/options.html"}]}}, function(res){
+        //... and append them
+        document.querySelector('.p-ia__view_header').innerHTML += res.toolbar;
+        document.querySelector('.c-tabs__tab_menu').innerHTML += res.options;
+        //... and their event listeners
         document.querySelector('#start-timer').addEventListener('click', function(){
             start.style.display = 'none';
             stop.style.display = 'inline-block';
@@ -28,14 +26,15 @@ function appendTool(html){
         });
         document.querySelector('#stop-timer').addEventListener('click', function(){
             stop.style.display = 'none';
-            start.style.display = 'inline-block';
+            start.style.display = 'inline';
             clearInterval(timer);   
         });
         document.querySelector('#settings-button').addEventListener('click', function(){
-            if(document.querySelector('#options-container').style.display=="none"){
-                document.querySelector('#options-container').style.display="block"
+            let container = document.querySelector('#options-container');
+            if(container.classList.contains('slideOut')){
+                container.classList.remove('slideOut');
             } else {
-                document.querySelector('#options-container').style.display="none"
+                container.classList.add('slideOut');
             }
         });
         document.querySelectorAll('.ask-option').forEach(function(el){
@@ -46,7 +45,7 @@ function appendTool(html){
         })
         var start = document.querySelector('#start-timer');
         var stop = document.querySelector('#stop-timer');
-        document.querySelector('#options-container').style.display="none"
+        //document.querySelector('#options-container').style.display="none"
     })
 }
 

styles.css

@@ -1,28 +1,41 @@
-#askAssist {
-    padding: 1rem;
-    height: 100px;
-    width: 60%;
-    margin-right: 2rem;
-    float: right;
+#ask-assist { 
+    padding-top: 1rem;
+    padding-right: 35px;
+    margin-left: auto;
+    width: 130px;
+    height: 100%;
+    margin-right: -15px;
+    /*background-color: rgba(0,122,90, .05);*/
+    border-left:1px solid #DDDDDD;
+}
+#ask-assist>*{
+    vertical-align: middle;
+    text-align: center;
+}
+.divider {
+    display: inline;
+    margin-left: 1rem;
+    margin-right: 1rem;
 }
-
 .cusBut {
     border-radius: 3px;
+    background-color: white;
     line-height: 1.6;
     border: 1px solid #dddddd; 
     min-width: 75px;
-    height: 30px;
+    height: 35px;
     float: right; 
     text-align: center; 
     color:white;
-    padding: 0 8px 1px;
+    padding:0.5rem;
+    padding-top:0.25rem;
 }
 #start-timer {
     border: 1px solid rgba(0,122,90, .3);
     color: #007a5a;
     font-weight: 700;
     font-size: 15px;
-
+    display: inline;
 } 
 #start-timer:hover {
     box-shadow: 0 1px 3px 0 rgba(0,0,0,.08);
@@ -41,15 +54,14 @@
     background: rgba(var(--sk_foreground_min,29,28,29),.04);
 } 
 #settings-button{
-    color:rgba(0,122,90, .3);
-    float: right;
+    margin: 0rem;
+    margin-right: 1rem;
+    color:rgba(131, 131, 131, 0.527);
+    float: left;
     font-size: 3rem;
-    margin:0;
     padding:0;
     height: 30px;
-    line-height: 0.5;
-    margin-left: 1rem;
-    margin-right: 1rem;
+    line-height: 0.375;
     cursor: pointer;
 }
 #settings-button:hover{
@@ -57,12 +69,14 @@
     animation: rotation 10s infinite linear;
 }
 #options-container{
-    display:none;
-    margin-top: -4px;
+    height: 40px;
     float: right;
-    max-width: 600px;
-    background-color: rgba(0,122,90, .05);
+    max-width: 700px;
+    /* background-color: rgba(0,122,90, .05); */
     padding: 0.5rem;
+    border-left:1px solid #DDDDDD;
+    border-top-left-radius: 50px;
+    border-bottom-left-radius: 50px;
 }
 #options-container>*{
     color:rgba(0,122,90);
@@ -82,6 +96,10 @@
     padding: 0;
     margin: 0;
 }
+.slideOut{
+    position: relative;
+    right: -515px;
+}
 
 @keyframes rotation {
     from {
@@ -90,4 +108,13 @@
     to {
       transform: rotate(359deg);
     }
-  }
+}
+@keyframes slideFromRight {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(359deg);
+    }
+}
+