Removed rangeSlider.js, Changged UI to materiallizecss

web-extension/manifest.json

@@ -44,12 +44,5 @@
         "webRequestBlocking",
         "tabs"
     ],
-    "version": "0.2",
-    "applications": {
-        "gecko": {
-            "id": "[email protected]",
-            "strict_min_version": "50.0"
-        }
-    }
-
+    "version": "0.2"
 }

web-extension/popup/css/popup.css

@@ -1,4 +1,31 @@
 *{box-sizing: border-box}
+
+/* fallback */
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url("../fonts/roboto/Roboto-Medium.woff2") format('woff2');
+}
+
+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}
+
+
+
 @font-face {
     font-family: Vazir;
     src: url('../fonts/Vazir.eot');
@@ -15,132 +42,61 @@ body,html {
     height: 300px;
     width: 400px;
     overflow-x: hidden;
-    background: #EFEFEF;
-    font:300 18px/18px Vazir;
+    background: #fff;
+    font-family: Vazir,'Material Icons', "Roboto",tahoma;
+    font-size: 15px;
+    background: linear-gradient(225deg, #292942, #046474);
 }
 
 #header_name{
+    margin: 0;
     text-align: center;
-    font-size: 15px;
-    color: #EFEFEF;
-    text-shadow: 0 0 2px  #222;
+    font-size: 20px;
+    color: #fff;
+    text-shadow: 0 0 2px #222;
+    background: linear-gradient(105deg, #00b284, #006ab2);;
+    padding: 5px 0;
 }
 
-/*==========================================================*/
-
-*,:after,:before{box-sizing:border-box}
-.pull-left{float:left}
-.pull-right{float:right}
-.clearfix:after,.clearfix:before{content:'';display:table}
-.clearfix:after{clear:both;display:block}
+.budget .content{
+    text-align: center;
 
-.rangeslider,
-.rangeslider__fill {
-    display:block;
-    border-radius:10px;
 }
 
-.rangeslider {
-    position:relative;
-}
-.rangeslider:after{
-    top:50%;
-    left:0;
-    right:0;
-    content:'';
-    width:100%;
-    height:5px;
-    margin-top:-2.5px;
-    border-radius:5px;
-    position:absolute;
-    background:#212131;
-}
 
-.rangeslider--horizontal{
-    width:100%;
-    height:14px;
+.indicator{
+    background: #00BCD4 !important;
+    height: 3px !important;
 }
 
-.rangeslider--vertical{
-    width:5px;
-    min-height:150px;
-    max-height:100%;
-}
-.rangeslider--disabled{
-    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
-    opacity:0.4;
-}
 
-.rangeslider__fill{
-    position:absolute;
-    background:#22A7F0;
+.tabs a{
+    color: #046474 !important;
 }
-.rangeslider--horizontal .rangeslider__fill{
-    top:0;
-    height:100%;
-}
-.rangeslider--vertical .rangeslider__fill{
-    bottom:0;
-    width:100%;
+.tabs{
+    background: rgba(255,255,255,.9) !important;
+    box-shadow: 0 0 0 0 !important;
 }
 
-.rangeslider__handle{
-    top:50%;
-    width:28px;
-    height:28px;
-    cursor:pointer;
-    margin-top:-14px;
-    position:absolute;
-    background: #19B5FE;
-    border-radius:50%;
-    display:inline-block;
-}
-.rangeslider__handle:active{
-    background:#22A7F0;
+.tab a{
+    color: #fff;
 }
 
-.rangeslider__fill,
-.rangeslider__handle{
-    z-index:1;
-}
-.rangeslider--horizontal .rangeslider__fill{
-    top:50%;
-    height:5px;
-    margin-top:-2.5px;
-}
+
+/*==========================================================*/
+.pull-left{float:left}
+.pull-right{float:right}
 
 /* Budget */
 .budget-wrap{
-    padding:10px;
-    padding-top:3px;
-    background:#292942;
-    box-shadow:0 25px 55px 0 rgba(0,0,0,.21),0 16px 28px 0 rgba(0,0,0,.22);
-    height: 100%;
+    padding:3px 0 10px 0;
 }
-.budget-wrap .header .title{
+
+.switch label{
+    font-size: 15px !important;
     color:#fff;
-    font-size:12px;
-    margin-bottom:10px;
-}
-.budget-wrap .header .title .pull-right{
-    color:#22A7F0;
-    font-size:16px;
-    font-weight:400;
 }
-.budget-wrap .footer{
-    margin-top:30px;
-}
-.budget-wrap .footer .btn{
-    color:inherit;
-    padding:6px 12px;
-    border-radius:99999px;
-    display:inline-block;
-    text-decoration:none;
-}
-.budget-wrap .footer .btn.btn-def{
-    color:#525263;
-}
-.budget-wrap .footer .btn.btn-pri{
-    color:#eee;
-    background:#22A7F0;
+
+#range_inp{
+    margin: 5px;
 }

web-extension/popup/js/final.js

@@ -1,34 +1,16 @@
 $(document).ready(function () {
-    $(function(){
-        $('input[type="range"]').rangeslider({
-            polyfill:false,
-            onInit:function(){
-                $('.header .pull-right').text($('input[type="range"]').val()+'%');
-            },
-            onSlide:function(position, value){
-                $('.header .pull-right').text(value+'%');
-            },
-            onSlideEnd:function(position, value){
-                //So what?
-            }
-        });
-    });
-
-    $("#btn_fill").on('click',function () {
-        fillOptions($("#range_inp").val(),false,false);
-    });
 
-    $("#btn_fill_submit").on('click',function () {
-        fillOptions($("#range_inp").val(),false,true);
-    });
-
-    $("#btn_fill_bypass").on('click',function () {
-        fillOptions($("#range_inp").val(),true,false);
-    });
+    $('#tabs-swipe-demo').tabs();
 
-    $("#btn_fill_submit_bypass").on('click',function () {
-        fillOptions($("#range_inp").val(),true,true);
+    $("#submit_data").on('click',function () {
+        let autoSend = $("#auto_send").prop("checked");
+        let bypassFilter = $("#bypass_filter").prop("checked");
+        let percent = $("#range_inp").val();
+        fillOptions(percent,bypassFilter,autoSend);
     });
 
+    $("#cancel").on('click',function () {
+        window.close();
+    })
 
 });

web-extension/popup/js/popup.js

@@ -21,7 +21,7 @@ function fillOptions(percent,bypass_filter,send) {
         bypass: bypass_filter,
         send: send
     };
-    
+
     BrowserNameSpace.tabs.executeScript(null,
         {
             allFrames:true,

web-extension/popup/popup.html

@@ -1,40 +1,68 @@
 <!DOCTYPE html>
 <html>
-    <meta charset="utf-8">
-    <link rel="stylesheet" type="text/css" href="css/popup.css">
+<meta charset="utf-8">
+<link rel="stylesheet" type="text/css" href="css/materialize.min.css">
+<link rel="stylesheet" type="text/css" href="css/popup.css">
 <body>
 
+<h1 id="header_name">GSama</h1>
 
-<div class="budget-wrap">
-    <h1 id="header_name">GSama</h1>
+<ul id="tabs-swipe-demo" class="tabs">
+    <li class="tab col s6"><a class="active" href="#test-swipe-1">ارزشیابی</a></li>
+    <li class="tab col s6"><a href="#test-swipe-2">برنامه هفتگی</a></li>
+</ul>
+
+<div id="test-swipe-1" class="budget-wrap" style="width: 400px;padding-top: 15px;">
     <div class="budget">
         <div class="header">
-            <div class="title clearfix">
-                <span style="float: right">چقدر از این استاد راضی هستی؟</span>
-                <span class="pull-right" style="float: left"></span>
+            <div class="title clearfix" style="text-align: center">
+                <span style="color:#fff;text-align: center">چقدر از این استاد راضی هستی؟</span>
             </div>
         </div>
         <div class="content">
-            <input id="range_inp" type="range" min="0" max="100" value="50" data-rangeslider>
+            <p class="range-field">
+                <input id="range_inp" type="range" min="0" max="100" value="50">
+            </p>
         </div>
         <div class="footer clearfix">
             <div style="text-align: center">
-                <a href="#" id="btn_fill" class="btn btn-pri" title="تنها گزینه های نظر سنجی را انتخاب میکند">انتخاب گزینه ها</a>
-                <a href="#" id="btn_fill_submit" class="btn btn-pri" title="گزینه های نظر سنجی را انتخاب، سپس برای سیستم سما ارسال میکند">انتخاب گزینه ها و ارسال</a>
+                <!--<a href="#" id="btn_fill" class="btn btn-pri" title="تنها گزینه های نظر سنجی را انتخاب میکند">انتخاب گزینه ها</a>-->
+
+                <!--<a href="#" id="btn_fill_submit" class="btn btn-pri" title="گزینه های نظر سنجی را انتخاب، سپس برای سیستم سما ارسال میکند">انتخاب گزینه ها و ارسال</a>-->
+                <!-- Switch -->
+                <div class="switch">
+                    <label>
+                        ارسال اطلاعات
+                        <input id="auto_send" type="checkbox" checked title="بطور خودکار، پس از تایید اطلاعات ارسال میشوند">
+                        <span class="lever"></span>
+                    </label>
+                </div>
+
+                <div class="switch">
+                    <label>
+                        دور زدن فیلتر آماری
+                        <input checked id="bypass_filter" type="checkbox" title="دور زدن فیلتر آماری زمانی که تمام نمرات ارسالی رو حداقل یا حداکثر باشند">
+                        <span class="lever"></span>
+                    </label>
+                </div>
+                <br>
+                <a id="cancel" class="waves-effect waves-light btn red" >انصراف</a>
+                <a id="submit_data" class="waves-effect waves-light btn">تایید</a>
+                <!--<a href="#" id="btn_fill_bypass" style="margin: 10px;" class="btn btn-pri" title="انتخاب گزینه ها با دور زدن فیلتر آماری">انتخاب گزینه ها با دور زدن فیلتر آماری </a>-->
+                <!--<a href="#" id="btn_fill_submit_bypass" style="margin: 10px;" class="btn btn-pri" title="همانند گزینه بالا ولی پس از انتخاب اطلاعات را ارسال میکند">انتخاب گزینه ها، دور زدن فیلتر آماری و ارسال</a>-->
 
-                <a href="#" id="btn_fill_bypass" style="margin: 10px;" class="btn btn-pri" title="انتخاب گزینه ها با دور زدن فیلتر آماری">انتخاب گزینه ها با دور زدن فیلتر آماری </a>
-                <a href="#" id="btn_fill_submit_bypass" style="margin: 10px;" class="btn btn-pri" title="همانند گزینه بالا ولی پس از انتخاب اطلاعات را ارسال میکند">انتخاب گزینه ها، دور زدن فیلتر آماری و ارسال</a>
-                <a class="rangeslider__fill" ></a>
             </div>
         </div>
     </div>
 </div>
 
+<div id="test-swipe-2" class="col s12 blue" style="width: 400px">برنامه هفتگی</div>
+
 
 
 
 <script src="js/jquery-2.2.4.min.js"></script>
-<script src="js/rangeslider.js"></script>
+<script src="js/materialize.min.js"></script>
 <script src="js/popup.js"></script>
 <script src="js/final.js"></script>
 </body>