From 3563659492b7092fe01ee8c97220fac215eda2fa Mon Sep 17 00:00:00 2001 From: Christoph Burgdorf Date: Tue, 28 Feb 2012 22:25:31 +0100 Subject: [PATCH 01/22] copied over html structure from the jquery version and started hacking to make it work with the existing controller --- architecture-examples/angularjs/css/app.css | 493 ++++++------------ .../angularjs/css/overwrite.css | 4 + .../angularjs/index_new.html | 52 ++ 3 files changed, 216 insertions(+), 333 deletions(-) create mode 100644 architecture-examples/angularjs/css/overwrite.css create mode 100644 architecture-examples/angularjs/index_new.html diff --git a/architecture-examples/angularjs/css/app.css b/architecture-examples/angularjs/css/app.css index 6800c5ee1e..d96102af01 100644 --- a/architecture-examples/angularjs/css/app.css +++ b/architecture-examples/angularjs/css/app.css @@ -1,381 +1,208 @@ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, font, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td { - margin: 0; - padding: 0; - border: 0; - outline: 0; - font-weight: inherit; - font-style: inherit; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; +html, +body { + margin: 0; + padding: 0; } + body { - line-height: 1; - color: black; - background: white; + font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; + line-height: 1.4em; + background: #eeeeee; + color: #333333; + width: 520px; + margin: 0 auto; + -webkit-font-smoothing: antialiased; } -ol, ul { - list-style: none; + +#todoapp { + background: #fff; + padding: 20px; + margin-bottom: 40px; + -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; + -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; + -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; + -o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; + box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; + -webkit-border-radius: 0 0 5px 5px; + -moz-border-radius: 0 0 5px 5px; + -ms-border-radius: 0 0 5px 5px; + -o-border-radius: 0 0 5px 5px; + border-radius: 0 0 5px 5px; } -a img { - border: none; + +#todoapp h1 { + font-size: 36px; + font-weight: bold; + text-align: center; + padding: 0 0 10px 0; } -html { - background: #eeeeee; +#todoapp input[type="text"] { + width: 466px; + font-size: 24px; + font-family: inherit; + line-height: 1.4em; + border: 0; + outline: none; + padding: 6px; + border: 1px solid #999999; + -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; + -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; + -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; + -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; + box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; } - body { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 14px; - line-height: 1.4em; - background: #eeeeee; - color: #333333; - } -.clickable{ - cursor:pointer; +#todoapp input::-webkit-input-placeholder { + font-style: italic; } -#todoapp { - background: none repeat scroll 0 0 white; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); - background: none repeat scroll 0 0 white; - margin: 0 auto 40px; - padding: 20px; - width: 480px; +#main { + display: none; } -#todoapp { - width: 480px; - margin: 0 auto 40px; - background: white; - padding: 20px; - -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0; - -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0; - -o-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0; - box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0; +#todo-list { + margin: 10px 0; + padding: 0; + list-style: none; } - #todoapp h1 { - font-size: 36px; - font-weight: bold; - text-align: center; - padding: 20px 0 30px 0; - line-height: 1; - } -#create-todo { - position: relative; +#todo-list li { + padding: 18px 20px 18px 0; + position: relative; + font-size: 24px; + border-bottom: 1px solid #cccccc; } - #todo-form input { - width: 466px; - font-size: 24px; - font-family: inherit; - line-height: 1.4em; - border: 0; - outline: none; - padding: 6px; - border: 1px solid #999999; - -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; - -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; - -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; - box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; - } - #create-todo input::-webkit-input-placeholder { - font-style: italic; - } - #create-todo span { - position: absolute; - z-index: 999; - width: 170px; - left: 50%; - margin-left: -85px; - } -#todo-list { - margin-top: 10px; +#todo-list li:last-child { + border-bottom: none; } - #todo-list li { - padding: 12px 20px 11px 0; - position: relative; - font-size: 24px; - line-height: 1.1em; - border-bottom: 1px solid #cccccc; - } - #todo-list li:after { - content: "\0020"; - display: block; - height: 0; - clear: both; - overflow: hidden; - visibility: hidden; - } - #todo-list li.editing-true { - padding: 0; - border-bottom: 0; - } - #todo-list .editing-true .display, - #todo-list .edit { - display: none; - } - #todo-list .editing-true .edit { - display: block; - } - #todo-list .editing-true input { - width: 444px; - font-size: 24px; - font-family: inherit; - margin: 0; - line-height: 1.6em; - border: 0; - outline: none; - padding: 10px 7px 0px 27px; - border: 1px solid #999999; - -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; - -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; - -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; - box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; - } - #todo-list .check { - position: relative; - top: 9px; - margin: 0 10px 0 7px; - float: left; - } - #todo-list .done-true .todo-content { - text-decoration: line-through; - color: #777777; - } - #todo-list .todo-destroy { - position: absolute; - right: 5px; - top: 14px; - display: none; - cursor: pointer; - width: 20px; - height: 20px; - background: url(../img/destroy.png) no-repeat 0 0; - } - #todo-list li:hover .todo-destroy { - display: block; - } - #todo-list .todo-destroy:hover { - background-position: 0 -20px; - } -#todo-stats { - *zoom: 1; - margin-top: 10px; - color: #777777; - - background: none repeat scroll 0 0 #F4FCE8; - border-radius: 0 0 5px 5px; - border-top: 1px solid #EDEDED; - color: #555555; - display: block; - line-height: 36px; - margin: 20px -20px -20px; - overflow: hidden; - padding: 0 20px; +#todo-list li.done label { + color: #777777; + text-decoration: line-through; } +#todo-list li .destroy { + display: none; + position: absolute; + top: 20px; + right: 10px; + cursor: pointer; + width: 20px; + height: 20px; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAACdQTFRFzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMAAAA////zMzMhnu0WAAAAAt0Uk5T5u3pqtV3jFQEKAC0bVelAAAAfUlEQVQI12NYtWpFsc8R865VqxhWrZpyBgg8QcylZ8AgCsjMgTCPrWJYfgYKqhjWwJgaDDVnzpw+c2bPmTPHGWzOnNm95/TuM2cOM/AARXfvBooeZAAp270bRCIz4QoOIGtDMqwJZoUEQzvCYrhzuhhWtUKYEahOX7UK6iEA3A6NUGwCTZIAAAAASUVORK5CYII=') no-repeat center center; +} - - #todo-stats:after { - content: "\0020"; - display: block; - height: 0; - clear: both; - overflow: hidden; - visibility: hidden; - } - #todo-stats .todo-count { - float: left; - } - #todo-stats .todo-count .number { - font-weight: bold; - color: #333333; - } - #todo-stats .todo-clear { - float: right; - } - - #todoapp #todo-stats { - background: none repeat scroll 0 0 #F4FCE8; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - border-top: 1px solid #EDEDED; - color: #555555; - line-height: 36px; - margin-top: 10px; - padding: 0 20px; +#todo-list li:hover .destroy { + display: block; } - #todoapp #todo-stats .todo-clear a { +#todo-list li.editing { + border-bottom: none; + margin-top: -1px; + padding: 0; +} + +#todo-list li.editing:last-child { + margin-bottom: -1px; +} + +#todo-list li.editing .edit { display: block; + width: 444px; + padding: 13px 15px 14px 20px; + margin: 0; +} + +#todo-list li.editing .view { + display: none; +} + +#todo-list li .view label { + word-break: break-word; +} + +#todo-list li .edit { + display: none; +} + +#todoapp footer { + display: none; + margin: 0 -20px -20px -20px; + overflow: hidden; + color: #555555; + background: #f4fce8; + border-top: 1px solid #ededed; + padding: 0 20px; + line-height: 37px; + -webkit-border-radius: 0 0 5px 5px; + -moz-border-radius: 0 0 5px 5px; + -ms-border-radius: 0 0 5px 5px; + -o-border-radius: 0 0 5px 5px; + border-radius: 0 0 5px 5px; +} + +#clear-completed { + display: none; + float: right; line-height: 20px; text-decoration: none; - -moz-border-radius: 12px; - -webkit-border-radius: 12px; - -o-border-radius: 12px; - -ms-border-radius: 12px; - -khtml-border-radius: 12px; - border-radius: 12px; background: rgba(0, 0, 0, 0.1); color: #555555; font-size: 11px; margin-top: 8px; + margin-bottom: 8px; padding: 0 10px 1px; - -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; + cursor: pointer; + -webkit-border-radius: 12px; + -moz-border-radius: 12px; + -ms-border-radius: 12px; + -o-border-radius: 12px; + border-radius: 12px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; + -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; + -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; -o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; } -/* line 136 */ -#todoapp #todo-stats .todo-clear a:hover, #todoapp #todo-stats .todo-clear a:focus { + +#clear-completed:hover { background: rgba(0, 0, 0, 0.15); - -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0; + -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0; + -ms-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0; -o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0; box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0; } - #todo-stats .todo-clear a { - color: #777777; - font-size: 12px; - } - #todo-stats .todo-clear a:visited { - color: #777777; - } - #todo-stats .todo-clear a:hover, #todo-stats .todo-clear a:focus { - color: #336699; - } - -#instructions { - width: 520px; - margin: 10px auto; - color: #777777; - text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; - text-align: center; +#clear-completed:active { + position: relative; + top: 1px; } - #instructions a { - color: #336699; - } -#credits { - width: 520px; - margin: 30px auto; - color: #999; - text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; - text-align: center; +#todo-count span { + font-weight: bold; } - #credits a { - color: #888; - } - -/* - * Fran�ois 'cahnory' Germain - */ -.ui-tooltip, .ui-tooltip-top, .ui-tooltip-right, .ui-tooltip-bottom, .ui-tooltip-left { - position:absolute; - color:#ffffff; - cursor:normal; - display:-moz-inline-stack; - display:inline-block; - font-size:12px; - font-family:arial; - padding:.5em 1em; - position:relative; - text-align:center; - text-shadow:0 -1px 1px #111111; - -webkit-border-top-left-radius:4px ; - -webkit-border-top-right-radius:4px ; - -webkit-border-bottom-right-radius:4px ; - -webkit-border-bottom-left-radius:4px ; - -khtml-border-top-left-radius:4px ; - -khtml-border-top-right-radius:4px ; - -khtml-border-bottom-right-radius:4px ; - -khtml-border-bottom-left-radius:4px ; - -moz-border-radius-topleft:4px ; - -moz-border-radius-topright:4px ; - -moz-border-radius-bottomright:4px ; - -moz-border-radius-bottomleft:4px ; - border-top-left-radius:4px ; - border-top-right-radius:4px ; - border-bottom-right-radius:4px ; - border-bottom-left-radius:4px ; - -o-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444; - -moz-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444; - -khtml-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444; - -webkit-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444; - box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444; - background-color:#3b3b3b; - background-image:-moz-linear-gradient(top,#555555,#222222); - background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#555555),color-stop(1,#222222)); - filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222); - -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222); -} -.ui-tooltip:after, .ui-tooltip-top:after, .ui-tooltip-right:after, .ui-tooltip-bottom:after, .ui-tooltip-left:after { - content:"\25B8"; - display:block; - font-size:2em; - height:0; - line-height:0; - position:absolute; -} -.ui-tooltip:after, .ui-tooltip-bottom:after { - color:#2a2a2a; - bottom:0; - left:1px; - text-align:center; - text-shadow:1px 0 2px #000000; - -o-transform:rotate(90deg); - -moz-transform:rotate(90deg); - -khtml-transform:rotate(90deg); - -webkit-transform:rotate(90deg); - width:100%; -} -.ui-tooltip-top:after { - bottom:auto; - color:#4f4f4f; - left:-2px; - top:0; - text-align:center; - text-shadow:none; - -o-transform:rotate(-90deg); - -moz-transform:rotate(-90deg); - -khtml-transform:rotate(-90deg); - -webkit-transform:rotate(-90deg); - width:100%; +#instructions { + margin: 10px auto; + color: #777777; + text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; + text-align: center; } -.ui-tooltip-right:after { - color:#222222; - right:-0.375em; - top:50%; - margin-top:-.05em; - text-shadow:0 1px 2px #000000; - -o-transform:rotate(0); - -moz-transform:rotate(0); - -khtml-transform:rotate(0); - -webkit-transform:rotate(0); + +#instructions a { + color: #336699; } -.ui-tooltip-left:after { - color:#222222; - left:-0.375em; - top:50%; - margin-top:.1em; - text-shadow:0 -1px 2px #000000; - -o-transform:rotate(180deg); - -moz-transform:rotate(180deg); - -khtml-transform:rotate(180deg); - -webkit-transform:rotate(180deg); + +#credits { + margin: 30px auto; + color: #999; + text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; + text-align: center; } + +#credits a { + color: #888; +} \ No newline at end of file diff --git a/architecture-examples/angularjs/css/overwrite.css b/architecture-examples/angularjs/css/overwrite.css new file mode 100644 index 0000000000..a5bc27e2e1 --- /dev/null +++ b/architecture-examples/angularjs/css/overwrite.css @@ -0,0 +1,4 @@ +/*overwrite this as its getting in the angular way */ +#main { + display: block; +} \ No newline at end of file diff --git a/architecture-examples/angularjs/index_new.html b/architecture-examples/angularjs/index_new.html new file mode 100644 index 0000000000..b01754ec43 --- /dev/null +++ b/architecture-examples/angularjs/index_new.html @@ -0,0 +1,52 @@ + + + + + + + AngularJS - TodoMVC + + + + +
+
+

Todos

+
+ +
+
+ +
+ + +
    +
  • +
    + + + +
    + +
    • +
+
+ +
+
+ Double-click to edit a todo. +
+
+ Created by Christoph Burgdorf. +
+ + + + + + + + From 7496c95e244ec84f87a1fe5e883b85ad14a09b4a Mon Sep 17 00:00:00 2001 From: Christoph Burgdorf Date: Wed, 29 Feb 2012 08:49:04 +0100 Subject: [PATCH 02/22] added todo counter --- architecture-examples/angularjs/css/overwrite.css | 9 +++++++++ architecture-examples/angularjs/index_new.html | 4 ++-- architecture-examples/angularjs/js/controllers.js | 10 +++++++++- 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/architecture-examples/angularjs/css/overwrite.css b/architecture-examples/angularjs/css/overwrite.css index a5bc27e2e1..8d3d1e258d 100644 --- a/architecture-examples/angularjs/css/overwrite.css +++ b/architecture-examples/angularjs/css/overwrite.css @@ -1,4 +1,13 @@ /*overwrite this as its getting in the angular way */ #main { display: block; +} + +#todoapp footer{ + display: block; +} + +/*this doesn't seemed to be used in the jquery example at all. Its getting in the way */ +#todo-count span { + font-weight: inherit; } \ No newline at end of file diff --git a/architecture-examples/angularjs/index_new.html b/architecture-examples/angularjs/index_new.html index b01754ec43..554e05876e 100644 --- a/architecture-examples/angularjs/index_new.html +++ b/architecture-examples/angularjs/index_new.html @@ -31,9 +31,9 @@

Todos

-