Use Select2 for assigning users to tasks
This commit is contained in:
@@ -83,13 +83,30 @@ nav.sidebar
|
||||
|
||||
.input-transparent-group
|
||||
width: 100%
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
label
|
||||
padding-right: 10px
|
||||
font-weight: normal
|
||||
color: $color-text-dark-primary
|
||||
|
||||
&.select_multiple
|
||||
margin-top: 5px
|
||||
margin-bottom: 10px
|
||||
|
||||
select.input-transparent
|
||||
background-color: $color-background
|
||||
|
||||
option
|
||||
background-color: white
|
||||
|
||||
.input-transparent
|
||||
border: thin solid transparent
|
||||
border-radius: 3px
|
||||
padding: 5px
|
||||
margin-top: 5px
|
||||
margin-bottom: 5px
|
||||
margin-top: 10px
|
||||
margin-bottom: 10px
|
||||
width: 100%
|
||||
|
||||
&:hover
|
||||
|
||||
420
src/styles/plugins/js_select2.sass
Normal file
420
src/styles/plugins/js_select2.sass
Normal file
@@ -0,0 +1,420 @@
|
||||
@import ../config
|
||||
.select2-container
|
||||
box-sizing: border-box
|
||||
display: inline-block
|
||||
margin: 0
|
||||
position: relative
|
||||
vertical-align: middle
|
||||
.select2-selection--single
|
||||
box-sizing: border-box
|
||||
cursor: pointer
|
||||
display: block
|
||||
height: 28px
|
||||
user-select: none
|
||||
-webkit-user-select: none
|
||||
.select2-selection__rendered
|
||||
display: block
|
||||
padding-left: 8px
|
||||
padding-right: 20px
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
.select2-selection__clear
|
||||
position: relative
|
||||
.select2-selection--multiple
|
||||
box-sizing: border-box
|
||||
cursor: pointer
|
||||
display: block
|
||||
min-height: 32px
|
||||
user-select: none
|
||||
-webkit-user-select: none
|
||||
.select2-selection__rendered
|
||||
display: inline-block
|
||||
overflow: hidden
|
||||
padding-left: 8px
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
.select2-search--inline
|
||||
float: left
|
||||
.select2-search__field
|
||||
box-sizing: border-box
|
||||
border: none
|
||||
font-size: 100%
|
||||
margin-top: 5px
|
||||
padding: 0
|
||||
&::-webkit-search-cancel-button
|
||||
-webkit-appearance: none
|
||||
|
||||
.select2-dropdown
|
||||
background-color: white
|
||||
border: 1px solid $color-text-dark-hint
|
||||
border-radius: 3px
|
||||
box-shadow: 0 3px 15px rgba(black, .2)
|
||||
box-sizing: border-box
|
||||
display: block
|
||||
position: absolute
|
||||
left: -100000px
|
||||
width: 100%
|
||||
z-index: 1051
|
||||
|
||||
.select2-results
|
||||
display: block
|
||||
|
||||
.select2-results__options
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
.select2-results__option
|
||||
padding: 6px
|
||||
user-select: none
|
||||
-webkit-user-select: none
|
||||
&[aria-selected]
|
||||
cursor: pointer
|
||||
|
||||
.select2-container--open
|
||||
.select2-dropdown
|
||||
left: 0
|
||||
.select2-dropdown--above
|
||||
border-bottom: none
|
||||
border-bottom-left-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
.select2-dropdown--below
|
||||
border-top: none
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
|
||||
.select2-search--dropdown
|
||||
display: block
|
||||
padding: 4px
|
||||
.select2-search__field
|
||||
padding: 4px
|
||||
width: 100%
|
||||
box-sizing: border-box
|
||||
&::-webkit-search-cancel-button
|
||||
-webkit-appearance: none
|
||||
&.select2-search--hide
|
||||
display: none
|
||||
|
||||
.select2-close-mask
|
||||
border: 0
|
||||
margin: 0
|
||||
padding: 0
|
||||
display: block
|
||||
position: fixed
|
||||
left: 0
|
||||
top: 0
|
||||
min-height: 100%
|
||||
min-width: 100%
|
||||
height: auto
|
||||
width: auto
|
||||
opacity: 0
|
||||
z-index: 99
|
||||
background-color: #fff
|
||||
filter: alpha(opacity = 0)
|
||||
|
||||
.select2-hidden-accessible
|
||||
border: 0 !important
|
||||
clip: rect(0 0 0 0) !important
|
||||
height: 1px !important
|
||||
margin: -1px !important
|
||||
overflow: hidden !important
|
||||
padding: 0 !important
|
||||
position: absolute !important
|
||||
width: 1px !important
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--single
|
||||
background-color: #fff
|
||||
border: 1px solid #aaa
|
||||
border-radius: 4px
|
||||
.select2-selection__rendered
|
||||
color: #444
|
||||
line-height: 28px
|
||||
.select2-selection__clear
|
||||
cursor: pointer
|
||||
float: right
|
||||
font-weight: bold
|
||||
.select2-selection__placeholder
|
||||
color: #999
|
||||
.select2-selection__arrow
|
||||
height: 26px
|
||||
position: absolute
|
||||
top: 1px
|
||||
right: 1px
|
||||
width: 20px
|
||||
b
|
||||
border-color: #888 transparent transparent transparent
|
||||
border-style: solid
|
||||
border-width: 5px 4px 0 4px
|
||||
height: 0
|
||||
left: 50%
|
||||
margin-left: -4px
|
||||
margin-top: -2px
|
||||
position: absolute
|
||||
top: 50%
|
||||
width: 0
|
||||
&.select2-container--disabled .select2-selection--single
|
||||
background-color: #eee
|
||||
cursor: default
|
||||
.select2-selection__clear
|
||||
display: none
|
||||
&.select2-container--open .select2-selection--single .select2-selection__arrow b
|
||||
border-color: transparent transparent #888 transparent
|
||||
border-width: 0 4px 5px 4px
|
||||
.select2-selection--multiple
|
||||
background-color: white
|
||||
border: 1px solid transparent
|
||||
border-radius: 4px
|
||||
cursor: text
|
||||
|
||||
&:hover
|
||||
border-color: $color-text-dark-hint
|
||||
.select2-selection__rendered
|
||||
box-sizing: border-box
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0 5px
|
||||
width: 100%
|
||||
.select2-selection__placeholder
|
||||
color: #999
|
||||
margin-top: 5px
|
||||
float: left
|
||||
.select2-selection__clear
|
||||
cursor: pointer
|
||||
float: right
|
||||
font-weight: bold
|
||||
margin-top: 5px
|
||||
margin-right: 10px
|
||||
|
||||
/* Selections in the list */
|
||||
.select2-selection__choice
|
||||
background-color: $color-background
|
||||
border: 1px solid $color-background-dark
|
||||
border-radius: 3px
|
||||
cursor: default
|
||||
float: left
|
||||
margin-right: 5px
|
||||
margin-top: 5px
|
||||
padding: 3px 10px
|
||||
color: $color-text-dark
|
||||
.select2-selection__choice__remove
|
||||
color: $color-text-dark-hint
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
font-weight: bold
|
||||
margin-right: 8px
|
||||
&:hover
|
||||
color: $color-danger
|
||||
&.select2-container--focus .select2-selection--multiple
|
||||
border: solid $color-text-dark-hint 1px
|
||||
outline: 0
|
||||
&.select2-container--disabled
|
||||
.select2-selection--multiple
|
||||
background-color: #eee
|
||||
cursor: default
|
||||
.select2-selection__choice__remove
|
||||
display: none
|
||||
&.select2-container--open
|
||||
&.select2-container--above
|
||||
.select2-selection--single, .select2-selection--multiple
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
&.select2-container--below
|
||||
.select2-selection--single, .select2-selection--multiple
|
||||
border-bottom-left-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
.select2-search--dropdown .select2-search__field
|
||||
border: 1px solid #aaa
|
||||
.select2-search--inline .select2-search__field
|
||||
background: transparent
|
||||
border: none
|
||||
outline: 0
|
||||
box-shadow: none
|
||||
-webkit-appearance: textfield
|
||||
.select2-results > .select2-results__options
|
||||
max-height: 200px
|
||||
overflow-y: auto
|
||||
.select2-results__option
|
||||
&[role=group]
|
||||
padding: 0
|
||||
&[aria-disabled=true]
|
||||
color: $color-text-dark-hint
|
||||
&[aria-selected=true]
|
||||
background-color: $color-background
|
||||
.select2-results__option
|
||||
padding-left: 1em
|
||||
.select2-results__group
|
||||
padding-left: 0
|
||||
.select2-results__option
|
||||
margin-left: -1em
|
||||
padding-left: 2em
|
||||
.select2-results__option
|
||||
margin-left: -2em
|
||||
padding-left: 3em
|
||||
.select2-results__option
|
||||
margin-left: -3em
|
||||
padding-left: 4em
|
||||
.select2-results__option
|
||||
margin-left: -4em
|
||||
padding-left: 5em
|
||||
.select2-results__option
|
||||
margin-left: -5em
|
||||
padding-left: 6em
|
||||
.select2-results__option--highlighted[aria-selected]
|
||||
background-color: $color-primary
|
||||
color: white
|
||||
.select2-results__group
|
||||
cursor: default
|
||||
display: block
|
||||
padding: 6px
|
||||
|
||||
.select2-container--classic
|
||||
.select2-selection--single
|
||||
background-color: #f7f7f7
|
||||
border: 1px solid #aaa
|
||||
border-radius: 4px
|
||||
outline: 0
|
||||
background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%)
|
||||
background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%)
|
||||
background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%)
|
||||
background-repeat: repeat-x
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
|
||||
&:focus
|
||||
border: 1px solid #5897fb
|
||||
.select2-selection__rendered
|
||||
color: #444
|
||||
line-height: 28px
|
||||
.select2-selection__clear
|
||||
cursor: pointer
|
||||
float: right
|
||||
font-weight: bold
|
||||
margin-right: 10px
|
||||
.select2-selection__placeholder
|
||||
color: #999
|
||||
.select2-selection__arrow
|
||||
background-color: #ddd
|
||||
border: none
|
||||
border-left: 1px solid #aaa
|
||||
border-top-right-radius: 4px
|
||||
border-bottom-right-radius: 4px
|
||||
height: 26px
|
||||
position: absolute
|
||||
top: 1px
|
||||
right: 1px
|
||||
width: 20px
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%)
|
||||
background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%)
|
||||
background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%)
|
||||
background-repeat: repeat-x
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)
|
||||
b
|
||||
border-color: #888 transparent transparent transparent
|
||||
border-style: solid
|
||||
border-width: 5px 4px 0 4px
|
||||
height: 0
|
||||
left: 50%
|
||||
margin-left: -4px
|
||||
margin-top: -2px
|
||||
position: absolute
|
||||
top: 50%
|
||||
width: 0
|
||||
&.select2-container--open
|
||||
.select2-selection--single
|
||||
border: 1px solid #5897fb
|
||||
.select2-selection__arrow
|
||||
background: transparent
|
||||
border: none
|
||||
b
|
||||
border-color: transparent transparent #888 transparent
|
||||
border-width: 0 4px 5px 4px
|
||||
&.select2-container--above .select2-selection--single
|
||||
border-top: none
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%)
|
||||
background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%)
|
||||
background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%)
|
||||
background-repeat: repeat-x
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
|
||||
&.select2-container--below .select2-selection--single
|
||||
border-bottom: none
|
||||
border-bottom-left-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%)
|
||||
background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%)
|
||||
background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%)
|
||||
background-repeat: repeat-x
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)
|
||||
.select2-selection--multiple
|
||||
background-color: white
|
||||
border: 1px solid #aaa
|
||||
border-radius: 4px
|
||||
cursor: text
|
||||
outline: 0
|
||||
&:focus
|
||||
border: 1px solid #5897fb
|
||||
.select2-selection__rendered
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0 5px
|
||||
.select2-selection__clear
|
||||
display: none
|
||||
.select2-selection__choice
|
||||
background-color: #e4e4e4
|
||||
border: 1px solid #aaa
|
||||
border-radius: 4px
|
||||
cursor: default
|
||||
float: left
|
||||
margin-right: 5px
|
||||
margin-top: 5px
|
||||
padding: 0 5px
|
||||
.select2-selection__choice__remove
|
||||
color: #888
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
font-weight: bold
|
||||
margin-right: 2px
|
||||
&:hover
|
||||
color: #555
|
||||
&.select2-container--open
|
||||
.select2-selection--multiple
|
||||
border: 1px solid #5897fb
|
||||
&.select2-container--above .select2-selection--multiple
|
||||
border-top: none
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
&.select2-container--below .select2-selection--multiple
|
||||
border-bottom: none
|
||||
border-bottom-left-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
.select2-search--dropdown .select2-search__field
|
||||
border: 1px solid #aaa
|
||||
outline: 0
|
||||
.select2-search--inline .select2-search__field
|
||||
outline: 0
|
||||
box-shadow: none
|
||||
.select2-dropdown
|
||||
background-color: white
|
||||
border: 1px solid transparent
|
||||
.select2-dropdown--above
|
||||
border-bottom: none
|
||||
.select2-dropdown--below
|
||||
border-top: none
|
||||
.select2-results > .select2-results__options
|
||||
max-height: 200px
|
||||
overflow-y: auto
|
||||
.select2-results__option
|
||||
&[role=group]
|
||||
padding: 0
|
||||
&[aria-disabled=true]
|
||||
color: grey
|
||||
.select2-results__option--highlighted[aria-selected]
|
||||
background-color: #3875d7
|
||||
color: white
|
||||
.select2-results__group
|
||||
cursor: default
|
||||
display: block
|
||||
padding: 6px
|
||||
&.select2-container--open .select2-dropdown
|
||||
border-color: #5897fb
|
||||
@@ -71,7 +71,7 @@
|
||||
|
||||
#task-details
|
||||
margin: 10px
|
||||
padding: 10px
|
||||
padding: 0 10px 10px
|
||||
+container-box
|
||||
|
||||
#task-view
|
||||
@@ -90,4 +90,4 @@ option.invalid_task
|
||||
color: $color-text-dark
|
||||
a.task-project
|
||||
color: $color-text-dark-secondary
|
||||
margin-left: 5px
|
||||
margin-left: 10px
|
||||
|
||||
@@ -4,6 +4,8 @@
|
||||
|
||||
| {% block style %}
|
||||
link(href="{{ url_for('static_attract', filename='assets/css/tasks.css') }}", rel="stylesheet")
|
||||
link(href="{{ url_for('static_attract', filename='assets/css/plugins/js_select2.css') }}", rel="stylesheet")
|
||||
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.select2.min.js') }}")
|
||||
| {% endblock %}
|
||||
|
||||
| {% block body %}
|
||||
@@ -30,7 +32,8 @@ link(href="{{ url_for('static_attract', filename='assets/css/tasks.css') }}", re
|
||||
| Task Details
|
||||
#status-bar
|
||||
#task-details
|
||||
| Tasks
|
||||
| {{ tasks | count }} tasks so far.
|
||||
a(href="javascript:task_create();") Create a new one!
|
||||
| {% endblock %}
|
||||
|
||||
| {% block footer_scripts %}
|
||||
|
||||
@@ -6,40 +6,49 @@ script(src="{{ url_for('static_attract', filename='js/tasks.js') }}",async=true)
|
||||
name="name",
|
||||
type=text,
|
||||
placeholder='Name',
|
||||
aria-describedby="task-addon-name",
|
||||
value="{{ task.name|hide_none }}")
|
||||
|
||||
.input-transparent-group
|
||||
textarea.input-transparent(
|
||||
name="description",
|
||||
type=text,
|
||||
placeholder='Description',
|
||||
aria-describedby="task-addon-description") {{ task.description|hide_none }}
|
||||
placeholder='Description') {{ task.description | hide_none }}
|
||||
|
||||
.input-transparent-group
|
||||
select.input-transparent(name="task_type",aria-describedby="task-addon-task_type")
|
||||
| {% for task_type in attract_props.task_types.attract_shot %}
|
||||
| <option value="{{ task_type }}" {% if task_type == task.properties.task_type %}selected{% endif %}>{{ task_type|undertitle }}</option>
|
||||
| {% endfor %}
|
||||
| {% if task.properties.task_type not in attract_props.task_types.attract_shot %}
|
||||
option(value="{{ task.properties.task_type }}",selected).invalid_task {{ task.properties.task_type|undertitle }}
|
||||
| {% endif %}
|
||||
.row
|
||||
.col-md-6
|
||||
.input-transparent-group
|
||||
label#task-task_type Type:
|
||||
select.input-transparent(name="task_type",aria-describedby="task-task_type")
|
||||
| {% for task_type in attract_props.task_types.attract_shot %}
|
||||
| <option value="{{ task_type }}" {% if task_type == task.properties.task_type %}selected{% endif %}>{{ task_type | undertitle }}</option>
|
||||
| {% endfor %}
|
||||
| {% if task.properties.task_type not in attract_props.task_types.attract_shot %}
|
||||
option(value="{{ task.properties.task_type }}",selected).invalid_task {{ task.properties.task_type | undertitle }}
|
||||
| {% endif %}
|
||||
|
||||
.input-transparent-group
|
||||
select.input-transparent(
|
||||
name="status",
|
||||
aria-describedby="task-addon-status")
|
||||
| {% for status in task_node_type.dyn_schema.status.allowed %}
|
||||
| <option value="{{ status }}" {% if status == task.properties.status %}selected{% endif %}>{{ status|undertitle }}</option>
|
||||
| {% endfor %}
|
||||
.col-md-6
|
||||
.input-transparent-group
|
||||
label#task-status Status:
|
||||
select.input-transparent(
|
||||
name="status",
|
||||
aria-describedby="task-status")
|
||||
| {% for status in task_node_type.dyn_schema.status.allowed %}
|
||||
| <option value="{{ status }}" {% if status == task.properties.status %}selected{% endif %}>{{ status | undertitle }}</option>
|
||||
| {% endfor %}
|
||||
|
||||
.input-transparent-group
|
||||
.input-transparent-group.select_multiple
|
||||
label Assignees:
|
||||
select.input-transparent(
|
||||
name="users",
|
||||
multiple,
|
||||
placeholder="Assigned to"
|
||||
aria-describedby="task-addon-users")
|
||||
| {% for u in project.users %}
|
||||
| <option value="{{ u._id }}">{{u.email}}</option>
|
||||
| <option value="{{ u._id }}" {% if u._id in task.properties.assigned_to['users'] %}selected{% endif %}>{{ u.full_name }}</option>
|
||||
| {% endfor %}
|
||||
|
||||
.input-transparent-group
|
||||
button.btn.btn-default(type=submit) Save task
|
||||
|
||||
script.
|
||||
$("select[name='users']").select2();
|
||||
|
||||
Reference in New Issue
Block a user