Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

some doc cleanup, various rendering improvements

  • Loading branch information...
commit 2dcf89b9781c1fef1ac9b24cbff3c22bc0c2c409 1 parent e09bf51
@joestelmach joestelmach authored
View
14 Rakefile
@@ -104,10 +104,6 @@ task :doc => [:build] do
end
end
- if js.match(/Backbone\.UI\.HasGlyph/) and !filename.match(/has_glyph\.js$/) and filename.index('model_with_collection')
- options.merge!(collect_option_comments('src/js/has_glyph.js'))
- end
-
options
end
@@ -154,7 +150,6 @@ task :doc => [:build] do
src.gsub!('<!-- MODEL_BOUND_WITH_COLLECTION -->', build_components('doc/src/widgets/model_with_collection'))
src.gsub!('<!-- COLLECTION_BOUND -->', build_components('doc/src/widgets/collection'))
src.gsub!('<!-- NON_BOUND -->', build_components('doc/src/widgets/non_bound'))
- src.gsub!('<!-- GLYPHS -->', build_components('doc/src/widgets/glyphs'))
src.gsub!('<!-- SOURCE_SIZE -->', "#{File.size('dist/backbone-ui.tar')/1000}kb");
src.gsub!('<!-- COMPRESSED_SIZE -->', "#{File.size('dist/backbone-ui-min.tar.gz')/1000}kb");
@@ -175,12 +170,5 @@ end
desc "pushing docs to gh-pages"
task :push_doc => [:doc] do
puts "pushing docs to gh-pages"
-
- `cp -r doc/dist /tmp/docs`
- `git checkout gh-pages`
- `git pull origin gh-pages`
- `rm -rf *`
- `cp -r /tmp/docs/* .`
- `git add . && git commit -a -m "updating docs" && git push origin gh-pages`
- `git checkout master`
+ `cp -r doc/dist /tmp/docs && git checkout gh-pages && git pull origin gh-pages && rm -rf * && cp -r /tmp/docs/* . && git add . && git commit -m "updating docs" && git push origin gh-pages && git checkout master`
end
View
24 doc/src/index.html
@@ -15,7 +15,6 @@
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="lib/prettify.css">
- <link href='http://fonts.googleapis.com/css?family=Brawler' rel='stylesheet' type='text/css'>
</head>
<body>
@@ -42,7 +41,7 @@
<h1>Philosophy</h1>
<p>
- This framework is written to embrace the DOM rather than fight it. You won't see any messy HTML templates or <code>innerHTML</code> references hanging around. What you will see is heavy use of the <a href="http://joestelmach.github.com/laconic/">laconic</a> library to help ease the pain of DOM manipluation so we can happily stay in the context of writing JavaScript.
+ This framework is written to embrace the DOM rather than fight it. You won't see any messy HTML templates or <code>innerHTML</code> references hanging around. What you will see is heavy use of the <a href="http://joestelmach.github.com/laconic/">Laconic</a> library to help ease the pain of DOM manipluation so we can happily stay in the context of writing JavaScript.
</p>
<p>
Not all people will agree with this philosophy, and not all projects will benefit from embracing it. This framework facilitates the creation of highly dynamic front-end clients that request only data from the back-end, not markup. If you have a more traditional application in which your markup is generated before your JavaScript executes, you may still find this framework useful, but keep in mind that it was not designed for such a case.
@@ -56,8 +55,7 @@
<h1>Dependencies</h1>
<p>Backbone UI depends on <a href='http://documentcloud.github.com/backbone/'>Backbone</a>,
- <a href='http://documentcloud.github.com/underscore/'>Underscore</a>,
- <a href='http://jquery.com/'>jQuery</a>, and <a href='http://joestelmach.github.com/laconic/'>laconic</a>.
+ <a href='http://jquery.com/'>jQuery</a>, and <a href='http://joestelmach.github.com/laconic/'>Laconic</a>.
If you'd like to use the calendar or date picker components, than you'll
also need a copy of <a href='http://momentjs.com/'>moment.js</a>.
<p>
@@ -150,24 +148,6 @@
</section>
<section>
- <h1>Glyphs</h1>
- <p>
- Many components may be rendered with an optional glyph on the left or right side. A glyph is a 16 x 16 pixel image stored in the <code>Backbone.UI.GLYPH_DIR</code> (which defaults to /images/glyphs). Here's some examples:
- </p>
- <p>
- <img src="images/glyphs/delete.png" alt="glyph"/>
- <img src="images/glyphs/lightbulb.png" alt="glyph"/>
- <img src="images/glyphs/pencil.png" alt="glyph"/>
- <img src="images/glyphs/disk.png" alt="glyph"/>
- </p>
-
- <p>And here's how you can put them to use:</p>
- <div class="components">
- <!-- GLYPHS -->
- </div>
- </section>
-
- <section>
<h1>Browser Support</h1>
<p>
Backbone UI has been tested on most modern browsers, as well as IE8+. If you're using the HTML 5 Doctype, you may need to use the following <a href="http://msdn.microsoft.com/en-us/library/ie/cc288325(v=vs.85).aspx#SetMode">meta tag</a> to force IE into standards mode:
View
4 doc/src/script.js
@@ -31,8 +31,6 @@ window.addExample = function(container, func) {
};
$(window).load(function() {
- Backbone.UI.GLYPH_DIR = 'images/glyphs';
-
// setup sample data
setTimeout(prettyPrint, 0);
@@ -103,7 +101,7 @@ $(window).load(function() {
// add a link to remove this task from the list
this.el.appendChild(new Backbone.UI.Link({
- glyph : 'delete',
+ content : 'delete',
onClick : _(tasks.remove).bind(tasks, this.model)
}).render().el);
View
38 doc/src/widgets/glyphs/index.html
@@ -1,38 +0,0 @@
-<section id="glyphs" class="example">
- <script type="text/javascript">
- $(window).load(function() {
-
- window.addExample('#glyphs', function() {
- var button = new Backbone.UI.Button({
- content : 'Edit',
- glyphRight : 'pencil'
- }).render();
- return button;
- });
-
- window.addExample('#glyphs', function() {
- var link = new Backbone.UI.Link({
- content : 'Idea',
- glyph : 'lightbulb'
- }).render();
- return link;
- });
-
- window.addExample('#glyphs', function() {
- var pulldown = new Backbone.UI.Pulldown({
- alternatives : [{
- name : 'save',
- glyph : 'disk'
- }, {
- name : 'trash',
- glyph : 'delete'
- }],
- altLabelContent : 'name',
- altGlyph : 'glyph'
- }).render();
-
- return pulldown;
- });
- });
- </script>
-</section>
View
2  doc/src/widgets/non_bound/tab_set.html
@@ -5,7 +5,7 @@
$(window).load(function() {
window.addExample('#tab_set', function() {
var set = new Backbone.UI.TabSet({
- tabs : [
+ alternatives : [
{label : 'Foo', content : "foo's content"},
{label : 'Bar', content : "bar's content"} ,
{label : 'Baz', content : "baz's content"}
View
4 src/css/menu.css
@@ -43,6 +43,10 @@
vertical-align:middle;
}
+.menu li a span {
+ padding:0 2px;
+}
+
.menu li a:hover span,
.menu li a:link span,
.menu li a:active span,
View
1  src/css/radio_group.css
@@ -46,6 +46,7 @@
.radio_group .label {
line-height:22px;
color:#222;
+ cursor:pointer;
}
.radio_group .mark,
View
6 src/css/table_view.css
@@ -46,6 +46,12 @@
cursor:pointer;
}
+.table_view .glyph {
+ float:left;
+ margin-top:6px;
+ font-size:10px;
+}
+
.table_view th.first .glyph {
padding-left:5px;
}
View
1  src/js/menu.js
@@ -9,7 +9,6 @@
initialize : function() {
this.mixin([Backbone.UI.HasModel, Backbone.UI.HasAlternativeProperty]);
-
_(this).bindAll('render');
View
4 src/js/pulldown.js
@@ -113,9 +113,9 @@
$(this._menu.el).alignTo(anchor, position, 0, 1);
$(this._menu.el).show();
- var menuWidth = this._menu.width();
+ this._menuWidth = this._menuWidth || this._menu.width();
var buttonWidth = $(this.button.el).innerWidth();
- $(this._menu.el).css({width : Math.max(menuWidth, buttonWidth)});
+ $(this._menu.el).css({width : Math.max(this._menuWidth, buttonWidth)});
if(this.options.onMenuShow) this.options.onMenuShow(e);
this._menu.scrollToSelectedItem();
},
View
2  src/js/scroller.js
@@ -63,8 +63,8 @@
overflow : 'scroll',
'-webkit-overflow-scrolling' : 'touch'
});
- $(this.el).addClass('disabled');
}
+ $(this.el).addClass('disabled');
return this;
},
View
6 src/js/tab_set.js
@@ -1,10 +1,12 @@
-(function(){
+(function() {
Backbone.UI.TabSet = Backbone.View.extend({
options : {
// Tabs to initially add to this tab set. Each entry may contain
// a <code>label</code>, <code>content</code>, and <code>onActivate</code>
// option.
- tabs : [],
+ alternatives : [],
+
+ // The index of the tab to initially select
selectedTab : 0
},
View
5 src/js/table_view.js
@@ -1,7 +1,7 @@
(function(){
window.Backbone.UI.TableView = Backbone.UI.CollectionView.extend({
options : {
- // Each column should contain a <code>label</code> property to
+ // Each column should contain a <code>title</code> property to
// describe the column's heading, a <code>content</code> property to
// declare which property the cell is bound to, an optional two-argument
// <code>comparator</code> with which to sort each column if the
@@ -50,9 +50,6 @@
var sortFirstColumn = false;
var firstHeading = null;
_(this.options.columns).each(_(function(column, index, list) {
- if (this.options.sortable && !this._sortState.content) {
- sortFirstColumn = true;
- }
var label = _(column.title).isFunction() ? column.title() : column.title;
var width = !!column.width ? parseInt(column.width, 10) + 5 : null;
var style = width ? 'width:' + width + 'px; max-width:' + width + 'px; ' : '';
View
161 test/theme/perka.css
@@ -0,0 +1,161 @@
+.skin_perka a.button.has_border {
+ text-shadow: 0 1px 0 white, 0 -0.5px 0 black;
+ background:url(/common/images/ui/bg_button.png) 0 0 repeat-x;
+ border-color:#757575;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+}
+
+.skin_perka a.link {
+ color:#222;
+}
+
+.skin_perka a.button:hover {
+ background-position:0 -50px;
+}
+
+.skin_perka a.button:active {
+ background-position:0 -100px;
+}
+
+.skin_perka a.checkbox {
+ background:url(/common/images/ui/checkbox.png) transparent 0 2px no-repeat;
+ border:none;
+ height:28px;
+}
+
+.skin_perka a.checkbox .checkmark,
+.skin_perka a.checkbox:hover .checkmark {
+ border:none;
+ background-color:transparent;
+ -moz-border-radius: 6px;
+ -webkit-border-radius: 6px;
+ border-radius: 6px;
+}
+
+.skin_perka a.checkbox .checkmark_fill {
+ background:url(/common/images/ui/checkbox.png) transparent 0 -112px no-repeat;
+ top:-3px;
+ left:0;
+ width:28px;
+ height:28px;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+}
+
+.skin_perka a.checkbox .label {
+ line-height:32px;
+ padding-left:20px;
+}
+
+.skin_perka a.checkbox:hover {
+ background-position:0 -26px;
+}
+
+.skin_perka a.checkbox:active {
+ background-position:0 -54px;
+}
+
+.skin_perka .radio_group .choice {
+ background:url(/common/images/ui/radio.png) transparent 0 2px no-repeat;
+ height:28px;
+}
+
+.skin_perka .radio_group .choice.selected {
+ background-position:0 -82px;
+}
+
+.skin_perka .radio_group .choice:hover {
+ background-position:0 -26px;
+}
+
+.skin_perka .radio_group .choice.selected:hover {
+ background-position:0 -82px;
+}
+
+.skin_perka .radio_group .choice:active {
+ background-position:0 -54px;
+}
+
+.skin_perka .radio_group .mark {
+ background-color:transparent;
+ border:none;
+ visibility:hidden;
+}
+
+.skin_perka .radio_group .label {
+ margin-left:10px;
+ line-height:34px;
+}
+
+.skin_perka .pulldown .label {
+ background:url(/common/images/ui/pulldown_arrow.png) transparent top right no-repeat;
+ position:absolute;
+ left:0;
+ right:0;
+ padding-right:30px;
+}
+
+.skin_perka ::-webkit-input-placeholder {
+ font-style:italic;
+}
+
+.skin_perka :-moz-placeholder {
+ font-style:italic;
+}
+
+.skin_perka .calendar {
+ -moz-box-shadow: 0 0 6px 0 #444;
+ -webkit-box-shadow: 0 0 6px 0 #444;
+ box-shadow: 0 0 6px 0 #444;
+}
+
+.skin_perka .text_field,
+.skin_perka .text_area,
+.menu .menu_scroller,
+.menu li a {
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+}
+
+.skin_perka .scroller .tray {
+ border-radius: 8px;
+ -webkit-border-radius: 8px;
+ -moz-border-radius: 8px;
+}
+
+.skin_perka .scroller .knob_top {
+ border-top-left-radius: 8px;
+ -webkit-border-top-left-radius: 8px;
+ -moz-border-radius-topleft: 8px;
+ border-top-right-radius: 8px;
+ -webkit-border-top-right-radius: 8px;
+ -moz-border-radius-topright: 8px;
+}
+
+.skin_perka .knob_bottom {
+ border-bottom-left-radius: 8px;
+ -webkit-border-bottom-left-radius: 8px;
+ -moz-border-radius-bottomleft: 8px;
+ border-bottom-right-radius: 8px;
+ -webkit-border-bottom-right-radius: 8px;
+ -moz-border-radius-bottomright: 8px;
+}
+
+.skin_perka .tab_set .tab {
+ border-top-left-radius: 4px;
+ -webkit-border-top-left-radius: 4px;
+ -moz-border-radius-topleft: 4px;
+ border-top-right-radius: 4px;
+ -webkit-border-top-right-radius: 4px;
+ -moz-border-radius-topright: 4px;
+}
+
+.skin_perka .tab_set .content_container {
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+}
Please sign in to comment.
Something went wrong with that request. Please try again.