archive/attract
0
0
Fork 0
Code Issues 7 Pull Requests Projects Releases Wiki Activity

task- and shot- specific lists are now called item-

Browse Source
This commit is contained in:
Pablo Vazquez
2016-11-09 17:04:13 +01:00
parent 40ecbe2135
commit 5bf56ffd34
12 changed files with 248 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/scripts/tutti/10_tasks.js
View File

@@ -152,9 +152,9 @@ function task_add(shot_id, task_id, task_type)
var context = ProjectUtils.context();
if (context == 'task') {
/* WARNING: This is a copy of an element of attract/tasks/for_project #task-list.col-list
/* WARNING: This is a copy of an element of attract/tasks/for_project .item-list.col-list
* If that changes, change this too. */
$('#task-list').append('\
$('.item-list.task').append('\
<a class="col-list-item task-list-item status-todo task-link active"\
href="' + url + '"\
data-task-id="' + task_id + '"\
@@ -172,7 +172,7 @@ function task_add(shot_id, task_id, task_type)
var $list_cell = $('#' + context + '-' + shot_id + ' .table-cell.task-type.' + task_type);
var url = '/attract/' + project_url + '/' + context + 's/with-task/' + task_id;
/* WARNING: This is a copy of an element of attract/shots/for_project #task-list.col-list
/* WARNING: This is a copy of an element of attract/shots/for_project .item-list.col-list
* If that changes, change this too. */
$list_cell.append('\
<a class="status-todo task-link active"\
@@ -279,7 +279,7 @@ function attract_form_save(form_id, item_id, item_save_url, options)
}
function task_save(task_id, task_url) {
return attract_form_save('task_form', 'task-' + task_id, task_url, {
return attract_form_save('item_form', 'task-' + task_id, task_url, {
done: function($task, saved_task) {
// Update the task list.
// NOTE: this is tightly linked to the HTML of the task list in for_project.jade.
@@ -309,7 +309,7 @@ function task_save(task_id, task_url) {
}
function shot_save(shot_id, shot_url) {
return attract_form_save('shot_form', 'shot-' + shot_id, shot_url, {
return attract_form_save('item_form', 'shot-' + shot_id, shot_url, {
done: function($shot, saved_shot) {
// Update the shot list.
$('.shot-name-' + saved_shot._id).text(saved_shot.name);
@@ -333,11 +333,11 @@ function shot_save(shot_id, shot_url) {
}
function asset_save(asset_id, asset_url) {
return attract_form_save('shot_form', 'asset-' + asset_id, asset_url, {
return attract_form_save('item_form', 'asset-' + asset_id, asset_url, {
done: function($asset, saved_asset) {
// Update the asset list.
// NOTE: this is tightly linked to the HTML of the asset list in for_project.jade.
$('.asset-name-' + saved_asset._id).text(saved_asset.name).flashOnce();
$('.item-name-' + saved_asset._id).text(saved_asset.name).flashOnce();
$asset.find('span.name').text(saved_asset.name);
$asset.find('span.due_date').text(moment().to(saved_asset.properties.due_date));
$asset.find('span.status').text(saved_asset.properties.status.replace('_', ' '));

183
src/styles/_app_base.sass
View File

@@ -274,6 +274,10 @@ input, input.form-control
textarea
resize: vertical
.input-group-separator
margin: 10px 0
border-top: thin solid $color-background
#status-bar
color: $color-text-dark-secondary
margin-left: auto
@@ -320,6 +324,182 @@ input, input.form-control
.table-row:hover
background-color: $color-background-light
/* Attract specific table tweaks */
.item-list
overflow-x: scroll
.table
background-color: white
.table-row:hover
background-color: $color-background-light
.table-cell
&.item-status
width: 5px
height: 100%
.table-head
.table-cell
text-align: center
&.highlight .collapser
color: $color-primary-dark
&.item-thumbnail
width: $items-list-thumbnail-width
&.task-type
text-transform: capitalize
span.collapser
cursor: pointer
width: 100%
display: inline-block
padding: 5px
&:hover
span.collapser
color: $color-primary
.table-body
display: table-row-group
.table-row
position: relative
&.active
background-color: $color-background-active
.table-cell
border-bottom-color: darken($color-background-active, 15%)
.table-cell:last-child
box-shadow: inset -5px 0 0 $color-primary
@include status-color-property(background-color, ' .item-status', '')
.table-cell
text-align: center
border-left: thin solid transparent
border-right: thin solid transparent
&.active
background-color: $color-background
&.highlight
background-color: rgba(white, .5)
&.task-type a:before
transform: translate(-50%, -50%) scale(1.2)
&.item-name
text-align: left
position: relative
height: 100%
a
display: flex
padding: 5px 10px
color: $color-text-dark-primary
span
margin: auto 0
&.item-thumbnail
border-left: none
border-bottom: none
img
transition: opacity 150ms ease-in-out
&.task-type
position: relative
height: 100%
overflow: hidden
white-space: nowrap
a
display: inline-block /* Each task next to each other */
vertical-align: middle
height: 100%
min-height: 100%
padding: 15px
transition: all 150ms ease-in-out
position: relative
@include status-color-property(background-color, ':before', '')
&:focus
outline: none
&:before
transform: translate(-50%, -50%) scale(1.5)
&:before
display: block
content: ''
position: absolute
width: 16px
height: 16px
border-radius: 50%
border: 2px solid transparent
+position-center-translate
transition: background-color 150ms ease-in-out, border 150ms ease-in-out
span
display: block
+position-center-translate
z-index: 1
font:
weight: bold
size: .8em
text:
align: center
transform: capitalize
color: white
&.active
opacity: 1
&:before
transform: translate(-50%, -50%) scale(1.3)
border: 2px solid white
box-shadow: 0 0 0 1px rgba($color-primary, .2), 1px 1px 0 rgba(black, .2)
&:hover
border-color: $color-primary-light
&.processing
background-image: none
&:before
+stripes-animate
+stripes(transparent, rgba($color-background-active, .6), -45deg, 15px)
animation-duration: 4s
&.active
background-image: none
&.task-add
width: auto
border-radius: initial
opacity: 0
vertical-align: middle
padding: 5px
display: flex
justify-content: center
&:hover, &:focus
opacity: 1
&:hover
&:before
opacity: .8
transform: translate(-50%, -50%) scale(1.2)
&.active:before
transform: translate(-50%, -50%) scale(1.3)
.item-list-header
a
color: $color-text-dark
+text-overflow-ellipsis
a.item-project
color: $color-text-dark-secondary
margin-left: 10px
/* Generic Statuses */
.processing
+stripes(rgba($color-background, .2), rgba($color-background, .5), -45deg, 25px)
@@ -336,6 +516,9 @@ input, input.form-control
transition: all .1s ease-in
opacity: .8
&:before
background-color: lighten($color-success, 50%) !important
.flash-off
transition: all 1s ease-out
img

2
src/styles/_config.sass
View File

@@ -92,4 +92,4 @@ $screen-md-max: $screen-lg-min - 1
$sidebar-width: 50px
$shots-list-thumbnail-width: 100px
$items-list-thumbnail-width: 100px

170
src/styles/_shots.sass
View File

@@ -1,59 +1,15 @@
#shot-list
overflow-x: scroll
.item-list.shot
.table
background-color: white
.table-row:hover
background-color: $color-background-light
.table-cell
&.shot-status
width: 5px
height: 100%
.table-head
.table-cell
text-align: center
&.highlight .collapser
color: $color-primary-dark
&.shot-thumbnail
width: $shots-list-thumbnail-width
&.task-type
text-transform: capitalize
span.collapser
cursor: pointer
width: 100%
display: inline-block
padding: 5px
&:hover
span.collapser
color: $color-primary
.table-body
display: table-row-group
.table-row
position: relative
&.active
background-color: $color-background-active
.table-cell
border-bottom-color: darken($color-background-active, 15%)
.table-cell:last-child
box-shadow: inset -5px 0 0 $color-primary
&.not-in-edit
+stripes(rgba($color-background, .1), rgba($color-background, .5), 90deg, 28px)
.table-cell
&.shot-name a
&.item-name a
color: $color-text-dark-secondary
&.shot-status
&.item-status
opacity: .2
&.task-type .task-link
@@ -62,7 +18,7 @@
background: transparent
border: 2px solid $color-text-dark-secondary
&.shot-thumbnail img
&.item-thumbnail img
opacity: .5
&.active
@@ -70,7 +26,7 @@
&:hover, &.active
.table-cell
&.shot-thumbnail img
&.item-thumbnail img
opacity: 1
&.task-type .task-link
@include status-color-property(background-color, ':before', '')
@@ -78,119 +34,3 @@
&:before
opacity: 1
border: none
@include status-color-property(background-color, ' .shot-status', '')
.table-cell
text-align: center
border-left: thin solid transparent
border-right: thin solid transparent
&.active
background-color: $color-background
&.highlight
background-color: $color-background-light
&.shot-name
text-align: left
position: relative
height: 100%
a
display: flex
padding: 5px 10px
color: $color-text-dark-primary
span
margin: auto 0
&.shot-thumbnail
border-left: none
border-bottom: none
img
transition: opacity 150ms ease-in-out
&.task-type
position: relative
height: 100%
overflow: hidden
white-space: nowrap
a
display: inline-block /* Each task next to each other */
vertical-align: middle
height: 100%
min-height: 100%
padding: 15px
transition: all 150ms ease-in-out
position: relative
@include status-color-property(background-color, ':before', '')
&:focus
outline: none
&:before
transform: translate(-50%, -50%) scale(1.5)
&:before
display: block
content: ''
position: absolute
width: 16px
height: 16px
border-radius: 50%
border: 2px solid transparent
+position-center-translate
transition: background-color 150ms ease-in-out, border 150ms ease-in-out
span
display: block
+position-center-translate
z-index: 1
font:
weight: bold
size: .8em
text:
align: center
transform: capitalize
color: white
&.active
opacity: 1
&:before
transform: translate(-50%, -50%) scale(1.3)
border: 2px solid white
box-shadow: 0 0 0 1px rgba($color-primary, .2), 1px 1px 0 rgba(black, .2)
&:hover
border-color: $color-primary-light
&.processing
background-image: none
&:before
+stripes-animate
+stripes(transparent, rgba($color-background-active, .6), -45deg, 15px)
animation-duration: 4s
&.active
background-image: none
&.task-add
width: auto
border-radius: initial
opacity: 0
vertical-align: middle
padding: 5px
display: flex
justify-content: center
&:hover, &:focus
opacity: 1
&:hover
&:before
opacity: .8
transform: translate(-50%, -50%) scale(1.2)
&.active:before
transform: translate(-50%, -50%) scale(1.3)

20
src/styles/_tasks.sass
View File

@@ -1,3 +1,6 @@
.item-list.task
overflow-x: hidden
.attract-box
margin: 10px
padding: 10px
@@ -90,10 +93,7 @@
.attract-box+.attract-box
margin-top: 0
#task-list
overflow-x: hidden
#task-add
#item-add
margin-left: auto
font-size: .85em
color: $color-primary
@@ -174,15 +174,3 @@
option.invalid_task
color: $color-danger
background-color: hsl(hue($color-danger), 80%, 90%)
.task-list-header
a
color: $color-text-dark
+text-overflow-ellipsis
a.task-project
color: $color-text-dark-secondary
margin-left: 10px
.input-group-separator
margin: 10px 0
border-top: thin solid $color-background

24
src/templates/attract/assets/for_project.jade
View File

@@ -3,21 +3,21 @@
| {% block page_title %}Assets - {{ project.name }}{% endblock %}
| {% block body %}
#col_main
.col_header.task-list-header
| {{ assets | count }} assets
a.task-project(href="{{url_for('projects.view', project_url=project.url)}}") {{ project.name }}
a#task-add(href="javascript:asset_create('{{ project.url }}');") + Create Asset
.col_header.item-list-header
| {{ assets | count }} Assets
a.item-project(href="{{url_for('projects.view', project_url=project.url)}}") {{ project.name }}
a#item-add(href="javascript:asset_create('{{ project.url }}');") + Create Asset
#shot-list
.item-list.task.col-scrollable
.table
.table-head
.table-row
.table-cell.asset-status
| {# disabled until users can actually upload a thumbnail
.table-cell.asset-thumbnail
.table-cell.item-thumbnail
span.collapser.thumbnails(title="Collapse thumbnails") Thumbnail
| #}
.table-cell.asset-name
.table-cell.item-name
span.collapser(title="Collapse name column") Name
| {% for task_type in task_types %}
.table-cell.task-type(class="{{ task_type }}")
@@ -29,10 +29,10 @@
.table-row(
id="asset-{{ asset._id }}",
class="status-{{ asset.properties.status }} {{ asset.properties.used_in_edit | yesno(' ,not-in-edit, ') }}")
.table-cell.shot-status(
.table-cell.item-status(
title="Status: {{ asset.properties.status | undertitle }}")
| {# disabled until users can actually upload a thumbnail
.table-cell.asset-thumbnail
.table-cell.item-thumbnail
a(
data-asset-id="{{ asset._id }}",
href="{{ url_for('attract.assets.perproject.view_asset', project_url=project.url, asset_id=asset._id) }}",
@@ -41,12 +41,12 @@
alt="Thumbnail",
style='width: 110px; height: {{ asset._thumbnail_height }}')
| #}
.table-cell.asset-name
.table-cell.item-name
a(
data-asset-id="{{ asset._id }}",
href="{{ url_for('attract.assets.perproject.view_asset', project_url=project.url, asset_id=asset._id) }}",
class="status-{{ asset.properties.status }} asset-link")
span(class="asset-name-{{ asset._id }}") {{ asset.name }}
span(class="item-name-{{ asset._id }}") {{ asset.name }}
| {% for task_type in task_types %}
.table-cell.task-type(class="{{ task_type }}")
| {% for task in tasks_for_assets[asset._id][task_type] %}
@@ -78,7 +78,7 @@
.col_header
span.header_text
#status-bar
#item-details
#item-details.col-scrollable
.item-details-empty
| Select a asset or Task

36
src/templates/attract/assets/view_asset_embed.jade
View File

@@ -1,23 +1,23 @@
.attract-box.shot.with-status(class="status-{{ asset.properties.status }}")
form#shot_form(onsubmit="return asset_save('{{asset._id}}', '{{ url_for('attract.assets.perproject.save', project_url=project['url'], asset_id=asset._id) }}')")
.attract-box.asset.with-status(class="status-{{ asset.properties.status }}")
form#item_form(onsubmit="return asset_save('{{asset._id}}', '{{ url_for('attract.assets.perproject.save', project_url=project['url'], asset_id=asset._id) }}')")
input(type='hidden',name='_etag',value='{{ asset._etag }}')
| {% if 'PUT' in asset.allowed_methods %}
input.item-name(
name="name",
type="text",
placeholder='Asset name',
value="{{ asset.name | hide_none }}")
| {% else %}
span.item-name {{ asset.name | hide_none }}
| {% endif %}
.input-group
| {% if 'PUT' in asset.allowed_methods %}
input.item-name(
name="name",
type="text",
placeholder='Asset Name',
value="{{ asset.name | hide_none }}")
| {% else %}
span.item-name {{ asset.name | hide_none }}
| {% endif %}
button.copy-to-clipboard.btn.item-id(
style="margin-left: auto",
name="Copy to Clipboard",
type="button",
data-clipboard-text="{{ asset._id }}",
title="Copy ID to clipboard")
| ID
button.copy-to-clipboard.btn.item-id(
name="Copy to Clipboard",
type="button",
data-clipboard-text="{{ asset._id }}",
title="Copy ID to clipboard")
| ID
| {% if 'PUT' in asset.allowed_methods %}
.input-group

24
src/templates/attract/shots/for_project.jade
View File

@@ -3,22 +3,22 @@
| {% block page_title %}Shots - {{ project.name }}{% endblock %}
| {% block body %}
#col_main
.col_header.task-list-header
.col_header.item-list-header
span(title='In the edit') {{ stats.nr_of_shots }} shots | {{ stats.total_frame_count }} frames
a.task-project(href="{{url_for('projects.view', project_url=project.url)}}") {{ project.name }}
a.item-project(href="{{url_for('projects.view', project_url=project.url)}}") {{ project.name }}
| {# Not allowed for the moment. Shots are added via the Sequencer
a#task-add(href="javascript:shot_create('{{ project.url }}');") + Create Shot
a#item-add(href="javascript:shot_create('{{ project.url }}');") + Create Shot
| #}
#shot-list
.item-list.shot.col-scrollable
.table
.table-head
.table-row
.table-cell.shot-status
.table-cell.shot-thumbnail
.table-cell.item-status
.table-cell.item-thumbnail
span.collapser.thumbnails(title="Collapse thumbnails") Thumbnail
.table-cell.shot-name
.table-cell.item-name
span.collapser(title="Collapse name column") Name
| {% for task_type in task_types %}
.table-cell.task-type(class="{{ task_type }}")
@@ -30,9 +30,9 @@
.table-row(
id="shot-{{ shot._id }}",
class="status-{{ shot.properties.status }} {{ shot.properties.used_in_edit | yesno(' ,not-in-edit, ') }}")
.table-cell.shot-status(
.table-cell.item-status(
title="Status: {{ shot.properties.status | undertitle }}")
.table-cell.shot-thumbnail
.table-cell.item-thumbnail
a(
data-shot-id="{{ shot._id }}",
href="{{ url_for('attract.shots.perproject.view_shot', project_url=project.url, shot_id=shot._id) }}",
@@ -40,12 +40,12 @@
img(src="{{ shot._thumbnail }}",
alt="Thumbnail",
style='width: 110px; height: {{ shot._thumbnail_height }}')
.table-cell.shot-name
.table-cell.item-name
a(
data-shot-id="{{ shot._id }}",
href="{{ url_for('attract.shots.perproject.view_shot', project_url=project.url, shot_id=shot._id) }}",
class="status-{{ shot.properties.status }} shot-link")
span(class="shot-name-{{ shot._id }}") {{ shot.name }}
span(class="item-name-{{ shot._id }}") {{ shot.name }}
| {% for task_type in task_types %}
.table-cell.task-type(class="{{ task_type }}")
| {% for task in tasks_for_shots[shot._id][task_type] %}
@@ -77,7 +77,7 @@
.col_header
span.header_text
#status-bar
#item-details
#item-details.col-scrollable
.item-details-empty
| Select a Shot or Task

2
src/templates/attract/shots/view_shot_embed.jade
View File

@@ -1,5 +1,5 @@
.attract-box.shot.with-status(class="status-{{ shot.properties.status }}")
form#shot_form(onsubmit="return shot_save('{{shot._id}}', '{{ url_for('attract.shots.perproject.save', project_url=project['url'], shot_id=shot._id) }}')")
form#item_form(onsubmit="return shot_save('{{shot._id}}', '{{ url_for('attract.shots.perproject.save', project_url=project['url'], shot_id=shot._id) }}')")
input(type='hidden',name='_etag',value='{{ shot._etag }}')
.input-group
span.item-name(title="Shot names can only be updated from Blender.") {{ shot.name | hide_none }}

6
src/templates/attract/tasks/for_project.jade
View File

@@ -8,9 +8,9 @@
a.task-project(href="{{url_for('projects.view', project_url=project.url)}}") {{ project.name }}
//- Dirty hack, assume a user can create a task if they can edit the project.
| {% if 'PUT' in project.allowed_methods %}
a#task-add(href="javascript:task_create(undefined, 'generic');") + Create Task
a#item-add(href="javascript:task_create(undefined, 'generic');") + Create Task
| {% endif %}
#task-list.col-list
.item-list.col-list.col-scrollable
| {% for task in tasks %}
//- NOTE: this is tightly linked to the JS in tasks.js, function task_add()
a.col-list-item.task-list-item(
@@ -32,7 +32,7 @@
.col_header
span.header_text
#status-bar
#item-details
#item-details.col-scrollable
.item-details-empty
| Select a Task
| {% endblock %}

2
src/templates/attract/tasks/task_list_for_user.jade
View File

@@ -2,7 +2,7 @@
.col_header.task-list-header
| Your Tasks ({{ task_count }})
#task-list.col-list
.item-list.col-list
| {% for task in tasks if tasks %}
//- NOTE: this is tightly linked to the JS in tasks.js, function task_add()
a.col-list-item.task-list-item(

2
src/templates/attract/tasks/view_task_embed.jade
View File

@@ -1,6 +1,6 @@
.attract-box.task.with-status(
class="status-{{ task.properties.status }}")
form#task_form(onsubmit="return task_save('{{task._id}}', '{{ url_for('attract.tasks.perproject.save', project_url=project['url'], task_id=task._id) }}')")
form#item_form(onsubmit="return task_save('{{task._id}}', '{{ url_for('attract.tasks.perproject.save', project_url=project['url'], task_id=task._id) }}')")
input(type='hidden',name='_etag',value='{{ task._etag }}')
//- NOTE: if you add fields here, also add them read-only below.
.input-group