[extensions-web] Import new gnome-switch
- From: Jasper St. Pierre <jstpierre src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [extensions-web] Import new gnome-switch
- Date: Mon, 2 Apr 2012 01:43:18 +0000 (UTC)
commit 1d50f6b747acff2aa3243a234a57b7decfea9235
Author: Jasper St. Pierre <jstpierre mecheye net>
Date: Sun Apr 1 13:04:36 2012 -0400
Import new gnome-switch
New upstream home for gnome-switch is http://github.com/magcius/gnome-switch
Insensitivity feature was removed. We'll deal with that in a future
commit -- for now, just remove the code that used it.
.../extensions/templates/extensions/detail.html | 2 +-
sweettooth/static/css/switch.css | 87 ++++++++++----------
sweettooth/static/js/extensions.js | 5 -
sweettooth/static/js/switch.js | 70 ++++++++++------
4 files changed, 87 insertions(+), 77 deletions(-)
---
diff --git a/sweettooth/extensions/templates/extensions/detail.html b/sweettooth/extensions/templates/extensions/detail.html
index 62b39a8..e32e731 100644
--- a/sweettooth/extensions/templates/extensions/detail.html
+++ b/sweettooth/extensions/templates/extensions/detail.html
@@ -27,7 +27,7 @@
data-uuid="{{ extension.uuid }}"
data-ver-url-base="{% url extensions-version-detail ext_pk=extension.pk slug=extension.slug pk='' %}"
data-svm="{{ shell_version_map }}">
- <div class="switch{% if is_rejected %} insensitive{% endif %}"></div>
+ <div class="switch"></div>
{% block icon %}
<img src="{{ extension.icon.url }}" class="icon">
diff --git a/sweettooth/static/css/switch.css b/sweettooth/static/css/switch.css
index 8c0f1f0..85c81d0 100644
--- a/sweettooth/static/css/switch.css
+++ b/sweettooth/static/css/switch.css
@@ -1,21 +1,11 @@
._gnome-switch {
- background-color: #000;
- border: 2px solid #2e3436;
color: white;
- width: 64px;
- padding: 1px 6px;
- border-radius: 4px;
+ width: 80px;
position: relative;
margin-top: 10px;
font-size: 14px;
line-height: 1.6;
-
- -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
- -moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
- -ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
- -o-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
- transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
/* create a new BFC to have floating label work correctly.
@@ -29,7 +19,7 @@
clear: both;
}
-,switch { display : inline-block; }
+._gnome-switch { display : inline-block; }
._gnome-switch { display : block; }
@@ -48,9 +38,10 @@
._gnome-switch .slider {
position: absolute;
- width: 50%;
- top: -4px;
- bottom: -4px;
+ /* (80px / 2) - 2px */
+ width: 38px;
+ top: -2px;
+ bottom: -2px;
border: 3px solid #5f5f5f;
background-color: #000;
@@ -71,54 +62,60 @@
border-color: #5f5f5f;
}
-._gnome-switch .off, ._gnome-switch .on {
+._gnome-switch .off,
+._gnome-switch .on,
+._gnome-switch.customized .custom-content {
font-weight: bold;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6),
0 1px 0 rgba(0, 0, 0, 0.6);
- width: 50%;
- margin: 0 -3px;
+ border-style: solid;
+ border-width: 2px;
text-align: center;
+ padding: 1px 0;
}
-._gnome-switch .off {
- float: right;
-}
-
+._gnome-switch .off,
._gnome-switch .on {
- float: left;
+ /* 80px / 2 - 2px */
+ width: 38px;
}
-._gnome-switch.insensitive .off {
- visibility: visible;
- color: #666;
-}
+._gnome-switch .custom-content {
+ /* To aid with writing style sheets, put the default color styles
+ * in a less specified selector, so they're easily overridden. */
+ display: none;
-._gnome-switch.insensitive.activated .off {
- visibility: hidden;
+ /* default colors */
+ background-color: #000000;
+ border-color: #2e3436;
}
-._gnome-switch.insensitive .on {
- visibility: hidden;
+._gnome-switch.customized .custom-content {
+ display: block;
+
+ /* 80px - 4px */
+ width: 76px;
+ border-radius: 4px;
}
-._gnome-switch.insensitive.activated .on {
- visibility: visible;
- color: #235493;
- text-shadow: none;
+._gnome-switch .off {
+ float: right;
+ border-color: #2e3436;
+ border-left-style: none;
+ border-radius: 0 4px 4px 0;
+ background-color: #000000;
}
-._gnome-switch.activated {
+._gnome-switch .on {
+ float: left;
border-color: #3465a4;
+ border-right-style: none;
+ border-radius: 4px 0 0 4px;
background-color: #4a90d9;
}
-._gnome-switch.insensitive .slider {
- margin-top: 1px;
- margin-left: 1px;
- background: none;
- border-color: transparent;
-}
-
-._gnome-switch.insensitive.activated .slider .handle {
- border-color: #235493;
+._gnome-switch.customized .on,
+._gnome-switch.customized .off,
+._gnome-switch.customized .slider {
+ display: none;
}
diff --git a/sweettooth/static/js/extensions.js b/sweettooth/static/js/extensions.js
index 1e98d53..02b5c2b 100644
--- a/sweettooth/static/js/extensions.js
+++ b/sweettooth/static/js/extensions.js
@@ -105,8 +105,6 @@ function($, messages, dbusProxy, extensionUtils, templates) {
$switch.data('elem', $elem);
$switch.switchify();
- if ($switch.hasClass('insensitive'))
- return;
function sendPopularity(action) {
$.ajax({ url: '/ajax/adjust-popularity/',
@@ -138,7 +136,6 @@ function($, messages, dbusProxy, extensionUtils, templates) {
$elem.bind('state-changed', function(e, newState) {
$elem.data('state', newState);
- $switch.switchify('insensitive', false);
$switch.tipsy({ gravity: 'w', fade: true });
if (newState == ExtensionState.DISABLED ||
newState == ExtensionState.INITIALIZED ||
@@ -147,10 +144,8 @@ function($, messages, dbusProxy, extensionUtils, templates) {
} else if (newState == ExtensionState.ENABLED) {
$switch.switchify('activate', true);
} else if (newState == ExtensionState.ERROR) {
- $switch.switchify('insensitive', true);
$switch.attr('title', "This extension had an error.");
} else if (newState == ExtensionState.OUT_OF_DATE) {
- $switch.switchify('insensitive', true);
}
if ($elem.data('uninstalled') && (newState == ExtensionState.ENABLED ||
diff --git a/sweettooth/static/js/switch.js b/sweettooth/static/js/switch.js
index e4ccb37..6ee375e 100644
--- a/sweettooth/static/js/switch.js
+++ b/sweettooth/static/js/switch.js
@@ -4,10 +4,8 @@ define(['jquery'], function($) {
"use strict";
function getSides($elem, $slider) {
- var bl = parseInt($elem.css('borderLeftWidth'), 10) + parseInt($slider.css('borderLeftWidth'), 10);
- var br = parseInt($elem.css('borderRightWidth'), 10) + parseInt($slider.css('borderRightWidth'), 10);
- var left = -bl + 1;
- var right = $elem.innerWidth() - $slider.innerWidth() - parseInt($elem.css('borderRightWidth'), 10);
+ var left = -2;
+ var right = $elem.outerWidth() - $slider.outerWidth() + 2;
var center = right / 2 + left;
return {left: left, right: right, center: center};
}
@@ -22,16 +20,16 @@ define(['jquery'], function($) {
if (!data) {
data = {};
data.activated = undefined;
- data.insensitive = false;
+ data.customized = null;
$elem.data('switch', data);
}
function mouseup(e) {
$slider.addClass('not-dragging');
- $(document).unbind('mousemove.slider').unbind('mouseup.slider');
+ $(document).off('mousemove.slider').off('mouseup.slider');
var s = getSides($elem, $slider);
$slider.css('left', data.activated ? s.right : s.left);
- if (data.activated != data.initialActivated)
+ if (data.activated !== data.initialActivated)
$elem.trigger('changed', data.activated);
return false;
}
@@ -49,42 +47,49 @@ define(['jquery'], function($) {
return false;
}
+ var contents = $elem.text();
+ $elem.text('');
+
+ var classNames = $elem.attr('class');
+ var activated = $elem.hasClass('activated');
+
$elem
+ .removeClass()
.addClass('_gnome-switch')
.append($('<span>', {'class': 'on'}).text("ON"))
.append($('<span>', {'class': 'off'}).text("OFF"))
+ .append($('<span>', {'class': 'custom-content'}))
.append($slider)
// Disable selection.
.css({'cursor': 'default',
'-moz-user-select': 'none'})
.attr('unselectable', 'on')
- .bind('selectstart', function() { return false; });
+ .on('selectstart', function() { return false; });
- methods.activate.call($elem, $elem.hasClass('activated'));
- methods.insensitive.call($elem, $elem.hasClass('insensitive'));
-
- $slider.bind('mousedown', function(e) {
- if (data.insensitive)
- return true;
+ if (contents)
+ methods.customize.call($elem, contents, classNames);
+ methods.activate.call($elem, activated);
+ $slider.on('mousedown', function(e) {
data.initialActivated = data.activated;
data.initialPageX = e.pageX;
var left = $slider.position().left;
data.initialLeft = left;
$slider.css({'position': 'absolute', 'left': left});
$slider.removeClass('not-dragging');
- $(document).bind({
+ $(document).on({
'mousemove.slider': mousemove,
'mouseup.slider': mouseup
});
return false;
});
- $elem.bind('click', function(e) {
+ $elem.on('click', function(e) {
var doToggle;
- var isActivated = data.activated;
- if (data.insensitive)
+ var isActivated = !!data.activated;
+
+ if (data.customized !== null)
return true;
if (data.initialPageX === undefined) {
@@ -92,7 +97,7 @@ define(['jquery'], function($) {
} else {
// Make sure we didn't drag before toggling.
var travelDistance = Math.abs(e.pageX - data.initialPageX);
- doToggle = travelDistance < 4 && isActivated == data.initialActivated;
+ doToggle = travelDistance < 4 && isActivated === data.initialActivated;
delete data.initialActivated;
delete data.initialPageX;
@@ -102,6 +107,7 @@ define(['jquery'], function($) {
if (doToggle)
methods.activate.call($elem, !isActivated);
+ e.stopImmediatePropagation();
return false;
});
});
@@ -110,10 +116,9 @@ define(['jquery'], function($) {
activate: function(value) {
return this.each(function() {
var $elem = $(this);
- var $slider = $elem.find('span.slider');
var data = $elem.data('switch');
- if (data.activated == value)
+ if (data.activated === value)
return;
data.activated = value;
@@ -121,20 +126,33 @@ define(['jquery'], function($) {
$elem.trigger('changed', value);
$elem.toggleClass('activated', value);
+ var $slider = $elem.find('span.slider');
var s = getSides($elem, $slider);
$slider.css('left', value ? s.right : s.left);
- return this;
});
},
- insensitive: function(value) {
+ customize: function(label, styleClass) {
return this.each(function() {
var $elem = $(this);
+ var $customContent = $elem.find('.custom-content');
+
var data = $elem.data('switch');
- data.insensitive = value;
- $elem.toggleClass('insensitive', value);
+ var customized = !!label || !!styleClass;
+
+ if (data.customized) {
+ $customContent.text('').removeClass(data.customized.styleClass);
+ $elem.removeClass('customized').removeClass(data.customized.styleClass);
+ data.customized = null;
+ }
+
+ if (customized) {
+ $customContent.text(label).addClass(styleClass);
+ $elem.addClass('customized').addClass(styleClass);
+ data.customized = { label: label, styleClass: styleClass };
+ }
});
- },
+ }
};
$.fn.switchify = function(method) {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
