From 3536883d6129201818b4583d701eecef1a149164 Mon Sep 17 00:00:00 2001 From: connors Date: Mon, 10 Feb 2014 19:25:13 -0800 Subject: [PATCH] simplify segmented controls and fix js. broke themes --- components.html | 145 +++++++++++++------------------ dist/ratchet.css | 52 +++++------ dist/ratchet.js | 16 ++-- docs-assets/css/docs.css | 15 ++-- lib/js/segmented-controllers.js | 16 ++-- lib/sass/docs.scss | 14 ++- lib/sass/segmented-controls.scss | 44 ++++------ 7 files changed, 122 insertions(+), 180 deletions(-) diff --git a/components.html b/components.html index 2cfb74c..2907fa4 100644 --- a/components.html +++ b/components.html @@ -21,17 +21,17 @@ base_url: "../"
- +
+ + Base + + + iOS + + + Android + +
@@ -168,17 +168,11 @@ base_url: "../" Right - +
+ One + Two + Three +
@@ -190,17 +184,11 @@ base_url: "../" Right - +
+ One + Two + Three +
{% endhighlight %} @@ -270,17 +258,11 @@ base_url: "../"
@@ -292,17 +274,11 @@ base_url: "../" {% highlight html %} @@ -759,44 +735,43 @@ quis nostrud exercitation ullamco.

Segmented control

-

Created with flex-box so button sizes and spacing are consistent. Content sections that are to be swapped in and out by the controller should all be siblings and have the class "segmented-control-item". Then, just give each content section an id and point the link in the segmented control to that id.

+

Created with flex-box so button sizes and spacing are consistent. Content sections that are to be swapped in and out by the controller should all be siblings and have the class "control-content". Then, just give each content section an id and point the link in the segmented control to that id.

- +
+ + Thing one + + + Thing two + + + Thing three + +
- Item 1 - Item 2 - Item 3 + Item 1 + Item 2 + Item 3
{% highlight html %} - -
- Item 1 - Item 2 - Item 3 +
+ + Thing one + + + Thing two + + + Thing three +
+
+ Item 1 + Item 2 + Item 3
{% endhighlight %} diff --git a/dist/ratchet.css b/dist/ratchet.css index f0edc34..15a460e 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -897,94 +897,84 @@ select { border: 1px solid #ccc; border-radius: 4px; } -.segmented-control li { +.segmented-control .control-item { display: table-cell; overflow: hidden; width: 1%; - text-align: center; - white-space: nowrap; - border-left: 1px solid #ccc; -} -.segmented-control li > a { - display: block; padding-top: 6px; padding-bottom: 7px; - overflow: hidden; line-height: 1; color: #333; + text-align: center; + white-space: nowrap; text-overflow: ellipsis; + border-left: 1px solid #ccc; } -.segmented-control li:first-child { +.segmented-control .control-item:first-child { border-left-width: 0; } -.segmented-control li:active { +.segmented-control .control-item:active { background-color: #eee; } -.segmented-control li.active { +.segmented-control .control-item.active { background-color: #ccc; } .segmented-control-primary { border: 1px solid #428bca; } -.segmented-control-primary li { +.segmented-control-primary .control-item { border-color: inherit; -} -.segmented-control-primary li > a { color: #428bca; } -.segmented-control-primary li:active { +.segmented-control-primary .control-item:active { background-color: #cde1f1; } -.segmented-control-primary li.active { +.segmented-control-primary .control-item.active { background-color: #428bca; } -.segmented-control-primary li.active > a { +.segmented-control-primary .control-item.active > a { color: #fff; } .segmented-control-positive { border: 1px solid #5cb85c; } -.segmented-control-positive li { +.segmented-control-positive .control-item { border-color: inherit; -} -.segmented-control-positive li > a { color: #5cb85c; } -.segmented-control-positive li:active { +.segmented-control-positive .control-item:active { background-color: #d8eed8; } -.segmented-control-positive li.active { +.segmented-control-positive .control-item.active { background-color: #5cb85c; } -.segmented-control-positive li.active > a { +.segmented-control-positive .control-item.active > a { color: #fff; } .segmented-control-negative { border: 1px solid #d9534f; } -.segmented-control-negative li { +.segmented-control-negative .control-item { border-color: inherit; -} -.segmented-control-negative li > a { color: #d9534f; } -.segmented-control-negative li:active { +.segmented-control-negative .control-item:active { background-color: #f9e2e2; } -.segmented-control-negative li.active { +.segmented-control-negative .control-item.active { background-color: #d9534f; } -.segmented-control-negative li.active > a { +.segmented-control-negative .control-item.active > a { color: #fff; } -.segmented-control-item { +.control-content { display: none; } -.segmented-control-item.active { +.control-content.active { display: block; } diff --git a/dist/ratchet.js b/dist/ratchet.js index 3be794a..792f597 100644 --- a/dist/ratchet.js +++ b/dist/ratchet.js @@ -528,16 +528,16 @@ }(); /* ---------------------------------- - * TABS v1.0.0 + * Segmented controls v1.0.0 * Licensed under The MIT License * http://opensource.org/licenses/MIT * ---------------------------------- */ !function () { var getTarget = function (target) { - var i, popovers = document.querySelectorAll('.segmented-control li a'); + var i, segmentedControls = document.querySelectorAll('.segmented-control .control-item'); for (; target && target !== document; target = target.parentNode) { - for (i = popovers.length; i--;) { if (popovers[i] === target) return target; } + for (i = segmentedControls.length; i--;) { if (segmentedControls[i] === target) return target; } } }; @@ -545,23 +545,21 @@ var activeTab; var activeBodies; var targetBody; - var targetTab; + var targetTab = getTarget(e.target); var className = 'active'; var classSelector = '.' + className; - var targetAnchor = getTarget(e.target); - if (!targetAnchor) return; + if (!targetTab) return; - targetTab = targetAnchor.parentNode; activeTab = targetTab.parentNode.querySelector(classSelector); if (activeTab) activeTab.classList.remove(className); targetTab.classList.add(className); - if (!targetAnchor.hash) return; + if (!targetTab.hash) return; - targetBody = document.querySelector(targetAnchor.hash); + targetBody = document.querySelector(targetTab.hash); if (!targetBody) return; diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css index 68ee5df..c66513e 100644 --- a/docs-assets/css/docs.css +++ b/docs-assets/css/docs.css @@ -304,21 +304,17 @@ body { border-color: #00d1fe; background-color: transparent; } -.platform-toggle .segmented-control li { +.platform-toggle .segmented-control .control-item { cursor: pointer; - border-color: #00d1fe; -} -.platform-toggle .segmented-control li a { color: #00d1fe; + border-color: #00d1fe; } -.platform-toggle .segmented-control li:active { +.platform-toggle .segmented-control .control-item:active { background-color: rgba(0, 209, 254, 0.3); } -.platform-toggle .segmented-control li.active { - background-color: #00d1fe; -} -.platform-toggle .segmented-control li.active a { +.platform-toggle .segmented-control .control-item.active { color: #fff; + background-color: #00d1fe; } .component { @@ -395,6 +391,7 @@ body { } #segmentedControlsInDevice .segmented-control { + margin-top: 10px; margin-right: 10px; margin-left: 10px; } diff --git a/lib/js/segmented-controllers.js b/lib/js/segmented-controllers.js index 4da584c..79bd288 100644 --- a/lib/js/segmented-controllers.js +++ b/lib/js/segmented-controllers.js @@ -1,14 +1,14 @@ /* ---------------------------------- - * TABS v1.0.0 + * Segmented controls v1.0.0 * Licensed under The MIT License * http://opensource.org/licenses/MIT * ---------------------------------- */ !function () { var getTarget = function (target) { - var i, popovers = document.querySelectorAll('.segmented-control li a'); + var i, segmentedControls = document.querySelectorAll('.segmented-control .control-item'); for (; target && target !== document; target = target.parentNode) { - for (i = popovers.length; i--;) { if (popovers[i] === target) return target; } + for (i = segmentedControls.length; i--;) { if (segmentedControls[i] === target) return target; } } }; @@ -16,23 +16,21 @@ var activeTab; var activeBodies; var targetBody; - var targetTab; + var targetTab = getTarget(e.target); var className = 'active'; var classSelector = '.' + className; - var targetAnchor = getTarget(e.target); - if (!targetAnchor) return; + if (!targetTab) return; - targetTab = targetAnchor.parentNode; activeTab = targetTab.parentNode.querySelector(classSelector); if (activeTab) activeTab.classList.remove(className); targetTab.classList.add(className); - if (!targetAnchor.hash) return; + if (!targetTab.hash) return; - targetBody = document.querySelector(targetAnchor.hash); + targetBody = document.querySelector(targetTab.hash); if (!targetBody) return; diff --git a/lib/sass/docs.scss b/lib/sass/docs.scss index fc65461..c4c4875 100644 --- a/lib/sass/docs.scss +++ b/lib/sass/docs.scss @@ -318,22 +318,17 @@ body { border-color: #00d1fe; background-color: transparent; - li { + .control-item { cursor: pointer; + color: #00d1fe; border-color: #00d1fe; - - a { - color: #00d1fe; - } + &:active { background-color: rgba(0,209,254,.3); } &.active { + color: #fff; background-color: #00d1fe; - - a { - color: #fff; - } } } } @@ -411,6 +406,7 @@ body { //Segmented Control #segmentedControlsInDevice { .segmented-control { + margin-top: 10px; margin-right: 10px; margin-left: 10px; } diff --git a/lib/sass/segmented-controls.scss b/lib/sass/segmented-controls.scss index 3acf461..a7dbbcc 100644 --- a/lib/sass/segmented-controls.scss +++ b/lib/sass/segmented-controls.scss @@ -15,24 +15,18 @@ border-radius: 4px; // Section within controller - li { + .control-item { display: table-cell; overflow: hidden; width: 1%; + padding-top: 6px; + padding-bottom: 7px; + line-height: 1; + color: #333; text-align: center; white-space: nowrap; + text-overflow: ellipsis; border-left: 1px solid #ccc; - - // Link that fills each section - > a { - display: block; - padding-top: 6px; - padding-bottom: 7px; - overflow: hidden; - line-height: 1; - color: #333; - text-overflow: ellipsis; - } // Remove border-left and shadow from first section &:first-child { @@ -56,12 +50,10 @@ .segmented-control-primary { border: 1px solid $primary-color; - li { + .control-item { border-color: inherit; - - > a { - color: $primary-color; - } + color: $primary-color; + &:active { background-color: lighten($primary-color, 35%); } @@ -79,12 +71,10 @@ .segmented-control-positive { border: 1px solid $positive-color; - li { + .control-item { border-color: inherit; - - > a { - color: $positive-color; - } + color: $positive-color; + &:active { background-color: lighten($positive-color, 35%); } @@ -102,12 +92,10 @@ .segmented-control-negative { border: 1px solid $negative-color; - li { + .control-item { border-color: inherit; - - > a { - color: $negative-color; - } + color: $negative-color; + &:active { background-color: lighten($negative-color, 35%); } @@ -121,7 +109,7 @@ } } -.segmented-control-item { +.control-content { display: none; &.active {