From 32252a1dfd487965a17ca1266144f1057d912d4e Mon Sep 17 00:00:00 2001
From: rlx <rlx@rolux.org>
Date: Tue, 12 Jan 2016 11:11:08 +0530
Subject: [PATCH] some more support for squared style

---
 source/UI/css/UI.css             |  9 ++++++++-
 source/UI/js/Form/ButtonGroup.js |  1 +
 source/UI/js/Form/Checkbox.js    |  2 +-
 source/UI/js/Form/Input.js       |  1 +
 source/UI/js/Form/Label.js       | 13 ++++++++++---
 source/UI/js/Form/Select.js      |  1 +
 source/UI/js/Panel/TabPanel.js   |  2 ++
 7 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/source/UI/css/UI.css b/source/UI/css/UI.css
index 3ba76d5b..41abd8d4 100644
--- a/source/UI/css/UI.css
+++ b/source/UI/css/UI.css
@@ -1228,10 +1228,17 @@ OxSelect
     border-top-left-radius: 8px;
     border-bottom-left-radius: 8px;
 }
+.OxLabelSelect.OxSquared > .OxTitle {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
 .OxLabelSelect.OxRounded.OxSelected {
     border-bottom-left-radius: 8px;
 }
-.OxLabelSelect.OxRounded.OxSelected > .OxTitle {
+.OxLabelSelect.Squared.OxSelected {
+    border-bottom-left-radius: 4px;
+}
+.OxLabelSelect.OxSelected > .OxTitle {
     border-bottom-left-radius: 0;
 }
 
diff --git a/source/UI/js/Form/ButtonGroup.js b/source/UI/js/Form/ButtonGroup.js
index ddb893a2..c1c5ff5e 100644
--- a/source/UI/js/Form/ButtonGroup.js
+++ b/source/UI/js/Form/ButtonGroup.js
@@ -58,6 +58,7 @@ Ox.ButtonGroup = function(options, self) {
             overlap: self.options.overlap == 'left' && i == 0 ? 'left'
                 : self.options.overlap == 'right' && i == self.options.buttons.length - 1 ? 'right'
                 : 'none',
+            style: self.options.style,
             title: button.title || button,
             tooltip: button.tooltip,
             width: button.width
diff --git a/source/UI/js/Form/Checkbox.js b/source/UI/js/Form/Checkbox.js
index 68971b33..24b286c0 100644
--- a/source/UI/js/Form/Checkbox.js
+++ b/source/UI/js/Form/Checkbox.js
@@ -94,7 +94,7 @@ Ox.Checkbox = function(options, self) {
     self.$button = Ox.Button({
             disabled: self.options.disabled,
             id: self.options.id + 'Button',
-            style: self.options.style,
+            style: self.options.style != 'rounded' ? self.options.style : '',
             type: 'image',
             value: self.options.value ? 'check' : 'none',
             values: ['none', 'check']
diff --git a/source/UI/js/Form/Input.js b/source/UI/js/Form/Input.js
index 37e8297b..3af912be 100644
--- a/source/UI/js/Form/Input.js
+++ b/source/UI/js/Form/Input.js
@@ -212,6 +212,7 @@ Ox.Input = function(options, self) {
     if (self.options.label) {
         self.$label = Ox.Label({
             overlap: 'right',
+            style: self.options.style,
             textAlign: 'right',
             title: self.options.label,
             width: self.options.labelWidth
diff --git a/source/UI/js/Form/Label.js b/source/UI/js/Form/Label.js
index 9ce78c69..e4cc8023 100644
--- a/source/UI/js/Form/Label.js
+++ b/source/UI/js/Form/Label.js
@@ -27,13 +27,19 @@ Ox.Label = function(options, self) {
             width: function() {
                 that.css({
                     width: self.options.width - (
-                        self.options.style == 'rounded' ? 14 : 8
+                        Ox.contains(['rounded', 'squared'], self.options.style)
+                        ? 14 : 8
                     ) + 'px'
                 });
             }
         })
         .addClass(
-            'OxLabel Ox' + Ox.toTitleCase(self.options.style) 
+            'OxLabel'
+            + (
+                self.options.style != 'rounded'
+                ? ' Ox' + Ox.toTitleCase(self.options.style)
+                : ''
+            )
             + (self.options.disabled ? ' OxDisabled' : '')
             + (
                 self.options.overlap != 'none'
@@ -42,7 +48,8 @@ Ox.Label = function(options, self) {
         )
         .css(Ox.extend(self.options.width == 'auto' ? {} : {
             width: self.options.width - (
-                self.options.style == 'rounded' ? 14 : 8
+                Ox.contains(['rounded', 'squared'], self.options.style)
+                ? 14 : 8
             ) + 'px'
         }, {
             textAlign: self.options.textAlign
diff --git a/source/UI/js/Form/Select.js b/source/UI/js/Form/Select.js
index e2e55427..6e2f98b9 100644
--- a/source/UI/js/Form/Select.js
+++ b/source/UI/js/Form/Select.js
@@ -127,6 +127,7 @@ Ox.Select = function(options, self) {
     if (self.options.label) {
         self.$label = Ox.Label({
             overlap: 'right',
+            style: self.options.style,
             textAlign: 'right',
             title: self.options.label,
             width: self.options.labelWidth
diff --git a/source/UI/js/Panel/TabPanel.js b/source/UI/js/Panel/TabPanel.js
index ca4b20a8..346d44e8 100644
--- a/source/UI/js/Panel/TabPanel.js
+++ b/source/UI/js/Panel/TabPanel.js
@@ -22,6 +22,7 @@ Ox.TabPanel = function(options, self) {
         .defaults({
             content: null,
             size: 24,
+            style: 'default',
             tabs: []
         })
         .options(options || {})
@@ -40,6 +41,7 @@ Ox.TabPanel = function(options, self) {
             buttons: self.options.tabs,
             id: 'tabs',
             selectable: true,
+            style: self.options.style,
             value: self.selected
         })
         .css({top: (self.options.size - 16) / 2 + 'px'})