From 6b3f025e16c98c28566fa9b6a419338230dbdd18 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Fri, 7 Sep 2018 17:21:02 +0200 Subject: [PATCH] Project Edit: Cleanup and styling --- src/scripts/tutti/1_project-navigation.js | 4 - src/styles/_project-sharing.sass | 21 ++-- src/styles/_project.sass | 65 +--------- src/styles/blog.sass | 3 - src/styles/components/_navbar.sass | 37 +++++- .../nodes/custom/asset/video/view_embed.pug | 5 +- src/templates/projects/edit.pug | 46 ++++--- src/templates/projects/edit_layout.pug | 76 ++++++------ .../projects/edit_node_type_embed.pug | 13 +- src/templates/projects/edit_node_types.pug | 30 +++-- src/templates/projects/sharing.pug | 112 +++++++++--------- 11 files changed, 196 insertions(+), 216 deletions(-) diff --git a/src/scripts/tutti/1_project-navigation.js b/src/scripts/tutti/1_project-navigation.js index d929f28c..60042e3a 100644 --- a/src/scripts/tutti/1_project-navigation.js +++ b/src/scripts/tutti/1_project-navigation.js @@ -66,15 +66,11 @@ function containerResizeY(window_height){ var project_container = document.getElementById('project-container'); var container_offset = project_container.offsetTop; - // TODO (pablo) - see if it's used at all - // var nav_header_height = $('#project_context-header').height(); var nav_header_height = 40; var container_height = window_height - container_offset.top; var container_height_wheader = window_height - container_offset.top - nav_header_height; var window_height_minus_nav = window_height - nav_header_height - 1; // 1 is border width - $('#project_context-header').width($('#project_context-container').width()); - if ($(window).width() > 768) { $('#project-container').css( {'max-height': window_height_minus_nav + 'px', diff --git a/src/styles/_project-sharing.sass b/src/styles/_project-sharing.sass index 419e767b..03965032 100644 --- a/src/styles/_project-sharing.sass +++ b/src/styles/_project-sharing.sass @@ -93,15 +93,6 @@ ul.sharing-users-list color: lighten($color-danger, 10%) -.sharing-users-info - padding-left: 15px - border-left: thin solid $color-text-dark-hint - - p - font: - size: 1.1em - weight: 300 - .sharing-users-search .disabled color: $color-text-dark-secondary @@ -158,24 +149,26 @@ ul.list-generic list-style: none > li - padding: 5px 0 - display: flex align-items: center border-top: thin solid $color-background + display: flex + padding: 5px 0 &:first-child border-top: none &:hover .item a - color: $color-primary + color: $primary a flex: 1 + &.active + color: $primary !important + font-weight: bold + .actions margin-left: auto - .btn - font-size: .7em span color: $color-text-dark-secondary diff --git a/src/styles/_project.sass b/src/styles/_project.sass index eb301cb2..181ed7dc 100644 --- a/src/styles/_project.sass +++ b/src/styles/_project.sass @@ -143,18 +143,12 @@ body.blog #project_context-header transition: box-shadow 250ms ease-in-out z-index: $z-index-base + 3 + left: 0 + width: 100% &.is-offset box-shadow: 0 0 25px rgba(black, .2) -span#project-edit-title - position: absolute - padding: 15px 20px - font: - size: 1.1em - weight: 400 - white-space: nowrap - /* Edit Asset buttons */ .project-mode-view, @@ -241,56 +235,6 @@ ul.project-edit-tools /* // Extra asset tools in dropdown */ /* // Edit Asset buttons */ - -ul.project_nav-edit-list - list-style: none - padding: 0 - margin: $project_header-height 0 0 0 - - li - background-color: $color-background - border-bottom: 1px solid $color-background-dark - color: $color-text-dark - position: relative - - &:hover - cursor: pointer - background-color: $color-background-light - a - padding: 10px 15px - display: inline-block - width: 100% - text-decoration: none - color: $color-text-dark - - i - padding-right: 15px - - &.active - background-color: white - - a - color: $color-primary-dark - -.project_nav-toggle-btn - position: absolute - bottom: 0 - width: 100% - padding: 10px - text-align: center - color: $color-text-light-hint - cursor: pointer - - &:hover - color: $color-text-light - - i - font-size: 1.3em - - +media-xs - visibility: hidden - display: none - #project_context position: relative display: flex @@ -299,6 +243,8 @@ ul.project_nav-edit-list height: 100% background-color: white +// Add padding to project_context because project_context-header is fixed on top. +// It contains the New, Edit, Save Changes, etc. buttons. #project_context-header+#project_context padding-top: $project_header-height @@ -1678,9 +1624,6 @@ section.node-children padding: 20px .form-group - position: relative - margin: 0 auto 30px auto - &.tags .select2-container .select2-selection +input-generic diff --git a/src/styles/blog.sass b/src/styles/blog.sass index f18e665b..85523e71 100644 --- a/src/styles/blog.sass +++ b/src/styles/blog.sass @@ -99,9 +99,6 @@ padding: 20px .form-group - position: relative - margin: 0 auto 30px auto - input, textarea, select +input-generic diff --git a/src/styles/components/_navbar.sass b/src/styles/components/_navbar.sass index a339ccf9..2f2c98b4 100644 --- a/src/styles/components/_navbar.sass +++ b/src/styles/components/_navbar.sass @@ -127,19 +127,50 @@ nav.sidebar font-size: .9em -// Secondary navigation for +// Secondary navigation +$nav-secondary-bar-size: -2px .nav-secondary align-items: center - box-shadow: inset 0 -2px 0 0 $color-background + box-shadow: inset 0 $nav-secondary-bar-size 0 0 $color-background .nav-link color: $color-text cursor: pointer transition: box-shadow 150ms ease-in-out + box-shadow: inset 0 $nav-secondary-bar-size 0 0 $color-background + // Blue bar on the bottom. &:hover, &.active - box-shadow: inset 0 -2px 0 0 $primary + box-shadow: inset 0 $nav-secondary-bar-size 0 0 $primary + + i + color: $primary + + &.nav-secondary-vertical + align-items: flex-start + flex-direction: column + box-shadow: none // Last item on the list already has a box-shadow. + + > li + width: 100% // span across the whole width. + + // Blue bar on the side. + .nav-link + box-shadow: inset 0 -1px 0 0 $color-background, inset -1px 0 0 0 $color-background + + &:hover, + &.active + box-shadow: inset 0 -1px 0 0 $color-background, inset ($nav-secondary-bar-size * 1.5) 0 0 0 $primary + +// Strange 1px offset when nav-secondary is in the topbar. +// To fix .nav-link and .nav-item must be height: 100%, but this +// makes it misalign vertically since nav.navbar has align-items: center. +// Let's just add this exception for now. +nav.navbar + > .nav-secondary + position: relative + top: 1px .navbar-overlay diff --git a/src/templates/nodes/custom/asset/video/view_embed.pug b/src/templates/nodes/custom/asset/video/view_embed.pug index c678bfc6..c9146a9d 100644 --- a/src/templates/nodes/custom/asset/video/view_embed.pug +++ b/src/templates/nodes/custom/asset/video/view_embed.pug @@ -79,6 +79,8 @@ script(type="text/javascript"). } }); + this.rememberVolumePlugin(); + // Generic utility to add-buttons to the player. function addVideoPlayerButton(data) { @@ -120,11 +122,10 @@ script(type="text/javascript"). videoPlayerToggleLoop(videoPlayer, videoPlayerLoopButton); }; - this.rememberVolumePlugin(); - {% if current_user.is_authenticated %} let fetch_progress_url = '{{ url_for("users_api.get_video_progress", video_id=node._id) }}'; let report_url = '{{ url_for("users_api.set_video_progress", video_id=node._id) }}'; + this.progressPlugin({ 'report_url': report_url, 'fetch_progress_url': fetch_progress_url, diff --git a/src/templates/projects/edit.pug b/src/templates/projects/edit.pug index 9132251e..5ddacd43 100644 --- a/src/templates/projects/edit.pug +++ b/src/templates/projects/edit.pug @@ -1,29 +1,34 @@ | {% extends 'projects/edit_layout.html' %} -| {% set title = 'edit' %} + | {% block page_title %}Edit {{ project.name }}{% endblock %} +| {% set title = 'edit' %} | {% block project_context_header %} -span#project-edit-title - | Edit Project +#project_context-header.d-flex.justify-content-end.position-fixed.bg-white + ul.d-flex.list-unstyled.p-2.mb-0.h-auto.justify-content-end( + class="project-edit-tools disabled") -ul.project-edit-tools - // Edit Mode - li.button-cancel - a#item_cancel.project-mode-edit.btn.btn-sm.btn-link( - href="{{url_for('projects.view', project_url=project.url, _external=True)}}", - title="Cancel changes") - i.button-cancel-icon.pi-angle-left - | Go to Project + li.button-cancel + a#item_cancel.project-mode-edit.btn.btn-sm.btn-link( + href="{{url_for('projects.view', project_url=project.url, _external=True)}}", + title="Cancel changes") + i.button-cancel-icon.pi-angle-left + | Go to Project - li.button-save - a#item_save.project-mode-edit.btn.btn-sm.btn-outline-success.mx-2( - href="#", - title="Save changes") - i.button-save-icon.pi-check - | Save Changes + li.button-save + a.btn.btn-sm.btn-outline-success.ml-2.px-3.text-capitalize( + id="item_save", + class="project-mode-edit", + href="#", + title="Save changes") + i.button-save-icon.pi-check + | Save Changes | {% endblock %} | {% block project_context %} +.row + .col-md-12 + h5.pt-3.pl-3 Project Overview #node-edit-container form( id="node-edit-form" @@ -81,7 +86,8 @@ ul.project-edit-tools hr - ul.project-edit-tools.justify-content-end.h-auto + ul.d-flex.list-unstyled.p-2.mb-0.h-auto.justify-content-end( + class="project-edit-tools disabled") li.button-cancel a#item_cancel.project-mode-edit.btn.btn-link( href="{{url_for('projects.view', project_url=project.url, _external=True)}}", @@ -90,7 +96,9 @@ ul.project-edit-tools | Go to Project li.button-save - a#item_save.project-mode-edit.btn.btn-outline-success.ml-2( + a.btn.btn-sm.btn-outline-success.ml-2.px-3.text-capitalize( + id="item_save", + class="project-mode-edit", href="#", title="Save changes") i.button-save-icon.pi-check diff --git a/src/templates/projects/edit_layout.pug b/src/templates/projects/edit_layout.pug index 699150d4..41a79517 100644 --- a/src/templates/projects/edit_layout.pug +++ b/src/templates/projects/edit_layout.pug @@ -1,28 +1,28 @@ | {% extends 'layout.html' %} +include ../mixins/components + | {% block page_title %}Edit {{ project.name }}{% endblock %} +| {% block navigation_tabs %} ++nav-secondary() + +nav-secondary-link( + class="px-0 font-weight-bold", + href="{{url_for('projects.view', project_url=project.url, _external=True)}}") + | {{ project.name }} +| {% endblock navigation_tabs %} + | {% block body %} #project-container #project-side-container #project_sidebar ul.project-tabs.p-0 - li.tabs-thumbnail( - title="About", - data-toggle="tooltip", - data-placement="left", - class="{% if title == 'about' %}active {% endif %}{% if project.picture_square %}image{% endif %}") - a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}") - | {% if project.picture_square %} - img(src="{{ project.picture_square.thumbnail('b', api=api) }}") - | {% else %} - i.pi-home - | {% endif %} li.tabs-browse( title="Browse", data-toggle="tooltip", data-placement="left") a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}") i.pi-folder + | {% if not project.is_private %} li.tabs-search( title="Search", @@ -41,40 +41,42 @@ i.pi-cog | {% endif %} - .project_nav-toggle-btn( - title="Expand Navigation [T]", - data-toggle="tooltip", - data-placement="right") - i.pi-angle-double-left #project_nav #project_nav-container // TODO - make list a macro #project_tree.edit.bg-white - ul.project_nav-edit-list - li(class="{% if title == 'edit' %}active{% endif %}") - a(href="{{ url_for('projects.edit', project_url=project.url) }}") - i.pi-list - | Overview - li(class="{% if title == 'sharing' %}active{% endif %}") - a(href="{{ url_for('projects.sharing', project_url=project.url) }}") - i.pi-share - | Sharing - li(class="{% if title == 'edit_node_types' %}active{% endif %}") - a(href="{{ url_for('projects.edit_node_types', project_url=project.url) }}") - i.pi-puzzle - | Node Types + +nav-secondary()(class="nav-secondary-vertical") + +nav-secondary-link( + class="{% if title == 'edit' %}active{% endif %}", + href="{{ url_for('projects.edit', project_url=project.url) }}") + i.pr-3.pi-list + | Overview + + +nav-secondary-link( + class="{% if title == 'sharing' %}active{% endif %}", + href="{{ url_for('projects.sharing', project_url=project.url) }}") + i.pr-3.pi-share + | Sharing + + +nav-secondary-link( + class="{% if title == 'edit_node_types' %}active{% endif %}", + href="{{ url_for('projects.edit_node_types', project_url=project.url) }}") + i.pr-3.pi-puzzle + | Node Types + | {% for ext in ext_pages %} - li(class="{% if title == ext.name %}active{% endif %}") - a(href="{{ url_for('projects.edit_extension', project_url=project.url, extension_name=ext.name) }}") - i(class="pi-{{ext.icon}}") - | {{ext.name | title}} + +nav-secondary-link( + class="{% if title == ext.name %}active{% endif %}", + href="{{ url_for('projects.edit_extension', project_url=project.url, extension_name=ext.name) }}") + i(class="pr-3 pi-{{ ext.icon }}") + | {{ ext.name | title }} | {% endfor %} - #project_context-container - #project_context-header.bg-white - | {% block project_context_header %} - | {% endblock %} + + #project_context-container.border-left + | {% block project_context_header %} + | {% endblock %} #project_context | {% block project_context %} diff --git a/src/templates/projects/edit_node_type_embed.pug b/src/templates/projects/edit_node_type_embed.pug index aff9e8b4..127d8fa6 100644 --- a/src/templates/projects/edit_node_type_embed.pug +++ b/src/templates/projects/edit_node_type_embed.pug @@ -17,13 +17,16 @@ form( .row .col-md-9 - h3 Editing: {{ node_type['name'] }} + h5.text-info {{ node_type['name'] | undertitle }} + .col-md-3 - button.js-form-save.btn.btn-outline-success.pull-right(style="margin-top: 15px;") + button.btn.btn-sm.btn-outline-success.float-right.px-3( + class="js-form-save") + i.pr-2.pi-check | Save Changes .row - .col-md-12 + .col-md-12.pt-2 | {% for field in form %} | {% if field.name == 'csrf_token' %} | {{ field }} @@ -46,7 +49,9 @@ form( | {% endif %} | {% endfor %} - button.js-form-save.btn.btn-outline-success.pull-right + button.btn.btn-sm.btn-outline-success.float-right.px-3( + class="js-form-save") + i.pr-2.pi-check | Save Changes diff --git a/src/templates/projects/edit_node_types.pug b/src/templates/projects/edit_node_types.pug index eaedbe56..029c5122 100644 --- a/src/templates/projects/edit_node_types.pug +++ b/src/templates/projects/edit_node_types.pug @@ -2,29 +2,30 @@ | {% set title = 'edit_node_types' %} | {% block page_title %}Node Types: {{ project.name }}{% endblock %} -| {% block project_context_header %} -span#project-edit-title - | Edit Project Node Types -| {% endblock %} - | {% block project_context %} #node-edit-container - div(id="node-edit-form") + #node-edit-form .row - .col-md-9 - p. + .col-md-12 + h5 Everything is a Node + + p.mb-1. Nodes are all the items that can be found in a project. - Everything is a node: a file, a folder, a comment. They are - defined with custom properties to be properly displayed. + A file, a folder, a comment, everything is a node. + #[br] + They are defined with custom properties to be properly displayed. + + hr + .row .col-md-4.col-sm-6 - h3 Node Types + h5 Node Types | {% if current_user.has_cap('edit-project-node-types') %} ul.list-generic | {% for node_type in project.node_types %} li - a.js-item-open( + a.js-item-open.text-muted( href="{{ url_for('projects.edit_node_type', project_url=project.url, node_type_name=node_type.name) }}", data-url="{{ url_for('projects.edit_node_type', project_url=project.url, node_type_name=node_type.name) }}") | {{ node_type.name | undertitle }} @@ -33,7 +34,7 @@ span#project-edit-title | {% endfor %} | {% endif %} - .col-md-8.col-sm-6 + .col-md-8.col-sm-6.border-left #node-edit-embed | {% endblock %} @@ -45,6 +46,9 @@ script. $('.js-item-open').on('click', function(e){ e.preventDefault(); + $('.js-item-open').removeClass('active'); + $(this).addClass('active'); + var item_url = $(this).data('url'); $.get(item_url, function(item_data) { diff --git a/src/templates/projects/sharing.pug b/src/templates/projects/sharing.pug index 81517316..1da20871 100644 --- a/src/templates/projects/sharing.pug +++ b/src/templates/projects/sharing.pug @@ -2,70 +2,70 @@ | {% set title = 'sharing' %} | {% block page_title %}Sharing: {{ project.name }}{% endblock %} -| {% block project_context_header %} -span#project-edit-title - | Manage team members for this project -| {% endblock %} - | {% block project_context %} #node-edit-container #node-edit-form - .col-md-6 - | {% if (project.user == current_user.objectid or current_user.has_cap('admin')) %} - .sharing-users-search - .form-group + .row + .col-md-12 + h5.mb-1 Team Management + + hr + + .row + .col-md-6 + ul.sharing-users-list + | {% for user in users %} + li.sharing-users-item( + user-id="{{ user['_id'] }}", + class="{% if current_user.objectid == user['_id'] %}self{% endif %}") + .sharing-users-avatar + img(src="{{ user['avatar'] }}") + .sharing-users-details + span.sharing-users-name + | {{user['full_name']}} + | {% if project.user == user['_id'] and current_user.objectid == user['_id'] %} + small (You, owner) + | {% elif project.user == user['_id'] %} + small (Owner) + | {% elif current_user.objectid == user['_id'] %} + small (You) + | {% endif %} + span.sharing-users-extra {{user['username']}} + .sharing-users-action + | {# Only allow deletion if we are: admin, project owners, or current_user in the team #} + | {% if current_user.has_cap('admin') or (project.user == current_user.objectid) or (current_user.objectid == user['_id']) %} + + | {% if project.user == user['_id'] %} + span + i.pi-happy(title="Hi boss!") + | {% elif current_user.objectid == user['_id'] %} + button.user-remove(title="Leave this project") Leave + | {% else %} + button.user-remove(title="Remove this user from your project") + i.pi-trash + | {% endif %} + + | {% endif %} + | {% endfor %} + + .col-md-6 + | {% if (project.user == current_user.objectid or current_user.has_cap('admin')) %} + .sharing-users-search input#user-select.form-control( name='contacts', type='text', placeholder='Add team members by name') - | {% else %} - .sharing-users-search - .disabled Only project owners & admins can manage users - | {% endif %} + | {% else %} + .sharing-users-search + .disabled Only project owners & admins can manage users + | {% endif %} - - ul.sharing-users-list - | {% for user in users %} - li.sharing-users-item( - user-id="{{ user['_id'] }}", - class="{% if current_user.objectid == user['_id'] %}self{% endif %}") - .sharing-users-avatar - img(src="{{ user['avatar'] }}") - .sharing-users-details - span.sharing-users-name - | {{user['full_name']}} - | {% if project.user == user['_id'] and current_user.objectid == user['_id'] %} - small (You, owner) - | {% elif project.user == user['_id'] %} - small (Owner) - | {% elif current_user.objectid == user['_id'] %} - small (You) - | {% endif %} - span.sharing-users-extra {{user['username']}} - .sharing-users-action - | {# Only allow deletion if we are: admin, project owners, or current_user in the team #} - | {% if current_user.has_cap('admin') or (project.user == current_user.objectid) or (current_user.objectid == user['_id']) %} - - | {% if project.user == user['_id'] %} - span - i.pi-happy(title="Hi boss!") - | {% elif current_user.objectid == user['_id'] %} - button.user-remove(title="Leave this project") Leave - | {% else %} - button.user-remove(title="Remove this user from your project") - i.pi-trash - | {% endif %} - - | {% endif %} - | {% endfor %} - - .col-md-6 - .sharing-users-info - h4 What can team members do? - p. - Team members are able to upload new content to the project, - as well as view, edit, delete, and comment on the content - previously created. + .border-left.pl-3.mt-4 + h6 What can team members do? + p + Team members are able to upload new content to the project, + as well as view, edit, delete, and comment on the content + previously created. | {% endblock %}