Skip to content

Commit 3b0dd3a

Browse files
Rokt33rRokt33r
committed
update ui
1 parent f2daf5e commit 3b0dd3a

17 files changed

Lines changed: 202 additions & 99 deletions

‎src/controllers/states/SnippetsDetailController.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ angular.module('codexen')
1515
vm.isLoaded = true
1616
})
1717

18+
// TODO: When deletion occurs, switch the next snippet
19+
// TODO: Add deletion confirmation modal
1820
vm.delete = function () {
1921
Snippet.delete(vm.snippet.id)
2022
.success(function () {

‎src/directives/btn-edit-snippet.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ angular.module('codexen')
77
},
88
link: function (scope, el) {
99
el.on('click', function () {
10-
Modal.editSnippet(scope.snippet)
10+
Modal.editSnippet(angular.copy(scope.snippet))
1111
.result.then(function (snippet) {
1212
$rootScope.$broadcast('snippetUpdated', snippet)
1313
}, function () {

‎src/directives/ui-ace.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -338,6 +338,10 @@ angular.module('ui.ace', [])
338338

339339
scope.addCommand = acee.commands.addCommand
340340

341+
elm.on('click', function () {
342+
acee.focus()
343+
})
344+
341345
}
342346
};
343347
}]);

‎src/styles/_shared.styl‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,36 @@
11
.alert
22
margin: 5px 0
33

4+
input.form-control, textarea.form-control, input.inline-form-control
5+
&::-webkit-input-placeholder
6+
color $textColor
7+
&:-moz-placeholder /* Firefox 18- */
8+
color $textColor
9+
&::-moz-placeholder /* Firefox 19+ */
10+
color $textColor
11+
&:-ms-input-placeholder
12+
color $textColor
13+
14+
415
.inline-form-control
516
@extend .form-control
617
width: auto
718
display: inline-block
819

20+
.btn.btn-default
21+
border-style solid
22+
border-width 1px
23+
btn-color($btn-default-color, $btn-default-bg, $btn-default-border)
24+
.btn.btn-primary
25+
btn-color($btn-primary-color, $btn-primary-bg, $btn-primary-border)
26+
.btn.btn-info
27+
btn-color($btn-info-color, $btn-info-bg, $btn-info-border)
28+
.btn.btn-success
29+
btn-color($btn-success-color, $btn-success-bg, $btn-success-border)
30+
.btn.btn-danger
31+
btn-color($btn-danger-color, $btn-danger-bg, $btn-danger-border)
32+
.btn.btn-warning
33+
btn-color($btn-warning-color, $btn-warning-bg, $btn-warning-border)
934

1035
textarea.form-control, .ace_editor
1136
border-radius $input-border-radius

‎src/styles/_vars.styl‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ $brand-danger= $btnError
4242

4343
$btn-default-bg= $buttonBackgroundColor
4444
$btn-default-color= $textColor
45-
$btn-default-border= $buttonBorderColor
45+
$btn-default-border= $baseBorderColor
4646

4747
$link-color= $textColorHighlight
4848

@@ -65,3 +65,22 @@ $modal-content-bg= $baseBackgroundColor
6565
$modal-content-border-color= $modal-header-border-color= $modal-footer-border-color= $baseBorderColor
6666

6767
$jumbotron-bg= $backgroundColorHighlight
68+
69+
$alert-danger-bg= $textColorError
70+
$alert-danger-border= dark($alert-danger-bg) ? darken($alert-danger-bg, 5%) : lighten($alert-danger-bg, 5%)
71+
$alert-danger-text= $textColorSelected
72+
73+
$alert-info-bg= $textColorInfo
74+
$alert-info-border= dark($alert-info-bg) ? darken($alert-info-bg, 5%) : lighten($alert-info-bg, 5%)
75+
$alert-info-text= $textColorSelected
76+
77+
$alert-success-bg= $textColorSuccess
78+
$alert-success-border= dark($alert-success-bg) ? darken($alert-success-bg, 5%) : lighten($alert-success-bg, 5%)
79+
$alert-success-text= $textColorSelected
80+
81+
$alert-warning-bg= $textColorWarning
82+
$alert-warning-border= dark($alert-warning-bg) ? darken($alert-warning-bg, 5%) : lighten($alert-warning-bg, 5%)
83+
$alert-warning-text= $textColorSelected
84+
85+
$panel-bg= $baseBackgroundColor
86+
$panel-default-border= $baseBorderColor

‎src/styles/directives/ui-select.styl‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,8 @@ body > .select2-container.open
8787
.ui-select-bootstrap .ui-select-toggle
8888
position: relative
8989
border-radius $input-border-radius
90+
.ui-select-placeholder
91+
color $textColor
9092

9193

9294
.ui-select-bootstrap .ui-select-toggle > .caret
@@ -104,7 +106,7 @@ body > .select2-container.open
104106

105107

106108
.input-group > .ui-select-bootstrap > input.ui-select-search.form-control
107-
border-radius: 4px /* FIXME hardcoded value :-/ */
109+
border-radius: $input-border-radius
108110
border-top-right-radius: 0
109111
border-bottom-right-radius: 0
110112

@@ -114,6 +116,7 @@ body > .select2-container.open
114116
text-align: left !important
115117
padding-right: 25px
116118
border-radius $input-border-radius
119+
border solid 1px $input-border
117120

118121

119122
.ui-select-bootstrap > .ui-select-match > .caret

‎src/styles/mixins/btn-color.styl‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
btn-color($color, $background, $border)
2+
color $color
3+
background-color $background
4+
border-color $border
5+
6+
&:hover,
7+
&:focus,
8+
&.focus,
9+
&:active,
10+
&.active,
11+
.open > .dropdown-toggle&
12+
color dark($background) ? lighten($color, 10%) : darken($color, 10%)
13+
background-color dark($background) ? lighten($background, 10%) : darken($background, 10%)
14+
border-color dark($border) ? lighten($border, 12%) : darken($border, 12%)
15+
16+
&:active,
17+
&.active,
18+
.open > .dropdown-toggle&
19+
background-image none
20+
21+
&.disabled,
22+
&[disabled],
23+
fieldset[disabled] &
24+
&,
25+
&:hover,
26+
&:focus,
27+
&.focus,
28+
&:active,
29+
&.active
30+
background-color $background
31+
border-color $border
32+
33+
.badge
34+
color $background
35+
background-color $color

‎src/styles/states/auth.styl‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.auth-state
2+
.panel
3+
margin-top 50px
4+
h1
5+
margin 15px 0
6+
.auth-control
7+
margin 10px 0

‎src/styles/states/snippets.styl‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,16 @@ $snippet-list-active-bg= $brand-primary
4444
cursor: pointer
4545
padding: 5px
4646
border-right 1px solid $baseBorderColor
47+
border-bottom 1px solid $baseBorderColor
48+
&:nth-child(even)
49+
background-color $baseBackgroundColor
50+
&:nth-child(odd)
51+
background-color lighten($baseBackgroundColor, 2%)
4752
h4
4853
margin: 0
4954

5055
&:hover
51-
background-color: $snippet-list-item-hover-bg
56+
background-color: $backgroundColorSelected
5257

5358
p
5459
margin:0
@@ -78,17 +83,21 @@ $snippet-list-active-bg= $brand-primary
7883
right: 0
7984
overflow-x: hidden
8085
overflow-y: auto
86+
background-color lighten($baseBackgroundColor, 2%)
8187

8288

8389

8490
.snippets-detail-state
8591
.detail-header
92+
background-color lighten($baseBackgroundColor, 5%)
8693
padding: 5px 10px
8794
height: 50px
88-
border-bottom: solid 1px $border-color
95+
border-bottom: solid 1px $baseBorderColor
8996
.detail-header-title
97+
color: $textColorHighlight
9098
small
9199
font-size: 0.6em
100+
color: $textColor
92101

93102
line-height: 40px
94103
font-size: 1.2em

‎src/tpls/directives/side-nav.tpl.html‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,19 @@
33
<img width="30" class="img-circle" ng-src="http://www.gravatar.com/avatar/{{ vm.currentUser.email | gravatar }}">
44
<a href ng-bind="vm.currentUser.name"></a>
55
<span class="nav-control-group pull-right">
6-
<a href class="btn btn-sm btn-default"><i class="fa fa-gears"></i></a>
7-
<a href class="btn btn-sm btn-default" ng-click="vm.signOut()"><i class="fa fa-sign-out"></i></a>
6+
<a href class="btn btn-sm btn-default"><i class="fa fa-gears fa-fw"></i></a>
7+
<a href class="btn btn-sm btn-default" ng-click="vm.signOut()"><i class="fa fa-sign-out fa-fw"></i></a>
88
</span>
99

1010
</div>
1111
<div ng-if="!vm.currentUser">
1212
<span>Guest</span>
1313

14-
<span class="dropdown" dropdown is-open>
15-
<a type="button" name="button" dropdown-toggle class="btn btn-sm btn-default dropdown-toggle"><i class="fa fa-caret-down"></i></a>
16-
<ul class="dropdown-menu">
17-
<li>
18-
<a ui-sref="auth.signin"><i class="fa fa-sign-in"></i> Sign In</a>
19-
</li>
20-
<li>
21-
<a ui-sref="auth.register"><i class="fa fa-user-plus"></i> Register</a>
22-
</li>
23-
</ul>
14+
<span class="nav-control-group pull-right">
15+
<a class="btn btn-sm btn-default" ui-sref="auth.register"><i class="fa fa-user-plus fa-fw"></i></a>
16+
<a class="btn btn-sm btn-default" ui-sref="auth.signin"><i class="fa fa-sign-in fa-fw"></i></a>
2417
</span>
18+
2519
</div>
2620
</div>
2721

0 commit comments

Comments
 (0)