From 3b0dd3a188a551fc3bf6806c032cf2977ae05f01 Mon Sep 17 00:00:00 2001 From: Rokt33r Date: Tue, 9 Jun 2015 16:16:09 +0900 Subject: [PATCH] update ui --- .../states/SnippetsDetailController.js | 2 + src/directives/btn-edit-snippet.js | 2 +- src/directives/ui-ace.js | 4 + src/styles/_shared.styl | 25 +++++ src/styles/_vars.styl | 21 +++- src/styles/directives/ui-select.styl | 5 +- src/styles/mixins/btn-color.styl | 35 ++++++ src/styles/states/auth.styl | 7 ++ src/styles/states/snippets.styl | 13 ++- src/tpls/directives/side-nav.tpl.html | 18 ++-- src/tpls/modals/edit-snippet-modal.tpl.html | 4 +- src/tpls/modals/new-snippet-modal.tpl.html | 4 +- src/tpls/states/auth.register.tpl.html | 100 +++++++++--------- src/tpls/states/auth.signin.tpl.html | 32 +++--- src/tpls/states/auth.tpl.html | 22 ++-- src/tpls/states/snippets.detail.tpl.html | 1 + src/tpls/states/snippets.list.tpl.html | 2 +- 17 files changed, 200 insertions(+), 97 deletions(-) create mode 100644 src/styles/mixins/btn-color.styl create mode 100644 src/styles/states/auth.styl diff --git a/src/controllers/states/SnippetsDetailController.js b/src/controllers/states/SnippetsDetailController.js index cb804b34..e0ab89e4 100644 --- a/src/controllers/states/SnippetsDetailController.js +++ b/src/controllers/states/SnippetsDetailController.js @@ -15,6 +15,8 @@ angular.module('codexen') vm.isLoaded = true }) + // TODO: When deletion occurs, switch the next snippet + // TODO: Add deletion confirmation modal vm.delete = function () { Snippet.delete(vm.snippet.id) .success(function () { diff --git a/src/directives/btn-edit-snippet.js b/src/directives/btn-edit-snippet.js index d951a5a6..8834f6aa 100644 --- a/src/directives/btn-edit-snippet.js +++ b/src/directives/btn-edit-snippet.js @@ -7,7 +7,7 @@ angular.module('codexen') }, link: function (scope, el) { el.on('click', function () { - Modal.editSnippet(scope.snippet) + Modal.editSnippet(angular.copy(scope.snippet)) .result.then(function (snippet) { $rootScope.$broadcast('snippetUpdated', snippet) }, function () { diff --git a/src/directives/ui-ace.js b/src/directives/ui-ace.js index cc45e323..f27fd8c3 100644 --- a/src/directives/ui-ace.js +++ b/src/directives/ui-ace.js @@ -338,6 +338,10 @@ angular.module('ui.ace', []) scope.addCommand = acee.commands.addCommand + elm.on('click', function () { + acee.focus() + }) + } }; }]); diff --git a/src/styles/_shared.styl b/src/styles/_shared.styl index 0efb72db..ecac897d 100644 --- a/src/styles/_shared.styl +++ b/src/styles/_shared.styl @@ -1,11 +1,36 @@ .alert margin: 5px 0 +input.form-control, textarea.form-control, input.inline-form-control + &::-webkit-input-placeholder + color $textColor + &:-moz-placeholder /* Firefox 18- */ + color $textColor + &::-moz-placeholder /* Firefox 19+ */ + color $textColor + &:-ms-input-placeholder + color $textColor + + .inline-form-control @extend .form-control width: auto display: inline-block +.btn.btn-default + border-style solid + border-width 1px + btn-color($btn-default-color, $btn-default-bg, $btn-default-border) +.btn.btn-primary + btn-color($btn-primary-color, $btn-primary-bg, $btn-primary-border) +.btn.btn-info + btn-color($btn-info-color, $btn-info-bg, $btn-info-border) +.btn.btn-success + btn-color($btn-success-color, $btn-success-bg, $btn-success-border) +.btn.btn-danger + btn-color($btn-danger-color, $btn-danger-bg, $btn-danger-border) +.btn.btn-warning + btn-color($btn-warning-color, $btn-warning-bg, $btn-warning-border) textarea.form-control, .ace_editor border-radius $input-border-radius diff --git a/src/styles/_vars.styl b/src/styles/_vars.styl index bb7e8f22..100c59b2 100644 --- a/src/styles/_vars.styl +++ b/src/styles/_vars.styl @@ -42,7 +42,7 @@ $brand-danger= $btnError $btn-default-bg= $buttonBackgroundColor $btn-default-color= $textColor -$btn-default-border= $buttonBorderColor +$btn-default-border= $baseBorderColor $link-color= $textColorHighlight @@ -65,3 +65,22 @@ $modal-content-bg= $baseBackgroundColor $modal-content-border-color= $modal-header-border-color= $modal-footer-border-color= $baseBorderColor $jumbotron-bg= $backgroundColorHighlight + +$alert-danger-bg= $textColorError +$alert-danger-border= dark($alert-danger-bg) ? darken($alert-danger-bg, 5%) : lighten($alert-danger-bg, 5%) +$alert-danger-text= $textColorSelected + +$alert-info-bg= $textColorInfo +$alert-info-border= dark($alert-info-bg) ? darken($alert-info-bg, 5%) : lighten($alert-info-bg, 5%) +$alert-info-text= $textColorSelected + +$alert-success-bg= $textColorSuccess +$alert-success-border= dark($alert-success-bg) ? darken($alert-success-bg, 5%) : lighten($alert-success-bg, 5%) +$alert-success-text= $textColorSelected + +$alert-warning-bg= $textColorWarning +$alert-warning-border= dark($alert-warning-bg) ? darken($alert-warning-bg, 5%) : lighten($alert-warning-bg, 5%) +$alert-warning-text= $textColorSelected + +$panel-bg= $baseBackgroundColor +$panel-default-border= $baseBorderColor diff --git a/src/styles/directives/ui-select.styl b/src/styles/directives/ui-select.styl index 83a5bf59..96a688f5 100644 --- a/src/styles/directives/ui-select.styl +++ b/src/styles/directives/ui-select.styl @@ -87,6 +87,8 @@ body > .select2-container.open .ui-select-bootstrap .ui-select-toggle position: relative border-radius $input-border-radius + .ui-select-placeholder + color $textColor .ui-select-bootstrap .ui-select-toggle > .caret @@ -104,7 +106,7 @@ body > .select2-container.open .input-group > .ui-select-bootstrap > input.ui-select-search.form-control - border-radius: 4px /* FIXME hardcoded value :-/ */ + border-radius: $input-border-radius border-top-right-radius: 0 border-bottom-right-radius: 0 @@ -114,6 +116,7 @@ body > .select2-container.open text-align: left !important padding-right: 25px border-radius $input-border-radius + border solid 1px $input-border .ui-select-bootstrap > .ui-select-match > .caret diff --git a/src/styles/mixins/btn-color.styl b/src/styles/mixins/btn-color.styl new file mode 100644 index 00000000..fa5e3053 --- /dev/null +++ b/src/styles/mixins/btn-color.styl @@ -0,0 +1,35 @@ +btn-color($color, $background, $border) + color $color + background-color $background + border-color $border + + &:hover, + &:focus, + &.focus, + &:active, + &.active, + .open > .dropdown-toggle& + color dark($background) ? lighten($color, 10%) : darken($color, 10%) + background-color dark($background) ? lighten($background, 10%) : darken($background, 10%) + border-color dark($border) ? lighten($border, 12%) : darken($border, 12%) + + &:active, + &.active, + .open > .dropdown-toggle& + background-image none + + &.disabled, + &[disabled], + fieldset[disabled] & + &, + &:hover, + &:focus, + &.focus, + &:active, + &.active + background-color $background + border-color $border + + .badge + color $background + background-color $color diff --git a/src/styles/states/auth.styl b/src/styles/states/auth.styl new file mode 100644 index 00000000..13546720 --- /dev/null +++ b/src/styles/states/auth.styl @@ -0,0 +1,7 @@ +.auth-state + .panel + margin-top 50px + h1 + margin 15px 0 + .auth-control + margin 10px 0 diff --git a/src/styles/states/snippets.styl b/src/styles/states/snippets.styl index dc901491..9ec65a2c 100644 --- a/src/styles/states/snippets.styl +++ b/src/styles/states/snippets.styl @@ -44,11 +44,16 @@ $snippet-list-active-bg= $brand-primary cursor: pointer padding: 5px border-right 1px solid $baseBorderColor + border-bottom 1px solid $baseBorderColor + &:nth-child(even) + background-color $baseBackgroundColor + &:nth-child(odd) + background-color lighten($baseBackgroundColor, 2%) h4 margin: 0 &:hover - background-color: $snippet-list-item-hover-bg + background-color: $backgroundColorSelected p margin:0 @@ -78,17 +83,21 @@ $snippet-list-active-bg= $brand-primary right: 0 overflow-x: hidden overflow-y: auto + background-color lighten($baseBackgroundColor, 2%) .snippets-detail-state .detail-header + background-color lighten($baseBackgroundColor, 5%) padding: 5px 10px height: 50px - border-bottom: solid 1px $border-color + border-bottom: solid 1px $baseBorderColor .detail-header-title + color: $textColorHighlight small font-size: 0.6em + color: $textColor line-height: 40px font-size: 1.2em diff --git a/src/tpls/directives/side-nav.tpl.html b/src/tpls/directives/side-nav.tpl.html index d3a46558..6284d1e0 100644 --- a/src/tpls/directives/side-nav.tpl.html +++ b/src/tpls/directives/side-nav.tpl.html @@ -3,25 +3,19 @@ - - + +
Guest - - - + + + +
diff --git a/src/tpls/modals/edit-snippet-modal.tpl.html b/src/tpls/modals/edit-snippet-modal.tpl.html index 8d6c1a8e..e337c9f2 100644 --- a/src/tpls/modals/edit-snippet-modal.tpl.html +++ b/src/tpls/modals/edit-snippet-modal.tpl.html @@ -8,7 +8,7 @@
- + {{$select.selected}} @@ -32,7 +32,7 @@
- {{$item.name}} + {{$item.name}}
(new)
diff --git a/src/tpls/modals/new-snippet-modal.tpl.html b/src/tpls/modals/new-snippet-modal.tpl.html index 7326fdad..5b584e18 100644 --- a/src/tpls/modals/new-snippet-modal.tpl.html +++ b/src/tpls/modals/new-snippet-modal.tpl.html @@ -8,7 +8,7 @@
- + {{$select.selected}} @@ -32,7 +32,7 @@
- {{$item.name}} + {{$item.name}}
(new)
diff --git a/src/tpls/states/auth.register.tpl.html b/src/tpls/states/auth.register.tpl.html index dca10192..f34b2f37 100644 --- a/src/tpls/states/auth.register.tpl.html +++ b/src/tpls/states/auth.register.tpl.html @@ -1,56 +1,54 @@ -
-
-
- -
- - + -
-
No E-mail given.
-
Invalid Address.
-
-
+ +
+ + - -
- - +
+
No E-mail given.
+
Invalid Address.
+
-
-
No password given.
-
-
- -
- - -
- - - -
-
No Username given.
-
Username should be ^[A-Za-z0-9\-\_]+$
-
-
- - - -
- - - -
-
No Profile name given.
-
-
- - -
- -
-
-
+ + +
+ + + +
+
No password given.
+
+ +
+ +
+ + +
+ + +
+
No Username given.
+
Username should be ^[A-Za-z0-9\-\_]+$ (only alphanumeric, hyphen, underscore characters)
+
+
+ + + +
+ + + +
+
No Profile name given.
+
+
+ + +
+ +
+ diff --git a/src/tpls/states/auth.signin.tpl.html b/src/tpls/states/auth.signin.tpl.html index 60531ef8..309706c7 100644 --- a/src/tpls/states/auth.signin.tpl.html +++ b/src/tpls/states/auth.signin.tpl.html @@ -1,19 +1,15 @@ -
-
-
-
- - -
- -
- - -
- -
- -
-
+
+
+ +
-
+ +
+ + +
+ +
+ +
+ diff --git a/src/tpls/states/auth.tpl.html b/src/tpls/states/auth.tpl.html index 84b4fbf2..e1f934d1 100644 --- a/src/tpls/states/auth.tpl.html +++ b/src/tpls/states/auth.tpl.html @@ -1,9 +1,19 @@ -
+
+
+
-
-

Auth

- Register or Sign In +
+ +

Authentication

+ +
+ Register or Sign In +
+ +
+ + + +
- -
diff --git a/src/tpls/states/snippets.detail.tpl.html b/src/tpls/states/snippets.detail.tpl.html index b00cf739..7625a6f8 100644 --- a/src/tpls/states/snippets.detail.tpl.html +++ b/src/tpls/states/snippets.detail.tpl.html @@ -2,6 +2,7 @@
+ callsign diff --git a/src/tpls/states/snippets.list.tpl.html b/src/tpls/states/snippets.list.tpl.html index d8579726..da59a05d 100644 --- a/src/tpls/states/snippets.list.tpl.html +++ b/src/tpls/states/snippets.list.tpl.html @@ -29,7 +29,7 @@
  • - +