From 44540631e37e18b7ffa03b98341498de130db9d8 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Wed, 21 Sep 2016 16:43:51 +0200 Subject: [PATCH] Use Select2 for assigning users to tasks --- src/styles/_base.sass | 21 +- src/styles/plugins/js_select2.sass | 420 ++++++++++++++++++ src/styles/tasks.sass | 4 +- src/templates/attract/tasks/for_project.jade | 5 +- .../attract/tasks/view_task_embed.jade | 49 +- 5 files changed, 474 insertions(+), 25 deletions(-) create mode 100644 src/styles/plugins/js_select2.sass diff --git a/src/styles/_base.sass b/src/styles/_base.sass index 7435047..114b299 100644 --- a/src/styles/_base.sass +++ b/src/styles/_base.sass @@ -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 diff --git a/src/styles/plugins/js_select2.sass b/src/styles/plugins/js_select2.sass new file mode 100644 index 0000000..0580b4a --- /dev/null +++ b/src/styles/plugins/js_select2.sass @@ -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 diff --git a/src/styles/tasks.sass b/src/styles/tasks.sass index b62d4a4..c7a9833 100644 --- a/src/styles/tasks.sass +++ b/src/styles/tasks.sass @@ -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 diff --git a/src/templates/attract/tasks/for_project.jade b/src/templates/attract/tasks/for_project.jade index 2ec54d2..200dd1a 100644 --- a/src/templates/attract/tasks/for_project.jade +++ b/src/templates/attract/tasks/for_project.jade @@ -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 %} diff --git a/src/templates/attract/tasks/view_task_embed.jade b/src/templates/attract/tasks/view_task_embed.jade index ed2050f..726c6c6 100644 --- a/src/templates/attract/tasks/view_task_embed.jade +++ b/src/templates/attract/tasks/view_task_embed.jade @@ -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 %} - | - | {% 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 %} + | + | {% 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 %} - | - | {% 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 %} + | + | {% 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 %} - | + | | {% endfor %} + .input-transparent-group button.btn.btn-default(type=submit) Save task + +script. + $("select[name='users']").select2();