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 @@