Adjusted alignment for the new label form
This commit is contained in:
parent
6d40eee5ea
commit
aec0e22669
5 changed files with 48 additions and 20 deletions
|
@ -23,8 +23,14 @@ class @LabelsSelect
|
|||
newColorField.val $(this).data('color')
|
||||
$('.js-dropdown-label-color-preview')
|
||||
.css 'background-color', $(this).data('color')
|
||||
.parent()
|
||||
.addClass 'is-active'
|
||||
|
||||
$('.js-cancel-label-btn').on 'click', (e) ->
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
$('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
|
||||
|
||||
$('.js-new-label-btn').on 'click', (e) ->
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
|
|
|
@ -183,7 +183,7 @@
|
|||
}
|
||||
|
||||
.dropdown-select {
|
||||
width: 280px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.dropdown-menu-align-right {
|
||||
|
@ -237,7 +237,7 @@
|
|||
|
||||
.dropdown-title-button {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
color: $dropdown-title-btn-color;
|
||||
font-size: 14px;
|
||||
|
@ -357,8 +357,9 @@
|
|||
.dropdown-label-box {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: $border-radius-base;
|
||||
}
|
||||
|
|
|
@ -168,13 +168,13 @@ $regular_font: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif
|
|||
*/
|
||||
$dropdown-bg: #fff;
|
||||
$dropdown-link-color: #555;
|
||||
$dropdown-link-hover-bg: rgba(#000, .04);
|
||||
$dropdown-link-hover-bg: $row-hover;
|
||||
$dropdown-border-color: rgba(#000, .1);
|
||||
$dropdown-shadow-color: rgba(#000, .1);
|
||||
$dropdown-divider-color: rgba(#000, .1);
|
||||
$dropdown-header-color: #959494;
|
||||
$dropdown-title-btn-color: #bfbfbf;
|
||||
$dropdown-input-color: #c7c7c7;
|
||||
$dropdown-input-color: #555;
|
||||
$dropdown-input-focus-border: rgb(58, 171, 240);
|
||||
$dropdown-input-focus-shadow: rgba(#000, .2);
|
||||
$dropdown-loading-bg: rgba(#fff, .6);
|
||||
|
|
|
@ -9,28 +9,45 @@
|
|||
}
|
||||
|
||||
&.suggest-colors-dropdown {
|
||||
margin-bottom: 5px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: $border-radius-base;
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
@include border-radius(0);
|
||||
width: 36.7px;
|
||||
width: (100% / 7);
|
||||
margin-right: 0;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-label-color-preview {
|
||||
display: none;
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
.dropdown-new-label {
|
||||
.dropdown-content {
|
||||
max-height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-label-color-input {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&.is-active {
|
||||
display: block;
|
||||
padding-left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-label-color-preview {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-top-left-radius: $border-radius-base;
|
||||
border-bottom-left-radius: $border-radius-base;
|
||||
}
|
||||
|
||||
.label-row {
|
||||
.label {
|
||||
padding: 9px;
|
||||
|
|
|
@ -24,17 +24,21 @@
|
|||
- else
|
||||
View labels
|
||||
- if can? current_user, :admin_label, @project and @project
|
||||
.dropdown-page-two
|
||||
.dropdown-page-two.dropdown-new-label
|
||||
= dropdown_title("Create new label", back: true)
|
||||
= dropdown_content do
|
||||
.dropdown-labels-error.js-label-error
|
||||
%input#new_label_color{type: "hidden"}
|
||||
%input#new_label_name.dropdown-input-field{type: "text", placeholder: "Name new label"}
|
||||
.dropdown-label-color-preview.js-dropdown-label-color-preview
|
||||
.suggest-colors.suggest-colors-dropdown
|
||||
- suggested_colors.each do |color|
|
||||
= link_to '#', style: "background-color: #{color}", data: { color: color } do
|
||||
 
|
||||
%button.btn.btn-primary.js-new-label-btn{type: "button"}
|
||||
.dropdown-label-color-input
|
||||
.dropdown-label-color-preview.js-dropdown-label-color-preview
|
||||
%input#new_label_color.dropdown-input-field{ type: "text" }
|
||||
.clearfix
|
||||
%button.btn.btn-primary.pull-left.js-new-label-btn{type: "button"}
|
||||
Create
|
||||
%button.btn.btn-default.pull-right.js-cancel-label-btn{type: "button"}
|
||||
Cancel
|
||||
= dropdown_loading
|
||||
|
|
Loading…
Reference in a new issue