assets/sc-theme-sprite.psd
assets/sc-theme-ysprite.psd
frameworks/sproutcore/english.lproj/images/sc-theme-sprite.png
frameworks/sproutcore/english.lproj/images/sc-theme-ysprite.png
frameworks/sproutcore/views/split.js
frameworks/sproutcore/views/split_divider.js
@@ -1,5 +1,14 @@
== SVN HEAD
+* Renamed buttons-sprite.png to sc-theme-sprite.png. Added
+sc-theme-ysprite.png. One is now used to hold all repeat-x and non-repeating
+sprites while the other is used for repeat-y sprites only.
+
+* SC.SplitView & SC.SplitDividerView provide support for draggable and
+collapsable split views.
+
+==
+
* SC.ListView now uses SC.ListItemView as its default example view instead of
SC.LabelView (or the old SC.TextCellView)
History.txt
assets/buttons-source.psd
@@ -1,5 +1,3 @@
-/* @override
-*/
/* @group Button Core */
@@ -74,18 +72,17 @@ a.regular.image span.label {
.sc-theme.blur a.regular,
.sc-theme.focus a.regular.disabled {
- background: transparent static_url('images/buttons-sprite.png') no-repeat scroll right -496px;
+ background: transparent static_url('images/sc-theme-sprite.png') no-repeat scroll right -496px;
}
.sc-theme.blur a.regular span.button-inner,
-
.sc-theme.focus a.regular.disabled span.button-inner {
- background: static_url('images/buttons-sprite.png') no-repeat 0 -450px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat 0 -450px;
}
.sc-theme.blur a.regular span.label,
.sc-theme.focus a.regular.disabled span.label {
- background: static_url('images/buttons-sprite.png') repeat-x 0 -473px;
+ background: static_url('images/sc-theme-sprite.png') repeat-x 0 -473px;
color: #999;
}
@@ -95,7 +92,7 @@ a.regular.image span.label {
.sc-theme.focus a.regular.sel.disabled,
.sc-theme.focus a.regular.def.disabled {
- background: transparent static_url('images/buttons-sprite.png') no-repeat scroll right -289px;
+ background: transparent static_url('images/sc-theme-sprite.png') no-repeat scroll right -289px;
}
.sc-theme.blur a.regular.sel span.button-inner,
@@ -103,7 +100,7 @@ a.regular.image span.label {
.sc-theme.focus a.regular.sel.disabled span.button-inner,
.sc-theme.focus a.regular.def.disabled span.button-inner {
- background: static_url('images/buttons-sprite.png') no-repeat 0 -243px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat 0 -243px;
}
.sc-theme.blur a.regular.def span.label,
@@ -111,7 +108,7 @@ a.regular.image span.label {
.sc-theme.focus a.regular.def.disabled span.label,
.sc-theme.focus a.regular.sel.disabled span.label {
- background: static_url('images/buttons-sprite.png') repeat-x 0 -266px;
+ background: static_url('images/sc-theme-sprite.png') repeat-x 0 -266px;
color: #999;
}
@@ -120,15 +117,15 @@ a.regular.image span.label {
/* @group enabled */
.sc-theme a.regular {
- background: transparent static_url('images/buttons-sprite.png') no-repeat scroll right -358px;
+ background: transparent static_url('images/sc-theme-sprite.png') no-repeat right -358px;
}
.sc-theme a.regular span.button-inner {
- background: static_url('images/buttons-sprite.png') no-repeat 0 -312px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat 0 -312px;
}
.sc-theme a.regular span.label {
- background: transparent static_url('images/buttons-sprite.png') repeat-x left -335px;
+ background: transparent static_url('images/sc-theme-sprite.png') repeat-x left -335px;
}
/* @end */
@@ -137,17 +134,17 @@ a.regular.image span.label {
.sc-theme a.regular.sel,
.sc-theme a.regular.def {
- background: transparent static_url('images/buttons-sprite.png') no-repeat scroll right -151px;
+ background: transparent static_url('images/sc-theme-sprite.png') no-repeat scroll right -151px;
}
.sc-theme a.regular.sel span.button-inner,
.sc-theme a.regular.def span.button-inner {
- background: static_url('images/buttons-sprite.png') no-repeat 0 -105px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat 0 -105px;
}
.sc-theme a.regular.sel span.label,
.sc-theme a.regular.def span.label {
- background: static_url('images/buttons-sprite.png') repeat-x 0 -128px;
+ background: static_url('images/sc-theme-sprite.png') repeat-x 0 -128px;
}
/* @end */
@@ -156,17 +153,17 @@ a.regular.image span.label {
.sc-theme a.regular.sel.active,
.sc-theme a.regular.def.active {
- background: transparent static_url('images/buttons-sprite.png') no-repeat scroll right -220px;
+ background: transparent static_url('images/sc-theme-sprite.png') no-repeat scroll right -220px;
}
.sc-theme a.regular.sel.active span.button-inner,
.sc-theme a.regular.def.active span.button-inner {
- background: static_url('images/buttons-sprite.png') no-repeat 0 -174px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat 0 -174px;
}
.sc-theme a.regular.sel.active span.label,
.sc-theme a.regular.def.active span.label {
- background: static_url('images/buttons-sprite.png') repeat-x 0 -197px;
+ background: static_url('images/sc-theme-sprite.png') repeat-x 0 -197px;
}
/* @end */
@@ -174,15 +171,64 @@ a.regular.image span.label {
/* @group active */
.sc-theme a.regular.active {
- background: transparent static_url('images/buttons-sprite.png') no-repeat scroll right -427px;
+ background: transparent static_url('images/sc-theme-sprite.png') no-repeat scroll right -427px;
}
.sc-theme a.regular.active span.button-inner {
- background: static_url('images/buttons-sprite.png') no-repeat 0 -381px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat 0 -381px;
}
.sc-theme a.regular.active span.label {
- background: static_url('images/buttons-sprite.png') repeat-x 0 -404px;
+ background: static_url('images/sc-theme-sprite.png') repeat-x 0 -404px;
+}
+
+/* @end */
+
+/* @group square theme */
+
+.sc-theme .sc-square-theme a.regular,
+.sc-theme .sc-square-theme a.regular.def {
+ background: transparent static_url('images/sc-theme-sprite.png') no-repeat right -1150px;
+}
+
+.sc-theme .sc-square-theme a.regular span.button-inner,
+.sc-theme .sc-square-theme a.regular.def span.button-inner {
+ background: static_url('images/sc-theme-sprite.png') no-repeat left -1104px;
+}
+
+.sc-theme .sc-square-theme a.regular span.label,
+.sc-theme .sc-square-theme a.regular.def span.label {
+ background: transparent static_url('images/sc-theme-sprite.png') repeat-x 0px -1127px;
+}
+
+.sc-theme .sc-square-theme a.regular.sel,
+.sc-theme .sc-square-theme a.regular.active {
+ background: transparent static_url('images/sc-theme-sprite.png') no-repeat right -1219px;
+}
+
+.sc-theme .sc-square-theme a.regular.sel span.button-inner,
+.sc-theme .sc-square-theme a.regular.active span.button-inner {
+ background: static_url('images/sc-theme-sprite.png') no-repeat left -1173px;
+}
+
+.sc-theme .sc-square-theme a.regular.sel span.label,
+.sc-theme .sc-square-theme a.regular.active span.label {
+ background: transparent static_url('images/sc-theme-sprite.png') repeat-x 0px -1196px;
+}
+
+.sc-theme.blur .sc-square-theme a.regular,
+.sc-theme .sc-square-theme a.regular.disabled {
+ background: transparent static_url('images/sc-theme-sprite.png') no-repeat right -1288px;
+}
+
+.sc-theme.blur .sc-square-theme a.regular span.button-inner,
+.sc-theme .sc-square-theme a.regular.disabled span.button-inner {
+ background: static_url('images/sc-theme-sprite.png') no-repeat left -1242px;
+}
+
+.sc-theme.blur .sc-square-theme a.regular span.label,
+.sc-theme .sc-square-theme a.regular.disabled span.label {
+ background: transparent static_url('images/sc-theme-sprite.png') repeat-x 0px -1265px;
}
/* @end */
@@ -236,6 +282,16 @@ a.regular.image span.label {
border-right: 1px #888 solid ;
}
+.sc-theme .sc-square-theme a.regular.segment.segment-inner,
+.sc-theme .sc-square-theme a.regular.segment.segment-left {
+ border-right: 1px solid #625560;
+}
+
+.sc-theme .sc-square-theme a.regular.segment.segment-inner.disabled,
+.sc-theme .sc-square-theme a.regular.segment.segment-left.disabled {
+ border-right: 1px solid #888;
+}
+
.sc-theme a.segment span.label {
font-weight: normal;
}
@@ -257,15 +313,15 @@ a.regular.image span.label {
vertical-align: middle ;
position: relative ;
top: -1px;
- background: static_url('images/buttons-sprite.png') no-repeat -32px -728px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat -32px -728px;
}
.sc-theme a.checkbox.sel img.button {
- background: static_url('images/buttons-sprite.png') no-repeat 0px -728px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat 0px -728px;
}
.sc-theme a.checkbox.mixed img.button {
- background: static_url('images/buttons-sprite.png') no-repeat -16px -744px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat -16px -744px;
}
@@ -279,15 +335,15 @@ a.regular.image span.label {
}
.sc-theme a.checkbox.disabled img.button {
- background: static_url('images/buttons-sprite.png') no-repeat 0 -760px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat 0 -760px;
}
.sc-theme a.checkbox.sel.disabled img.button {
- background: static_url('images/buttons-sprite.png') no-repeat 0px -760px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat 0px -760px;
}
.sc-theme a.checkbox.mixed.disabled img.button {
- background: static_url('images/buttons-sprite.png') no-repeat 0 -760px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat 0 -760px;
}
@@ -297,15 +353,15 @@ a.regular.image span.label {
/* @group active */
.sc-theme a.checkbox.active img.button {
- background: static_url('images/buttons-sprite.png') no-repeat 0px -744px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat 0px -744px;
}
.sc-theme a.checkbox.sel.active img.button {
- background: static_url('images/buttons-sprite.png') no-repeat -16px -728px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat -16px -728px;
}
.sc-theme a.checkbox.mixed.active img.button {
- background: static_url('images/buttons-sprite.png') no-repeat -32px -744px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat -32px -744px;
}
@@ -329,15 +385,15 @@ a.regular.image span.label {
vertical-align: middle ;
position: relative ;
top: -1px;
- background: static_url('images/buttons-sprite.png') no-repeat 0px -776px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat 0px -776px;
}
.sc-theme a.radio.sel img.button {
- background: static_url('images/buttons-sprite.png') no-repeat -16px -760px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat -16px -760px;
}
.sc-theme a.radio.mixed img.button {
- background: static_url('images/buttons-sprite.png') no-repeat -32px -776px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat -32px -776px;
}
@@ -351,15 +407,15 @@ a.regular.image span.label {
}
.sc-theme a.radio.disabled img.button {
- background: static_url('images/buttons-sprite.png') no-repeat -16px -792px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat -16px -792px;
}
.sc-theme a.radio.sel.disabled img.button {
- background: static_url('images/buttons-sprite.png') no-repeat -16px -792px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat -16px -792px;
}
.sc-theme a.radio.mixed.disabled img.button {
- background: static_url('images/buttons-sprite.png') no-repeat -16px -792px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat -16px -792px;
}
@@ -369,15 +425,15 @@ a.regular.image span.label {
/* @group active */
.sc-theme a.radio.active img.button {
- background: static_url('images/buttons-sprite.png') no-repeat -16px -776px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat -16px -776px;
}
.sc-theme a.radio.sel.active img.button {
- background: static_url('images/buttons-sprite.png') no-repeat -32px -760px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat -32px -760px;
}
.sc-theme a.radio.mixed.active img.button {
- background: static_url('images/buttons-sprite.png') no-repeat 0px -792px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat 0px -792px;
}
@@ -385,7 +441,7 @@ a.regular.image span.label {
/* @end */
-/* @group square - back */
+/* @group square */
/* @group basic */
@@ -393,68 +449,63 @@ a.regular.image span.label {
display: -moz-inline-box;
display: inline-block;
font-size: 13px;
- height: 22px;
+ height: 23px;
text-align: center;
- margin: 0;
+ margin-left: 2px;
+ margin-right: 2px ;
+ background: static_url('images/sc-theme-sprite.png') no-repeat left -1104px;
+ padding-left: 8px;
}
.sc-theme a.square span.button-inner {
display: block ;
- padding: 0;
+ padding-right: 8px;
+ background: transparent static_url('images/sc-theme-sprite.png') repeat-x right -1150px;
+ margin-right: -2px;
}
.sc-theme a.square span.label {
- background: transparent static_url('images/buttons-sprite.png') repeat-x 0px -335px;
+ background: transparent static_url('images/sc-theme-sprite.png') no-repeat 0px -1127px;
display: block ;
- //font-weight: bold;
text-align: center;
padding-top: 3px;
height: 19px;
- padding-left: 8px;
- padding-right: 8px;
- border-left: 1px #888 solid ;
- border-right: 1px #888 solid ;
}
/* @end */
/* @group sel - def */
-.sc-theme a.square.sel span.label,
-.sc-theme a.square.def span.label {
- background: static_url('images/buttons-sprite.png') repeat-x 0 -128px;
+.sc-theme a.square.sel,
+.sc-theme a.square.active {
+ background: static_url('images/sc-theme-sprite.png') repeat-x left -1173px;
}
-/* @end */
-
-/* @group disabled */
-
-.sc-theme a.square.disabled span.label {
- background: static_url('images/buttons-sprite.png') repeat-x 0 -473px;
- color: #999;
+.sc-theme a.square.sel span.button-inner,
+.sc-theme a.square.active span.button-inner {
+ background: static_url('images/sc-theme-sprite.png') repeat-x right -1219px;
}
-.sc-theme a.square.def.disabled span.label,
-.sc-theme a.square.sel.disabled span.label {
- background: static_url('images/buttons-sprite.png') repeat-x 0 -266px;
- color: #999;
+.sc-theme a.square.sel span.label,
+.sc-theme a.square.active span.label {
+ background: static_url('images/sc-theme-sprite.png') repeat-x right -1196px;
}
/* @end */
-/* @group sel.active - def.active */
+/* @group disabled */
-.sc-theme a.square.sel.active span.label,
-.sc-theme a.square.def.active span.label {
- background: static_url('images/buttons-sprite.png') repeat-x 0 -197px;
+.sc-theme a.square.disabled {
+ background: static_url('images/sc-theme-sprite.png') repeat-x left -1242px;
+ color: #999;
}
-/* @end */
-
-/* @group active */
+.sc-theme a.square.disabled span.button-inner {
+ background: static_url('images/sc-theme-sprite.png') repeat-x right -1288px;
+}
-.sc-theme a.square.active span.label {
- background: static_url('images/buttons-sprite.png') repeat-x 0 -404px;
+.sc-theme a.square.disabled span.label {
+ background: static_url('images/sc-theme-sprite.png') repeat-x right -1265px;
}
/* @end */
@@ -480,24 +531,24 @@ a.regular.image span.label {
}
.sc-theme a.dropdown {
- background: transparent static_url('images/buttons-sprite.png') no-repeat scroll right -565px;
+ background: transparent static_url('images/sc-theme-sprite.png') no-repeat scroll right -565px;
}
.sc-theme a.popup {
- background: transparent static_url('images/buttons-sprite.png') no-repeat scroll right -565px;
+ background: transparent static_url('images/sc-theme-sprite.png') no-repeat scroll right -565px;
}
.sc-theme a.dropdown span.button-inner,
.sc-theme a.popup span.button-inner {
- background: static_url('images/buttons-sprite.png') no-repeat 0 -519px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat 0 -519px;
display: block ;
height: 22px;
}
.sc-theme a.dropdown span.label,
.sc-theme a.popup span.label {
- background: transparent static_url('images/buttons-sprite.png') repeat-x 0px -542px;
+ background: transparent static_url('images/sc-theme-sprite.png') repeat-x 0px -542px;
display: block ;
font-weight: normal;
text-align: left;
@@ -513,21 +564,21 @@ a.regular.image span.label {
/* @group active */
.sc-theme a.dropdown.active {
- background: transparent static_url('images/buttons-sprite.png') no-repeat scroll right -634px;
+ background: transparent static_url('images/sc-theme-sprite.png') no-repeat scroll right -634px;
}
.sc-theme a.popup.active {
- background: transparent static_url('images/buttons-sprite.png') no-repeat scroll right -634px;
+ background: transparent static_url('images/sc-theme-sprite.png') no-repeat scroll right -634px;
}
.sc-theme a.dropdown.active span.button-inner,
.sc-theme a.popup.active span.button-inner {
- background: static_url('images/buttons-sprite.png') no-repeat 0 -588px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat 0 -588px;
}
.sc-theme a.dropdown.active span.label,
.sc-theme a.popup.active span.label {
- background: transparent static_url('images/buttons-sprite.png') repeat-x left -611px;
+ background: transparent static_url('images/sc-theme-sprite.png') repeat-x left -611px;
}
/* @end */
@@ -536,26 +587,26 @@ a.regular.image span.label {
.sc-theme a.dropdown.disabled,
.sc-theme.blur a.dropdown {
- background: transparent static_url('images/buttons-sprite.png') no-repeat scroll right -703px;
+ background: transparent static_url('images/sc-theme-sprite.png') no-repeat scroll right -703px;
}
.sc-theme.blur a.popup,
.sc-theme a.popup.disabled {
- background: transparent static_url('images/buttons-sprite.png') no-repeat scroll right -703px;
+ background: transparent static_url('images/sc-theme-sprite.png') no-repeat scroll right -703px;
}
.sc-theme.blur a.dropdown span.button-inner,
.sc-theme.blur a.popup span.button-inner,
.sc-theme a.dropdown.disabled span.button-inner,
.sc-theme a.popup.disabled span.button-inner {
- background: static_url('images/buttons-sprite.png') no-repeat 0 -657px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat 0 -657px;
}
.sc-theme.blur a.dropdown span.label,
.sc-theme.blur a.popup span.label,
.sc-theme a.dropdown.disabled span.label,
.sc-theme a.popup.disabled span.label {
- background: transparent static_url('images/buttons-sprite.png') repeat-x left -680px;
+ background: transparent static_url('images/sc-theme-sprite.png') repeat-x left -680px;
color: #999;
}
@@ -578,7 +629,7 @@ a.regular.image span.label {
vertical-align: middle ;
position: relative ;
top: -2px;
- background-image: static_url('images/buttons-sprite.png') ;
+ background-image: static_url('images/sc-theme-sprite.png') ;
}
.sc-theme a.disclosure .label {
frameworks/sproutcore/english.lproj/buttons.css
@@ -95,5 +95,21 @@
/* @end */
+/* @group SC.SplitView */
+
+.sc-split_view > * {
+ position: absolute ;
+}
+
+.sc-split-view.horizontal .sc-split-divider-view {
+ cursor: ew-resize;
+}
+
+.sc-split-view.vertical .sc-split-divider-view {
+ cursor: ns-resize;
+}
+
+/* @end */
+
frameworks/sproutcore/english.lproj/core.css
@@ -49,7 +49,7 @@
}
.menu-pane li.menu-item.active a {
- background: static_url('images/buttons-sprite.png') repeat-x left -67px;
+ background: static_url('images/sc-theme-sprite.png') repeat-x left -67px;
color: white ;
border-top-width: 1px;
border-top-color: #a9a9a9;
frameworks/sproutcore/english.lproj/menu.css
@@ -1,4 +1,9 @@
-/* @override http://localhost:4020/static/sproutcore/en/_cache/theme-1208227908.css */
+/* @override
+ http://localhost:4020/static/sproutcore/en/_cache/theme-1208227908.css
+ http://localhost:4020/static/sproutcore/en/_cache/theme-1208343214.css
+ http://localhost:4020/static/sproutcore/en/_cache/theme-1208497760.css
+ http://localhost:4020/static/sproutcore/en/_cache/theme-1208500445.css
+*/
/* =========================================
SproutCore UI Theme
@@ -85,7 +90,7 @@ body.sc-theme {
height: 7px;
left: -6px;
top: -4px;
- background: static_url('images/buttons-sprite.png') no-repeat -32px -1040px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat -32px -1040px;
}
/* @end */
@@ -108,7 +113,7 @@ body.sc-theme {
height: 7px;
left: -4px;
top: -6px;
- background: static_url('images/buttons-sprite.png') no-repeat -32px -1040px;
+ background: static_url('images/sc-theme-sprite.png') no-repeat -32px -1040px;
}
/* @end */
@@ -142,7 +147,7 @@ body.sc-theme {
}
.sc-theme.focus .sc-collection-view.sc-source-list-view .sc-collection-item.sel {
- background: static_url('images/buttons-sprite.png') 0 0px;
+ background: static_url('images/sc-theme-sprite.png') 0 0px;
color: white ;
border-top: 1px solid #5a3f62;
}
@@ -185,13 +190,13 @@ body.sc-theme {
display: block;
top: 6px;
padding-left: 9px;
- background: no-repeat static_url('images/buttons-sprite.png') left -51px;
+ background: no-repeat static_url('images/sc-theme-sprite.png') left -51px;
}
.sc-theme .sc-source-list-view .sc-count .inner {
display: block ;
padding-right: 9px;
- background: no-repeat static_url('images/buttons-sprite.png') right -33px;
+ background: no-repeat static_url('images/sc-theme-sprite.png') right -33px;
min-width: 10px ;
text-align: center ;
font-weight: bold ;
@@ -205,13 +210,25 @@ body.sc-theme {
.sc-theme .sc-source-list-view .sel .sc-count,
.sc-theme.blur .sc-source-list-view .sc-count {
- background: no-repeat static_url('images/buttons-sprite.png') left -87px;
+ background: no-repeat static_url('images/sc-theme-sprite.png') left -87px;
}
.sc-theme .sc-source-list-view .sel .sc-count .inner,
.sc-theme.blur .sc-source-list-view .sc-count .inner {
color: #372a3c;
- background: no-repeat static_url('images/buttons-sprite.png') right -69px;
+ background: no-repeat static_url('images/sc-theme-sprite.png') right -69px;
+}
+
+/* @end */
+
+/* @group SC.SplitView */
+
+.sc-theme .horizontal .sc-split-divider-view {
+ background: static_url('images/sc-theme-ysprite.png') repeat-y 0px top;
+ border-left: 1px #888 solid;
+ border-right: 1px #888 solid ;
+ z-index: 5;
+ width: 3px;
}
/* @end */
@@ -268,5 +285,61 @@ input.show-hint {
/* @end */
+/* @group Typical Workspace */
+
+.sc-app-workspace {
+ position: absolute ;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 36px;
+ overflow: auto ;
+}
+
+.sc-footer {
+ position: absolute ;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 39px;
+ background: url('/static/sproutcore/_src/english.lproj/images/sc-theme-sprite.png') repeat-x left -1057px;
+}
+
+.sc-footer .left,
+.sc-footer .right,
+.sc-footer .center {
+ height: 23px;
+ padding-top: 6px;
+ padding-bottom: 6px;
+ bottom: 0;
+}
+
+.sc-footer .left {
+ left: 0;
+ text-align: left ;
+ padding-left: 8px;
+ position: absolute ;
+}
+
+.sc-footer .right {
+ right: 0;
+ text-align: left ;
+ padding-right: 15px;
+ position: absolute ;
+}
+
+.sc-footer .center {
+ text-align: center ;
+ margin-top: 4px;
+}
+
+.sc-footer .sc-label-view {
+ line-height: 23px;
+ font-size: 12px;
+ font-weight: bold;
+}
+
+/* @end */
+
frameworks/sproutcore/english.lproj/theme.css
@@ -40,6 +40,12 @@ view_helper :view do
property :value
property :content_value_key
+ # For SC.SplitView support
+ property :max_thickness
+ property :min_thickness
+ property :can_collapse
+ property :collapsed, :key => 'isCollapsed'
+
# set panel type
var :panel
@@ -251,3 +257,19 @@ view_helper :scroll_view do
view 'SC.ScrollView'
css_class_names << 'sc-scroll-view'
end
+
+view_helper :split_view do
+ view 'SC.SplitView'
+ property :direction, :key => 'layoutDirection'
+ property :can_collapse_views
+
+ var :direction, 'horizontal'
+ css_class_names << 'sc-split-view'
+ css_class_names << @direction
+end
+
+view_helper :split_divider_view do
+ view 'SC.SplitDividerView'
+ css_class_names << 'sc-split-divider-view'
+end
+
frameworks/sproutcore/lib/core_views.rb
@@ -6,7 +6,7 @@
require('views/view') ;
require('views/label') ;
-SC.BENCHMARK_UPDATE_CHILDREN = YES ;
+SC.BENCHMARK_UPDATE_CHILDREN = NO ;
SC.VALIDATE_COLLECTION_CONSISTANCY = NO ;
/** Indicates that selection points should be selected using horizontal
@@ -818,10 +818,8 @@ SC.CollectionView = SC.View.extend(
*/
resizeChildrenWithOldSize: function(oldSize) {
if (!this._hasChildren) return ;
- if (!SC.rectsEqual(this._lastClippingFrame, this.get('clippingFrame'))) {
- this.updateChildren() ; // add/remove any new views.
- this.layoutResize() ; // perform layout on all of the views if needed.
- }
+ this.updateChildren() ; // add/remove any new views.
+ this.layoutResize() ; // perform layout on all of the views if needed.
},
/**
frameworks/sproutcore/views/collection.js
@@ -195,8 +195,6 @@ SC.GridView = SC.CollectionView.extend(
width: 0
};
- console.log('showInsertionPointBefore(%@) f=%@'.fmt(itemView,$H(f).inspect())) ;
-
if (!SC.rectsEqual(insertionPoint.get('frame'), f)) {
insertionPoint.set('frame', f) ;
}
frameworks/sproutcore/views/collection/grid.js
@@ -6,6 +6,8 @@ require('views/collection') ;
require('views/button/disclosure');
require('views/source_list_group');
+SC.BENCHMARK_SOURCE_LIST_VIEW = NO ;
+
/** @class
Displays a source list like the source list in iTunes.
@@ -235,7 +237,9 @@ SC.SourceListView = SC.CollectionView.extend(
/** @private */
layoutItemView: function(itemView, contentIndex, firstLayout) {
- SC.Benchmark.start('SC.SourceListView.layoutItemViewsFor') ;
+ if (SC.BENCHMARK_SOURCE_LIST_VIEW) {
+ SC.Benchmark.start('SC.SourceListView.layoutItemViewsFor') ;
+ }
// if itemView's group is not visible, then just set to invisible.
if (!this.groupAtContentIndexIsVisible(contentIndex)) {
@@ -267,11 +271,16 @@ SC.SourceListView = SC.CollectionView.extend(
}
- SC.Benchmark.end('SC.SourceListView.layoutItemViewsFor') ;
+ if (SC.BENCHMARK_SOURCE_LIST_VIEW) {
+ SC.Benchmark.end('SC.SourceListView.layoutItemViewsFor') ;
+ }
},
layoutGroupView: function(groupView, groupValue, contentIndexHint, firstLayout) {
- SC.Benchmark.start('SC.SourceListView.layoutGroupView') ;
+
+ if (SC.BENCHMARK_SOURCE_LIST_VIEW) {
+ SC.Benchmark.start('SC.SourceListView.layoutGroupView') ;
+ }
//console.log('layoutGroupView', groupValue) ;
@@ -294,7 +303,10 @@ SC.SourceListView = SC.CollectionView.extend(
if (firstLayout || !SC.rectsEqual(groupView.get('frame'), f)) {
groupView.set('frame', f) ;
}
- SC.Benchmark.end('SC.SourceListView.layoutGroupView') ;
+
+ if (SC.BENCHMARK_SOURCE_LIST_VIEW) {
+ SC.Benchmark.end('SC.SourceListView.layoutGroupView') ;
+ }
},
// .......................................
frameworks/sproutcore/views/collection/source_list.js
@@ -54,11 +54,11 @@ SC.ScrollView = SC.ContainerView.extend(SC.Scrollable, {
},
// auto fit child view based on which scrollviews are visible
- resizeChildrenWithOldSize: function() {
+ resizeChildrenWithOldSize: function(oldSize) {
var v = this.get('firstChild') ;
if (v) {
var f = v.get('frame');
- var orig = f ;
+ var orig = Object.clone(f) ;
var innerFrame = this.get('innerFrame') ;
f.x = f.y = 0 ;
if (!this.get('canScrollHorizontal')) f.width = innerFrame.width ;
frameworks/sproutcore/views/scroll.js
@@ -101,13 +101,12 @@ SC.View = SC.Responder.extend(SC.PathModule, SC.DelegateSupport,
// regenerate the childNodes array.
this._rebuildChildNodes();
-
- // update parent state.
- view._updateIsVisibleInWindow() ;
- view._flushInternalCaches() ;
- view._invalidateClippingFrame() ;
}
+ // update cached states.
+ view._updateIsVisibleInWindow() ;
+ view._flushInternalCaches() ;
+ view._invalidateClippingFrame() ;
// call notices.
view.didAddToParent(this, beforeView) ;
@@ -785,16 +784,34 @@ SC.View = SC.Responder.extend(SC.PathModule, SC.DelegateSupport,
return f ;
}.property('frame'),
- /** Frame returns the outside bounds of your view, offset from its offsetParent
-
- When you have the view's layoutMode in AUTO, frame is recalculated each time you
- call it. Otherwise, it will be cached for best performance.
+ /**
+ The outside bounds of your view, offset top/left from its offsetParent
+
+ The frame rect is the area actually occupied by a view including any
+ borders or padding, but excluding margins.
- The frame can change whenever:
- - you set a new frame property
- - you change a CSS class or style that effects the top, left, width, height, margins, padding, or borders of the element.
+ The frame is calculated and cached the first time you get it. Afer that,
+ the frame cache should automatically update when you make changes that
+ will effect the view frames unless you change the frame indirectly, such
+ as through changing CSS classes or by-passing the view to edit the DOM.
+
+ If you make a change like this, be sure to wrap the code that makes this
+ change with calls to viewFrameWillChange() and viewFrameDidChange() on the
+ highest-level view that will be impacted by the change. Calling this
+ method will automatically update child frames as well.
- @property
+ When you set the frame property, it will update the left, top, height,
+ and width CSS attributes on the element. Since the height and width in
+ the frame rect includes borders and padding, the view will automatically
+ adjust the height and width CSS it sets to account for this.
+
+ If you would prefer to edit the CSS attributes for the frame directly
+ instead, you can do so by using the styleTop, styleLeft, styleRight,
+ styleBottom, styleWidth, and styleHeight properties on the view. These
+ properties will update the CSS attributes and call viewFrameDidChange()/
+ viewFrameWillChange().
+
+ @field
*/
frame: function(key, value) {
@@ -813,11 +830,13 @@ SC.View = SC.Responder.extend(SC.PathModule, SC.DelegateSupport,
// reposition X
if (value.x !== undefined) {
style.left = Math.floor(f.x) + 'px' ;
+ style.right = 'auto';
}
// reposition Y
if (value.y !== undefined) {
style.top = Math.floor(f.y) + 'px' ;
+ style.bottom = 'auto';
}
// Resize width
@@ -885,8 +904,9 @@ SC.View = SC.Responder.extend(SC.PathModule, SC.DelegateSupport,
/**
The current frame size.
- This property will actually return the same value as the frame property, however setting
- this property will set only the frame size and ignore any origin you might pass.
+ This property will actually return the same value as the frame property,
+ however setting this property will set only the frame size and ignore any
+ origin you might pass.
@field
*/
@@ -900,8 +920,9 @@ SC.View = SC.Responder.extend(SC.PathModule, SC.DelegateSupport,
/**
The current frame origin.
- This property will actually return the same value as the frame property, however setting
- this property will set only the frame origin and ignore any size you might pass.
+ This property will actually return the same value as the frame property,
+ however setting this property will set only the frame origin and ignore
+ any size you might pass.
@field
*/
@@ -913,12 +934,118 @@ SC.View = SC.Responder.extend(SC.PathModule, SC.DelegateSupport,
}.property('frame'),
/**
- Call this method before you make a change that will impact the frame of the view
- such as changing the border thickness or adding/removing a CSS style.
+ Style-width for the views rootElement
+
+ Setting this property will also notify of a view frame change.
+
+ @field
+ */
+ styleWidth: function(key, value) {
+ if (value !== undefined) {
+ this.viewFrameWillChange() ;
+ this.setStyle({ width: ((value != null) ? value+'px' : 'auto') }) ;
+ this.viewFrameDidChange() ;
+ this._styleWidth = null;
+ }
+
+ var ret = this.getStyle('width') ;
+ ret = (ret == 'auto') ? null : parseInt(ret, 0) ;
+ }.property(),
+
+ /**
+ Style-height for the views rootElement
+
+ Setting this property will also notify of a view frame change.
+
+ @field
+ */
+ styleHeight: function(key, value) {
+ if (value !== undefined) {
+ this.viewFrameWillChange() ;
+ this.setStyle({ height: ((value != null) ? value+'px' : 'auto') }) ;
+ this.viewFrameDidChange() ;
+ }
+ var ret = this.getStyle('height') ;
+ return (ret == 'auto') ? null : parseInt(ret, 0) ;
+ }.property(),
+
+ /**
+ Style-top for the views rootElement
+
+ Setting this property will also notify of a view frame change.
+
+ @field
+ */
+ styleTop: function(key, value) {
+ if (value !== undefined) {
+ this.viewFrameWillChange() ;
+ this.setStyle({ top: ((value != null) ? value+'px' : 'auto') }) ;
+ this.viewFrameDidChange() ;
+ }
+ var ret = this.getStyle('top') ;
+ return (ret == 'auto') ? null : parseInt(ret, 0) ;
+ }.property(),
+
+ /**
+ Style-bottom for the views rootElement
+
+ Setting this property will also notify of a view frame change.
+
+ @field
+ */
+ styleBottom: function(key, value) {
+ if (value !== undefined) {
+ this.viewFrameWillChange() ;
+ this.setStyle({ bottom: ((value != null) ? value+'px' : 'auto') }) ;
+ this.viewFrameDidChange() ;
+ }
+ var ret = this.getStyle('bottom') ;
+ return (ret == 'auto') ? null : parseInt(ret, 0) ;
+ }.property(),
+
+ /**
+ Style-left for the views rootElement
- Once you finish making your changes, be sure to call viewFrameDidChange() as well.
- This will deliver any relevant resizing and other notifications. It is safe to nest
- multiple calls to this method.
+ Setting this property will also notify of a view frame change.
+
+ @field
+ */
+ styleLeft: function(key, value) {
+ if (value !== undefined) {
+ this.viewFrameWillChange() ;
+ this.setStyle({ left: ((value != null) ? value+'px' : 'auto') }) ;
+ this.viewFrameDidChange() ;
+ }
+ var ret = this.getStyle('left') ;
+ return (ret == 'auto') ? null : parseInt(ret, 0) ;
+ }.property(),
+
+ /**
+ Style-right for the views rootElement
+
+ Setting this property will also notify of a view frame change.
+
+ @field
+ */
+ styleRight: function(key, value) {
+ if (value !== undefined) {
+ this.viewFrameWillChange() ;
+ this.setStyle({ right: ((value != null) ? value+'px' : 'auto') }) ;
+ this.viewFrameDidChange() ;
+ }
+ var ret = this.getStyle('right') ;
+ return (ret == 'auto') ? null : parseInt(ret, 0) ;
+ }.property(),
+
+
+ /**
+ Call this method before you make a change that will impact the frame of
+ the view such as changing the border thickness or adding/removing a CSS
+ style.
+
+ Once you finish making your changes, be sure to call viewFrameDidChange()
+ as well. This will deliver any relevant resizing and other notifications.
+ It is safe to nest multiple calls to this method.
This method is called automatically anytime you set the frame.
@@ -945,7 +1072,7 @@ SC.View = SC.Responder.extend(SC.PathModule, SC.DelegateSupport,
@returns {void}
*/
- viewFrameDidChange: function() {
+ viewFrameDidChange: function(force) {
// clear the frame caches
this.recacheFrames() ;
@@ -956,18 +1083,19 @@ SC.View = SC.Responder.extend(SC.PathModule, SC.DelegateSupport,
if (this._cachedFrames) {
var newFrames = this.getEach('innerFrame', 'clippingFrame') ;
+ // notify if clippingFrame has changed and clippingFrameDidChange is
+ // implemented.
+ var nf = newFrames[1]; var of = this._cachedFrames[1] ;
+ if (force || (nf.width != of.width) || (nf.height != of.height)) {
+ this._invalidateClippingFrame() ;
+ }
+
// notify children if the size of the innerFrame has changed.
var nf = newFrames[0]; var of = this._cachedFrames[0] ;
- if ((nf.width != of.width) || (nf.height != of.height)) {
+ if (force || (nf.width != of.width) || (nf.height != of.height)) {
this.resizeChildrenWithOldSize(this._cachedFrames.last()) ;
}
- // notify if clippingFrame has changed and clippingFrameDidChange is implemented.
- var nf = newFrames[1]; var of = this._cachedFrames[1] ;
- if ((nf.width != of.width) || (nf.height != of.height)) {
- this._invalidateClippingFrame() ;
- }
-
// clear parent scrollFrame if needed
var parent = this.parentNode ;
while (parent && parent != SC.window) {
@@ -1073,6 +1201,8 @@ SC.View = SC.Responder.extend(SC.PathModule, SC.DelegateSupport,
var f ;
if (this._clippingFrame == null) {
+ //if (this instanceof SC.SplitView) debugger ;
+
// my clipping frame is usually my frame
f = this.get('frame') ;
@@ -1142,19 +1272,19 @@ SC.View = SC.Responder.extend(SC.PathModule, SC.DelegateSupport,
},
/**
- Called whenever the parent's innerFrame size has changed. You can override this
- method to change how your view responds to this change.
+ Called whenever the parent's innerFrame size has changed. You can
+ override this method to change how your view responds to this change.
- If you do not override this method, the view will assume you are using CSS to
- control your layout and it will simply relay the change information to your
- child views. As an optmization, the view may not always call this method if it
- determines that you have not overridden it.
+ If you do not override this method, the view will assume you are using CSS
+ to control your layout and it will simply relay the change information to
+ your child views. As an optmization, the view may not always call this
+ method if it determines that you have not overridden it.
@param oldSize {Size} The old frame size of the parent view.
*/
resizeWithOldParentSize: function(oldSize) {
this.viewFrameWillChange() ;
- this.viewFrameDidChange() ;
+ this.viewFrameDidChange(YES) ;
},
/** @private
frameworks/sproutcore/views/view.js
@@ -17,6 +17,12 @@ Photos.masterController = SC.ArrayController.create(
/** @scope Photos.masterController */ {
allowsMultipleSelection: NO,
- allowsEmptySelection: NO
+ allowsEmptySelection: NO,
+
+ albumsVisible: YES,
+
+ albumsVisibleObserver: function() {
+ SC.page.workspace.layout() ; // update layout for splitview.
+ }.observes('albumsVisible')
}) ;
samples/clients/photos/controllers/master.js
@@ -16,28 +16,6 @@ body {
overflow: hidden ;
}
-.toolbar {
- border-top: 1px #aaa solid;
- position: absolute ;
- bottom: 0;
- height: 48px;
- left: 0;
- right: 0;
- background-color: #dedede;
- z-index: 2;
- line-height: 48px ;
- font-weight: bold;
- text-align: center;
-}
-
-.workspace {
- position: absolute ;
- left: 0;
- right: 0;
- top: 0;
- bottom: 48px;
-}
-
.workspace .sidebar {
position: absolute;
left: 0;
@@ -46,14 +24,20 @@ body {
bottom: 0;
}
+.workspace .sc-split-divider-view {
+ position: absolute;
+ left: 200px;
+ top: 0;
+ bottom: 0;
+}
+
.workspace .grid_view {
position: absolute;
- left: 200px;
+ left: 205px;
right: 0;
top: 0;
bottom: 0;
border: none ;
- border-left: 1px #aaa solid;
}
/* @end */
samples/clients/photos/english.lproj/body.css
@@ -1,11 +1,7 @@
<% content_for('body') do %>
-<div class="toolbar">
- <%= label_view :photo_count, :bind => { :value => 'Photos.detailController.countLabel' } %>
-
-<div class="shaddow"></div>
-</div>
-<% view :workspace do %>
- <% view :sidebar, :outlet => true do %>
+
+<% split_view :workspace, :class => 'sc-app-workspace', :direction => :horizontal do %>
+ <% view :sidebar, :outlet => true, :max_thickness => 400, :min_thickness => 100, :bind => { :is_collapsed => 'SC.Binding.Not("Photos.masterController.albumsVisible")' } do %>
<% scroll_view :source_list, :outlet => true do %>
<%= source_list_view :outlet => true,
:group => :albumType,
@@ -19,6 +15,8 @@
<% end %>
<% end %>
+ <%= split_divider_view :outlet => true, :width => 5 %>
+
<% scroll_view :grid_view, :outlet => true do %>
<%= grid_view :outlet => true,
:example_view => 'SC.ImageCellView',
@@ -33,4 +31,18 @@
<% end %>
<% end %>
+<% view :footer, :class => 'sc-footer sc-square-theme' do %>
+ <div class="left">
+ <%# button_view :outlet => true, :label => 'Add' %>
+ <%= button_view :outlet => true, :label => 'Albums', :bind => { :value => 'Photos.masterController.albumsVisible' }, :behavior => :toggle %>
+ </div>
+ <div class="center">
+ <%= label_view :outlet => true, :bind => { :value => 'Photos.detailController.countLabel' } %>
+ </div>
+ <div class="right">
+ <%= text_field_view :outlet => true, :hint => "Search", :enabled => false %>
+ </div>
+<% end %>
+
+
<% end %>
samples/clients/photos/english.lproj/body.rhtml
@@ -14,21 +14,36 @@
<%= button_view :outlet => true, :label => 'Cancel', :enabled => false, :width => 80 %>
<%= button_view :outlet => true, :selected => true, :label => 'OK', :enabled => false, :width => 80 %>
</div>
+ <br />
+
+ <div class="buttons sc-square-theme">
+ <%= button_view :outlet => true, :label => 'Show Preferences' %>
+ <%= button_view :outlet => true, :label => 'Default', :default => true %>
+ <%= button_view :outlet => true, :label => 'Cancel', :enabled => false, :width => 80 %>
+ <%= button_view :outlet => true, :selected => true, :label => 'OK', :enabled => false, :width => 80 %>
+ </div>
+
</div>
<div class="demo_box">
-<h1>Disclosure Triangle</h1>
+<h1>Segments</h1>
<p><code>
- <%= disclosure_view :label => 'Label Name', :enabled => true|false, :value => true|false %>
+ <%= segmented_view :segments => [:one, :two, :three], :enabled => true|false %>
</code></p>
+<br />
+<div class="buttons">
+ <%= segmented_view :outlet => true, :segments => [:one, :two, :three] %><br />
+ <%= segmented_view :disabled_segment, :outlet => true, :segments => [:one, :two, :three], :enabled => false %>
+
+</div>
+
+<br />
+<div class="buttons sc-square-theme">
+ <%= segmented_view :outlet => true, :segments => [:one, :two, :three] %><br />
+ <%= segmented_view :disabled_square_segment, :outlet => true, :segments => [:one, :two, :three], :enabled => false %>
+
+</div>
- <div class="buttons">
- <%= disclosure_view :outlet => true, :value => true, :label => 'Open Disclosure' %>
- <%= disclosure_view :outlet => true, :label => 'Closed Disclosure', :value => false %>
- <%= disclosure_view :outlet => true, :label => 'Disabled Open Disclosure', :value => false, :enabled => false %>
- <%= disclosure_view :outlet => true, :label => 'Disabled Open Disclosure', :value => true, :enabled => false %>
- No Label: <%= disclosure_view :outlet => true, :value => true %>
- </div>
</div>
<div class="demo_box">
@@ -69,6 +84,20 @@
</div>
+<div class="demo_box">
+<h1>Disclosure Triangle</h1>
+<p><code>
+ <%= disclosure_view :label => 'Label Name', :enabled => true|false, :value => true|false %>
+</code></p>
+
+ <div class="buttons">
+ <%= disclosure_view :outlet => true, :value => true, :label => 'Open Disclosure' %>
+ <%= disclosure_view :outlet => true, :label => 'Closed Disclosure', :value => false %>
+ <%= disclosure_view :outlet => true, :label => 'Disabled Open Disclosure', :value => false, :enabled => false %>
+ <%= disclosure_view :outlet => true, :label => 'Disabled Open Disclosure', :value => true, :enabled => false %>
+ No Label: <%= disclosure_view :outlet => true, :value => true %>
+ </div>
+</div>
<div class="demo_box">
<h1>Square Buttons</h1>
@@ -94,18 +123,7 @@
</div>
</div>
-<div class="demo_box">
-<h1>Segments</h1>
-<p><code>
- <%= segmented_view :segments => [:one, :two, :three], :enabled => true|false %>
-</code></p>
-<div class="buttons">
- <%= segmented_view :outlet => true, :segments => [:one, :two, :three] %><br />
- <%= segmented_view :disabled_segment, :outlet => true, :segments => [:one, :two, :three], :enabled => false %>
-
-</div>
-</div>
<div class="demo_box">
<h1>Toggle Buttons</h1>
samples/clients/sample_controls/english.lproj/buttons.rhtml
@@ -40,8 +40,10 @@ function main() {
SC.Benchmark.end('SampleControls.sourceListController.content') ;
SC.Benchmark.start('SC.page.controlTabs.nowShowing = collections2') ;
- SC.page.get('controlTabs').set('nowShowing', 'collections2') ;
+ SC.page.get('controlTabs').set('nowShowing', 'buttons') ;
SC.Benchmark.end('SC.page.controlTabs.nowShowing = collections2') ;
+ SC.page.get('footer') ;
+
} ;
samples/clients/sample_controls/main.js
assets/buttons-sprite.psd
frameworks/sproutcore/english.lproj/images/buttons-sprite.png
59be504955b7066485d4f710b82b854237423a32
cjolley
cjolley@394f415c-e224-0410-a11c-cb241aa5d150
http://github.com/sproutit/sproutcore-buildtools/commit/92251a12fd14ce670cec1dad1ca10d08d871c6be
92251a12fd14ce670cec1dad1ca10d08d871c6be
2008-04-19T00:33:32-07:00
2008-04-19T00:33:32-07:00
* Renamed buttons-sprite.png to sc-theme-sprite.png. Added
sc-theme-ysprite.png. One is now used to hold all repeat-x and non-repeating
sprites while the other is used for repeat-y sprites only.
* SC.SplitView & SC.SplitDividerView provide support for draggable and
collapsable split views.
git-svn-id: https://sproutcore.googlecode.com/svn/trunk@55 394f415c-e224-0410-a11c-cb241aa5d150
3b53b1b293743ed06b965fbc6c562e8352be61fc
cjolley
cjolley@394f415c-e224-0410-a11c-cb241aa5d150