Project Edit: Cleanup and styling

This commit is contained in:
2018-09-07 17:21:02 +02:00
parent 8a90cd00e9
commit 6b3f025e16
11 changed files with 196 additions and 216 deletions

View File

@@ -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,

View File

@@ -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

View File

@@ -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 %}

View File

@@ -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

View File

@@ -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) {

View File

@@ -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 %}