From 6c1390dc0d3c4f9f24196adf3aeba5a0566866e7 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 12 Aug 2015 11:24:30 -0400 Subject: [PATCH] Controlgroup: Add controlgroup labels --- demos/controlgroup/default.html | 18 +- demos/controlgroup/toolbar.html | 464 +++++++++++++++++--------------- themes/base/controlgroup.css | 25 +- ui/widgets/controlgroup.js | 14 +- 4 files changed, 282 insertions(+), 239 deletions(-) diff --git a/demos/controlgroup/default.html b/demos/controlgroup/default.html index 57a2530b6..49ea28210 100644 --- a/demos/controlgroup/default.html +++ b/demos/controlgroup/default.html @@ -9,9 +9,16 @@ .ui-controlgroup-vertical { width: 150px; } - .ui-controlgroup.ui-controlgroup-vertical > button.ui-button { + .ui-controlgroup.ui-controlgroup-vertical > button.ui-button, + .ui-controlgroup.ui-controlgroup-vertical > .ui-controlgroup-label { text-align: center; } + #car-type-button { + width: 120px; + } + .ui-controlgroup-horizontal .ui-spinner { + width: 50px; + } -
- - - - - - - - - - - +
+
+ + + + + + + + + + + +
+ 
+	The Rime of the Ancient Mariner (text of 1834)
+	BY SAMUEL TAYLOR COLERIDGE
+	Argument
+
+	How a Ship having passed the Line was driven by storms to the cold Country towards the South Pole;
+	and how from thence she made her course to the tropical Latitude of the Great Pacific Ocean; and 
+	of the strange things that befell; and in what manner the Ancyent Marinere came back to his own
+	Country.
+
+	PART I
+	It is an ancient Mariner,
+	And he stoppeth one of three.
+	'By thy long grey beard and glittering eye,
+	Now wherefore stopp'st thou me?
+
+	The Bridegroom's doors are opened wide,
+	And I am next of kin;
+	The guests are met, the feast is set:
+	May'st hear the merry din.'
+
+	He holds him with his skinny hand,
+	'There was a ship,' quoth he.
+	'Hold off! unhand me, grey-beard loon!'
+	Eftsoons his hand dropt he.
+
+	He holds him with his glittering eye—
+	The Wedding-Guest stood still,
+	And listens like a three years' child:
+	The Mariner hath his will.
+
+	The Wedding-Guest sat on a stone:
+	He cannot choose but hear;
+	And thus spake on that ancient man,
+	The bright-eyed Mariner.
+
+	'The ship was cheered, the harbour cleared,
+	Merrily did we drop
+	Below the kirk, below the hill,
+	Below the lighthouse top.
+
+	The Sun came up upon the left,
+	Out of the sea came he!
+	And he shone bright, and on the right
+	Went down into the sea.
+
+	Higher and higher every day,
+	Till over the mast at noon—'
+	The Wedding-Guest here beat his breast,
+	For he heard the loud bassoon.
+
+	The bride hath paced into the hall,
+	Red as a rose is she;
+	Nodding their heads before her goes
+	The merry minstrelsy.
+
+	The Wedding-Guest he beat his breast,
+	Yet he cannot choose but hear;
+	And thus spake on that ancient man,
+	The bright-eyed Mariner.
+
+	And now the STORM-BLAST came, and he
+	Was tyrannous and strong:
+	He struck with his o'ertaking wings,
+	And chased us south along.
+
+	With sloping masts and dipping prow,
+	As who pursued with yell and blow
+	Still treads the shadow of his foe,
+	And forward bends his head,
+	The ship drove fast, loud roared the blast,
+	And southward aye we fled.
+
+	And now there came both mist and snow,
+	And it grew wondrous cold:
+	And ice, mast-high, came floating by,
+	As green as emerald.
+
+	And through the drifts the snowy clifts
+	Did send a dismal sheen:
+	Nor shapes of men nor beasts we ken—
+	The ice was all between.
+
+	The ice was here, the ice was there,
+	The ice was all around:
+	It cracked and growled, and roared and howled,
+	Like noises in a swound!
+
+	At length did cross an Albatross,
+	Thorough the fog it came;
+	As if it had been a Christian soul,
+	We hailed it in God's name.
+
+	It ate the food it ne'er had eat,
+	And round and round it flew.
+	The ice did split with a thunder-fit;
+	The helmsman steered us through!
+
+	And a good south wind sprung up behind;
+	The Albatross did follow,
+	And every day, for food or play,
+	Came to the mariner's hollo!
+
+	In mist or cloud, on mast or shroud,
+	It perched for vespers nine;
+	Whiles all the night, through fog-smoke white,
+	Glimmered the white Moon-shine.'
+
+	'God save thee, ancient Mariner!
+	From the fiends, that plague thee thus!—
+	Why look'st thou so?'—With my cross-bow
+	I shot the ALBATROSS.
+
-

-
-The Rime of the Ancient Mariner (text of 1834)
-BY SAMUEL TAYLOR COLERIDGE
-Argument
-
-How a Ship having passed the Line was driven by storms to the cold Country towards the South Pole;
-and how from thence she made her course to the tropical Latitude of the Great Pacific Ocean; and 
-of the strange things that befell; and in what manner the Ancyent Marinere came back to his own
-Country.
-
-PART I
-It is an ancient Mariner,
-And he stoppeth one of three.
-'By thy long grey beard and glittering eye,
-Now wherefore stopp'st thou me?
-
-The Bridegroom's doors are opened wide,
-And I am next of kin;
-The guests are met, the feast is set:
-May'st hear the merry din.'
-
-He holds him with his skinny hand,
-'There was a ship,' quoth he.
-'Hold off! unhand me, grey-beard loon!'
-Eftsoons his hand dropt he.
-
-He holds him with his glittering eye—
-The Wedding-Guest stood still,
-And listens like a three years' child:
-The Mariner hath his will.
-
-The Wedding-Guest sat on a stone:
-He cannot choose but hear;
-And thus spake on that ancient man,
-The bright-eyed Mariner.
-
-'The ship was cheered, the harbour cleared,
-Merrily did we drop
-Below the kirk, below the hill,
-Below the lighthouse top.
-
-The Sun came up upon the left,
-Out of the sea came he!
-And he shone bright, and on the right
-Went down into the sea.
-
-Higher and higher every day,
-Till over the mast at noon—'
-The Wedding-Guest here beat his breast,
-For he heard the loud bassoon.
-
-The bride hath paced into the hall,
-Red as a rose is she;
-Nodding their heads before her goes
-The merry minstrelsy.
-
-The Wedding-Guest he beat his breast,
-Yet he cannot choose but hear;
-And thus spake on that ancient man,
-The bright-eyed Mariner.
-
-And now the STORM-BLAST came, and he
-Was tyrannous and strong:
-He struck with his o'ertaking wings,
-And chased us south along.
-
-With sloping masts and dipping prow,
-As who pursued with yell and blow
-Still treads the shadow of his foe,
-And forward bends his head,
-The ship drove fast, loud roared the blast,
-And southward aye we fled.
-
-And now there came both mist and snow,
-And it grew wondrous cold:
-And ice, mast-high, came floating by,
-As green as emerald.
-
-And through the drifts the snowy clifts
-Did send a dismal sheen:
-Nor shapes of men nor beasts we ken—
-The ice was all between.
-
-The ice was here, the ice was there,
-The ice was all around:
-It cracked and growled, and roared and howled,
-Like noises in a swound!
-
-At length did cross an Albatross,
-Thorough the fog it came;
-As if it had been a Christian soul,
-We hailed it in God's name.
-
-It ate the food it ne'er had eat,
-And round and round it flew.
-The ice did split with a thunder-fit;
-The helmsman steered us through!
-
-And a good south wind sprung up behind;
-The Albatross did follow,
-And every day, for food or play,
-Came to the mariner's hollo!
-
-In mist or cloud, on mast or shroud,
-It perched for vespers nine;
-Whiles all the night, through fog-smoke white,
-Glimmered the white Moon-shine.'
-
-'God save thee, ancient Mariner!
-From the fiends, that plague thee thus!—
-Why look'st thou so?'—With my cross-bow
-I shot the ALBATROSS.
-

A sample editor toolbar

Highlight text and edit it using the buttons and dropdowns in the toolbar

diff --git a/themes/base/controlgroup.css b/themes/base/controlgroup.css index b801f4565..3d57b11f6 100644 --- a/themes/base/controlgroup.css +++ b/themes/base/controlgroup.css @@ -12,12 +12,15 @@ .ui-controlgroup { vertical-align: middle; } -.ui-controlgroup > .ui-button { +.ui-controlgroup > .ui-controlgroup-item { float: left; margin-left: 0; margin-right: 0; } -.ui-controlgroup-vertical > .ui-button { +.ui-controlgroup > .ui-controlgroup-item:focus { + z-index: 9999; +} +.ui-controlgroup-vertical > .ui-controlgroup-item { display: block; float: none; width: 100%; @@ -25,12 +28,18 @@ margin-bottom: 0; text-align: left; } -.ui-controlgroup-vertical label.ui-button { +.ui-controlgroup-vertical .ui-controlgroup-item { box-sizing: border-box; } -.ui-controlgroup .ui-spinner { - padding-top: .225em; - padding-bottom: .225em; - border-color: #ccc; - float: left; +.ui-controlgroup-label { + padding: .4em 1em; +} +.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { + border-left: none; +} +.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item { + border-top: none; +} +.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content { + border-right: none; } diff --git a/ui/widgets/controlgroup.js b/ui/widgets/controlgroup.js index 83cb184ec..3887c7abf 100644 --- a/ui/widgets/controlgroup.js +++ b/ui/widgets/controlgroup.js @@ -39,7 +39,8 @@ return $.widget( "ui.controlgroup", { "button": "input[type=button], input[type=submit], input[type=reset], button, a", "checkboxradio": "input[type='checkbox'], input[type='radio']", "selectmenu": "select", - "spinner": ".ui-spinner-input" + "spinner": ".ui-spinner-input", + "controlgroupLabel": ".ui-controlgroup-label" }, direction: "horizontal", excludeInvisible: true @@ -67,7 +68,7 @@ return $.widget( "ui.controlgroup", { // First we iterate over each of the items options $.each( this.options.items, function( widget, selector ) { - var widgets, + var widgets, labels, options = {}; // We assume everything is in the middle to start because we can't determine @@ -94,17 +95,22 @@ return $.widget( "ui.controlgroup", { childWidgets.push( widgetElement[ 0 ] ); } ); + } else if ( selector && widget === "controlgroupLabel" ) { + labels = that.element.find( selector ); + that._addClass( labels, null, "ui-widget ui-widget-content ui-state-default" ); + Array.prototype.push.apply( childWidgets, labels ); } } ); this.childWidgets = $( $.unique( childWidgets ) ); + this._addClass( this.childWidgets, "ui-controlgroup-item" ); }, _callChildMethod: function( method ) { this.childWidgets.each( function() { var element = $( this ), data = element.data( "ui-controlgroup-data" ); - if( data[ method ] ) { + if( data && data[ method ] ) { data[ method ](); } } ); @@ -203,7 +209,7 @@ return $.widget( "ui.controlgroup", { // before determining first and last $.each( [ "first", "last" ], function( index, value ) { var instance = children[ value ]().data( "ui-controlgroup-data" ); - console.log( instance ) + if ( that[ "_" + instance.widgetName + "_options" ] ) { instance.element[ instance.widgetName ]( that[ "_" + instance.widgetName + "_options" ](