GNOME.org
 

[chrome-gnome-shell/feature/extensions_sync] Use Tabby for tabbed interface. Add synchronization tab.

commit cfb97b81a0df083a836fb5b7cffba606ec1b5a70
Author: Yuri Konotopov <ykonotopov gmail com>
Date:   Tue Aug 9 13:38:50 2016 +0300

    Use Tabby for tabbed interface. Add synchronization tab.

 extension/_locales/en/messages.json   |    3 +
 extension/css/options.css             |   32 ++++++++-
 extension/css/tabby.min.css           |    2 +
 extension/include/tabby-10.1.0.min.js |    2 +
 extension/options.html                |  117 ++++++++++++++++++---------------
 extension/options.js                  |   21 +-----
 6 files changed, 101 insertions(+), 76 deletions(-)
---
diff --git a/extension/_locales/en/messages.json b/extension/_locales/en/messages.json
index ecdb4c2..9068fc8 100644
--- a/extension/_locales/en/messages.json
+++ b/extension/_locales/en/messages.json
@@ -87,6 +87,9 @@
                "message": "Next check"
        },
 
+       "synchronization": {
+               "message": "Synchronization"
+       },
        "translation_credits_title": {
                "message": "About translation"
        },
diff --git a/extension/css/options.css b/extension/css/options.css
index e701c66..a5e7583 100644
--- a/extension/css/options.css
+++ b/extension/css/options.css
@@ -3,10 +3,6 @@ body {
        min-width: 550px;
 }
 
-#translation_credits {
-       display: none;
-}
-
 #update_check_period { width: 5em; }
 #status {
        display: none;
@@ -43,3 +39,31 @@ dd {
        vertical-align: top;
        margin-bottom: 3px;
 }
+
+ul.tabs {
+       float: right;
+}
+
+ul.tabs li {
+       list-style: none;
+}
+
+ul.tabs li, ul.tabs li a {
+       display: inline-block;
+}
+
+ul.tabs li a.active {
+       color: inherit;
+       cursor: default;
+       text-decoration: none;
+}
+
+ul.tabs li:not(:last-child) {
+       border-right: 1px solid #000;
+       margin-right: 5px;
+       padding-right: 5px;
+}
+
+div.tabs-pane {
+       clear: both;
+}
diff --git a/extension/css/tabby.min.css b/extension/css/tabby.min.css
new file mode 100644
index 0000000..9cff88e
--- /dev/null
+++ b/extension/css/tabby.min.css
@@ -0,0 +1,2 @@
+/*! Tabby v10.1.0 | (c) 2016 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/tabby */
+.tabs a{cursor:pointer}.js-tabby 
.tabs-pane{display:none;visibility:hidden}.tabs-pane.active{display:block;visibility:visible}
\ No newline at end of file
diff --git a/extension/include/tabby-10.1.0.min.js b/extension/include/tabby-10.1.0.min.js
new file mode 100644
index 0000000..65275db
--- /dev/null
+++ b/extension/include/tabby-10.1.0.min.js
@@ -0,0 +1,2 @@
+/*! Tabby v10.1.0 | (c) 2016 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/tabby */
+!function(t,e){"function"==typeof define&&define.amd?define([],e(t)):"object"==typeof 
exports?module.exports=e(t):t.tabby=e(t)}("undefined"!=typeof 
global?global:this.window||this.global,function(t){"use strict";var e,n,o={},a="querySelector"in 
document&&"addEventListener"in t&&"classList"in document.createElement("_")&&"onhashchange"in 
t,r={selectorToggle:"[data-tab]",selectorToggleGroup:"[data-tabs]",selectorContent:"[data-tabs-pane]",selectorContentGroup:"[data-tabs-content]",toggleActiveClass:"active",contentActiveClass:"active",initClass:"js-tabby",stopVideo:!0,callback:function(){}},c=function(t,e,n){if("[object
 Object]"===Object.prototype.toString.call(t))for(var o in 
t)Object.prototype.hasOwnProperty.call(t,o)&&e.call(n,t[o],o,t);else for(var 
a=0,r=t.length;r>a;a++)e.call(n,t[a],a,t)},s=function(){var t={},e=!1,n=0,o=arguments.length;"[object 
Boolean]"===Object.prototype.toString.call(arguments[0])&&(e=arguments[0],n++);for(var a=function(n){for(var 
o in n)Object.pro
 totype.hasOwnProperty.call(n,o)&&(e&&"[object 
Object]"===Object.prototype.toString.call(n[o])?t[o]=s(!0,t[o],n[o]):t[o]=n[o])};o>n;n++){var 
r=arguments[n];a(r)}return t},l=function(t,e){var 
n,o,a=e.charAt(0);for("["===a&&(e=e.substr(1,e.length-2),n=e.split("="),n.length>1&&(o=!0,n[1]=n[1].replace(/"/g,"").replace(/'/g,"")));t&&t!==document;t=t.parentNode){if("."===a&&t.classList.contains(e.substr(1)))return
 t;if("#"===a&&t.id===e.substr(1))return t;if("["===a&&t.hasAttribute(n[0])){if(!o)return 
t;if(t.getAttribute(n[0])===n[1])return t}if(t.tagName.toLowerCase()===e)return t}return 
null},i=function(t,e){if(e.stopVideo&&t.classList.contains(e.contentActiveClass)){var 
n=t.querySelector("iframe"),o=t.querySelector("video");if(n){var 
a=n.src;n.src=a}o&&o.pause()}},u=function(t,e){var n=l(t,e.selectorToggleGroup);if(n){var 
o=n.querySelectorAll(e.selectorToggle),a=l(t,"li");c(o,function(t){t.classList.remove(e.toggleActiveClass);var
 n=l(t,"li");n&&n.classList.remove(e.toggleActive
 Class)}),t.classList.add(e.toggleActiveClass),a&&a.classList.add(e.toggleActiveClass)}},d=function(t,e){var 
n=document.querySelector(t);if(n){var o=l(n,e.selectorContentGroup);if(o){var 
a=o.querySelectorAll(e.selectorContent);c(a,function(t){i(t,e),t.classList.remove(e.contentActiveClass)}),n.classList.add(e.contentActiveClass)}}};o.toggleTab=function(t,n,o){var
 a=s(e||r,o||{});document.querySelectorAll(n);u(t,a),d(n,a),a.callback(t,n)};var f=function(){var 
e=t.location.hash;if(n&&(n.id=n.getAttribute("data-tab-id"),n=null),e){var 
a=document.querySelector('[data-tab][href*="'+e+'"]');o.toggleTab(a,e)}},g=function(o){var 
a=l(o.target,e.selectorToggle);if(a&&a.hash){if(a.hash===t.location.hash)return void 
o.preventDefault();n=document.querySelector(a.hash),n&&(n.setAttribute("data-tab-id",n.id),n.id="")}};return 
o.destroy=function(){e&&(document.documentElement.classList.remove(e.initClass),document.removeEventListener("click",g,!1),t.removeEventListener("hashchange",f,!1),e=n
 
ull,n=null)},o.init=function(n){a&&(o.destroy(),e=s(r,n||{}),document.documentElement.classList.add(e.initClass),document.addEventListener("click",g,!1),t.addEventListener("hashchange",f,!1),f())},o});
\ No newline at end of file
diff --git a/extension/options.html b/extension/options.html
index 072f13d..a42bb8d 100644
--- a/extension/options.html
+++ b/extension/options.html
@@ -2,71 +2,80 @@
 <html>
        <head>
                <title data-i18n="options_title, __MSG_gs_chrome__"></title>
+               <link href="css/tabby.min.css" rel="stylesheet" type="text/css" />
                <link href="css/options.css" rel="stylesheet" type="text/css" />
                <script type="text/javascript" src="include/jquery-2.1.4.min.js"></script>
+               <script type="text/javascript" src="include/tabby-10.1.0.min.js"></script>
                <script type="text/javascript" src="include/i18n.js"></script>
                <script type="text/javascript" src="include/constants.js"></script>
        </head>
        <body>
-               <a id='switch_tab' href='#' data-i18n='translation_credits_title' style='float: right;'></a>
-               <div id="options">
-                       <div id="status" data-i18n="options_saved"></div>
+               <ul data-tabs='tabs' class="tabs">
+                       <li><a href="#options" class='active' data-i18n='options_link' 
data-tab='tab'></a></li>
+                       <li><a href="#synchronization" data-i18n='synchronization' data-tab='tab'></a></li>
+                       <li class='translation_credits_container'><a href="#translation_credits" 
data-i18n='translation_credits_title' data-tab='tab'></a></li>
+               </ul>
+               <div data-tabs-content='tabs-content'>
+                       <div id="options" class="tabs-pane active" data-tabs-pane='tabs-pane'>
+                               <div id="status" data-i18n="options_saved"></div>
 
-                       <fieldset>
-                               <dl>
-                                       <dt><span data-i18n="options_update_check"></span>:</dt>
-                                       <dd>
-                                               <label for='update_check_yes' data-i18n="yes"></label> <input 
type='radio' id='update_check_yes' name='update_check' />
-                                               <label for='update_check_no' data-i18n="no"></label> <input 
type='radio' id='update_check_no' name='update_check' />
+                               <fieldset>
+                                       <dl>
+                                               <dt><span data-i18n="options_update_check"></span>:</dt>
+                                               <dd>
+                                                       <label for='update_check_yes' 
data-i18n="yes"></label> <input type='radio' id='update_check_yes' name='update_check' />
+                                                       <label for='update_check_no' data-i18n="no"></label> 
<input type='radio' id='update_check_no' name='update_check' />
 
-                                               <div class='notice'><span 
data-i18n="options_last_check"></span>: <span id="last_update_check" data-i18n="never"></span></div>
-                                       </dd>
-                               </dl>
-                               <dl>
-                                       <dt><label for='update_check_period' 
data-i18n="options_check_period"></label>:</dt>
-                                       <dd>
-                                               <input id='update_check_period' type='number' min="3"  /> 
<span data-i18n="hours"></span>
+                                                       <div class='notice'><span 
data-i18n="options_last_check"></span>: <span id="last_update_check" data-i18n="never"></span></div>
+                                               </dd>
+                                       </dl>
+                                       <dl>
+                                               <dt><label for='update_check_period' 
data-i18n="options_check_period"></label>:</dt>
+                                               <dd>
+                                                       <input id='update_check_period' type='number' min="3" 
 /> <span data-i18n="hours"></span>
 
-                                               <div class='notice'><span 
data-i18n="options_next_check"></span>: <span id="next_update_check" data-i18n="never"></span></div>
-                                       </dd>
-                               </dl>
-                               <dl>
-                                       <dt>
-                                               <label for='synchronize_extensions_yes' 
data-i18n="options_synchronize_extensions"></label>:<br />
-                                               <span class="notice wrapped" 
data-i18n="options_synchronize_extensions_notice"></span><br />
-                                               <span class="notice wrapped" 
data-i18n="options_synchronize_extensions_notice2"></span>
-                                       </dt>
-                                       <dd>
-                                               <label for='synchronize_extensions_yes' 
data-i18n="yes"></label> <input type='radio' id='synchronize_extensions_yes' name='synchronize_extensions' />
-                                               <label for='synchronize_extensions_no' 
data-i18n="no"></label> <input type='radio' id='synchronize_extensions_no' name='synchronize_extensions' />
-                                       </dd>
-                               </dl>
-                               <dl>
-                                       <dt>
-                                               <label for='show_network_errors_yes' 
data-i18n="options_show_network_errors"></label>:<br />
-                                               <span class="notice wrapped" 
data-i18n="options_show_network_errors_notice"></span>
-                                       </dt>
-                                       <dd>
-                                               <label for='show_network_errors_yes' data-i18n="yes"></label> 
<input type='radio' id='show_network_errors_yes' name='show_network_errors' />
-                                               <label for='show_network_errors_no' data-i18n="no"></label> 
<input type='radio' id='show_network_errors_no' name='show_network_errors' />
-                                       </dd>
-                               </dl>
-                               <dl>
-                                       <dt><span data-i18n="options_show_release_notes"></span>:</dt>
-                                       <dd>
-                                               <label for='show_release_notes_yes' data-i18n="yes"></label> 
<input type='radio' id='show_release_notes_yes' name='show_release_notes' />
-                                               <label for='show_release_notes_no' data-i18n="no"></label> 
<input type='radio' id='show_release_notes_no' name='show_release_notes' />
-                                       </dd>
-                               </dl>
-                       </fieldset>
+                                                       <div class='notice'><span 
data-i18n="options_next_check"></span>: <span id="next_update_check" data-i18n="never"></span></div>
+                                               </dd>
+                                       </dl>
+                                       <dl>
+                                               <dt>
+                                                       <label for='synchronize_extensions_yes' 
data-i18n="options_synchronize_extensions"></label>:<br />
+                                                       <span class="notice wrapped" 
data-i18n="options_synchronize_extensions_notice"></span><br />
+                                                       <span class="notice wrapped" 
data-i18n="options_synchronize_extensions_notice2"></span>
+                                               </dt>
+                                               <dd>
+                                                       <label for='synchronize_extensions_yes' 
data-i18n="yes"></label> <input type='radio' id='synchronize_extensions_yes' name='synchronize_extensions' />
+                                                       <label for='synchronize_extensions_no' 
data-i18n="no"></label> <input type='radio' id='synchronize_extensions_no' name='synchronize_extensions' />
+                                               </dd>
+                                       </dl>
+                                       <dl>
+                                               <dt>
+                                                       <label for='show_network_errors_yes' 
data-i18n="options_show_network_errors"></label>:<br />
+                                                       <span class="notice wrapped" 
data-i18n="options_show_network_errors_notice"></span>
+                                               </dt>
+                                               <dd>
+                                                       <label for='show_network_errors_yes' 
data-i18n="yes"></label> <input type='radio' id='show_network_errors_yes' name='show_network_errors' />
+                                                       <label for='show_network_errors_no' 
data-i18n="no"></label> <input type='radio' id='show_network_errors_no' name='show_network_errors' />
+                                               </dd>
+                                       </dl>
+                                       <dl>
+                                               <dt><span data-i18n="options_show_release_notes"></span>:</dt>
+                                               <dd>
+                                                       <label for='show_release_notes_yes' 
data-i18n="yes"></label> <input type='radio' id='show_release_notes_yes' name='show_release_notes' />
+                                                       <label for='show_release_notes_no' 
data-i18n="no"></label> <input type='radio' id='show_release_notes_no' name='show_release_notes' />
+                                               </dd>
+                                       </dl>
+                               </fieldset>
 
-                       <div class='buttons'>
-                               <button id="save" data-i18n="save"></button>
+                               <div class='buttons'>
+                                       <button id="save" data-i18n="save"></button>
+                               </div>
+                       </div>
+                       <div id="synchronization" class="tabs-pane" data-tabs-pane='tabs-pane'>
+                       </div>
+                       <div id="translation_credits" class="tabs-pane translation_credits_container" 
data-tabs-pane='tabs-pane'>
+                               <div data-i18n='translation_credits' data-i18n-html='true'></div>
                        </div>
-               </div>
-               <div id="translation_credits">
-                       <h2 data-i18n='translation_credits_title'></h2>
-                       <div data-i18n='translation_credits' data-i18n-html='true'></div>
                </div>
 
                <script type="text/javascript" src="options.js"></script>
diff --git a/extension/options.js b/extension/options.js
index 9c6b8a4..b2a724c 100644
--- a/extension/options.js
+++ b/extension/options.js
@@ -35,6 +35,8 @@ function save_options()
 
 function restore_options()
 {
+       tabby.init();
+
        chrome.storage.sync.get(DEFAULT_SYNC_OPTIONS, function (items) {
                setCheckUpdate(items.updateCheck);
                $('#update_check_period').val(items.updateCheckPeriod);
@@ -155,24 +157,7 @@ $.each(document.getElementsByName('show_network_errors'), function(index, contro
 
 if($('#translation_credits div').is(':empty'))
 {
-       $('#switch_tab').hide();
-}
-else
-{
-       $('#switch_tab').click(function() {
-               $('#options, #translation_credits').toggle();
-
-               if($('#options').is(':visible'))
-               {
-                       $(this).text(m('translation_credits_title'));
-               }
-               else
-               {
-                       $(this).text(m('options_link'));
-               }
-
-               return false;
-       });
+       $('.translation_credits_container').remove();
 }
 
 chrome.storage.onChanged.addListener(function (changes, areaName) {
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]