fix: sidebar redesign
* replaced all full width pill buttons with the labels and plus icons * added a click listener to avatars for opening share dialog. * made attachments label a link where user can click and open all of the files as there isn't enough space for explore buttons in new design
This commit is contained in:
Maharshi Patel
parent
8718b60bfc
commit
aaf40dc583
8 changed files with 129 additions and 128 deletions
|
|
@ -2,7 +2,7 @@ const verify_attachment_visibility = (document, is_private) => {
|
|||
cy.visit(`/app/${document}`);
|
||||
|
||||
const assertion = is_private ? "be.checked" : "not.be.checked";
|
||||
cy.findByRole("button", { name: "Add File" }).click();
|
||||
cy.get(".add-attachment-btn").click();
|
||||
|
||||
cy.get_open_dialog()
|
||||
.find(".file-upload-area")
|
||||
|
|
@ -27,7 +27,7 @@ const attach_file = (file, no_of_files = 1) => {
|
|||
);
|
||||
}
|
||||
|
||||
cy.findByRole("button", { name: "Add File" }).click();
|
||||
cy.get(".add-attachment-btn").click();
|
||||
cy.get_open_dialog().find(".file-upload-area").selectFile(files, {
|
||||
action: "drag-drop",
|
||||
});
|
||||
|
|
@ -62,11 +62,8 @@ context("Sidebar", () => {
|
|||
}).then((todo) => {
|
||||
cy.visit(`/app/todo/${todo.message.name}`);
|
||||
|
||||
// explore icon btn should be hidden as there are no attachments
|
||||
cy.get(".explore-btn").should("be.hidden");
|
||||
|
||||
attach_file("cypress/fixtures/sample_image.jpg");
|
||||
cy.get(".explore-btn").should("be.visible");
|
||||
cy.get(".explore-link").should("be.visible");
|
||||
cy.get(".show-all-btn").should("be.hidden");
|
||||
|
||||
// attach 10 images
|
||||
|
|
@ -75,9 +72,8 @@ context("Sidebar", () => {
|
|||
|
||||
// attach 1 more image to reach attachment limit
|
||||
attach_file("cypress/fixtures/sample_attachments/attachment-11.txt");
|
||||
cy.get(".explore-full-btn").should("be.visible");
|
||||
cy.get(".attachments-actions").should("be.hidden");
|
||||
cy.get(".explore-btn").should("be.hidden");
|
||||
cy.get(".add-attachment-btn").should("be.hidden");
|
||||
cy.get(".explore-link").should("be.visible");
|
||||
|
||||
// test "Show All" button
|
||||
cy.get(".attachment-row").should("have.length", 10);
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@ frappe.ui.form.Attachments = class Attachments {
|
|||
me.new_attachment();
|
||||
});
|
||||
|
||||
this.parent.find(".explore-btn").click(() => {
|
||||
this.parent.find(".explore-link").click(() => {
|
||||
if (!this.frm.attachments.get_attachments()?.length) return;
|
||||
frappe.open_in_new_tab = true;
|
||||
frappe.set_route("List", "File", {
|
||||
attached_to_doctype: this.frm.doctype,
|
||||
|
|
@ -51,8 +52,7 @@ frappe.ui.form.Attachments = class Attachments {
|
|||
this.parent.find(".attachment-row").remove();
|
||||
|
||||
var max_reached = this.max_reached();
|
||||
this.add_attachment_wrapper.toggle(!max_reached);
|
||||
this.setup_expanded_explore_button(max_reached);
|
||||
this.add_attachment_wrapper.find(".add-attachment-btn").toggle(!max_reached);
|
||||
|
||||
// add attachment objects
|
||||
var attachments = this.get_attachments();
|
||||
|
|
@ -60,21 +60,6 @@ frappe.ui.form.Attachments = class Attachments {
|
|||
this.setup_show_all_button(attachments);
|
||||
}
|
||||
|
||||
setup_expanded_explore_button(max_reached) {
|
||||
if (!max_reached) {
|
||||
this.parent.find(".explore-full-btn").addClass("hidden");
|
||||
return;
|
||||
}
|
||||
|
||||
this.parent.find(".explore-full-btn").removeClass("hidden");
|
||||
this.parent.find(".explore-full-btn").click(() => {
|
||||
frappe.set_route("List", "File", {
|
||||
attached_to_doctype: this.frm.doctype,
|
||||
attached_to_name: this.frm.docname,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
setup_show_all_button(attachments) {
|
||||
// show button if there is more to show and user has not clicked on "Show All"
|
||||
let is_slicable = attachments.length > this.attachments_page_length;
|
||||
|
|
@ -124,7 +109,6 @@ frappe.ui.form.Attachments = class Attachments {
|
|||
if (!attachments.length) {
|
||||
// If no attachments in totality
|
||||
this.attachments_label.removeClass("has-attachments");
|
||||
this.parent.find(".explore-btn").toggle(false); // hide explore icon button
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -170,8 +154,6 @@ frappe.ui.form.Attachments = class Attachments {
|
|||
$(`<li class="attachment-row">`)
|
||||
.append(frappe.get_data_pill(file_label, fileid, remove_action, icon))
|
||||
.insertAfter(this.add_attachment_wrapper);
|
||||
|
||||
this.parent.find(".explore-btn").toggle(true); // show explore icon button if hidden
|
||||
}
|
||||
|
||||
get_file_url(attachment) {
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@ frappe.ui.form.Review = class Review {
|
|||
</span>
|
||||
</div>
|
||||
`);
|
||||
this.reviews.prepend(review_pill);
|
||||
this.reviews.append(review_pill);
|
||||
this.setup_detail_popover(review_pill, log);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,8 +32,12 @@ frappe.ui.form.Share = class Share {
|
|||
}
|
||||
|
||||
this.shares.show();
|
||||
let avatar_group = frappe.avatar_group(shared_users, 5, { align: "left", overlap: true });
|
||||
avatar_group.on("click", () => {
|
||||
this.frm.share_doc();
|
||||
});
|
||||
// REDESIGN-TODO: handle "shared with everyone"
|
||||
this.shares.append(frappe.avatar_group(shared_users, 5, { align: "left", overlap: true }));
|
||||
this.shares.append(avatar_group);
|
||||
}
|
||||
show() {
|
||||
var me = this;
|
||||
|
|
|
|||
|
|
@ -39,82 +39,79 @@
|
|||
{% } %}
|
||||
</ul>
|
||||
<ul class="list-unstyled sidebar-menu form-assignments">
|
||||
<li class="sidebar-label">
|
||||
{%= __("Assigned To") %}
|
||||
</li>
|
||||
<li class="flex flex-wrap">
|
||||
<span class="assignments"></span>
|
||||
<button class="add-assignment-btn data-pill btn">
|
||||
<svg class="es-icon ml-0 icon-sm"><use href="#es-line-add-people"></use></svg>
|
||||
<span class="ellipsis">{%= __("Add Assignee") %}</span>
|
||||
</button>
|
||||
<li>
|
||||
<span class="form-sidebar-items">
|
||||
<span class="add-assignment-label">
|
||||
<svg class="es-icon ml-0 icon-sm"><use href="#es-line-add-people"></use></svg>
|
||||
<span class="ellipsis">{%= __("Assigned To") %}</span>
|
||||
</span>
|
||||
<button class="add-assignment-btn btn btn-link icon-btn">
|
||||
<svg class="es-icon icon-sm"><use href="#es-line-add"></use></svg>
|
||||
</button>
|
||||
</span>
|
||||
<div class="assignments"></div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="list-unstyled sidebar-menu form-attachments">
|
||||
<li class="sidebar-label attachments-label">
|
||||
<span class="ellipsis">{%= __("Attachments") %}</span>
|
||||
|
||||
<li class="explore-full-btn hidden">
|
||||
<button class="data-pill btn">
|
||||
<svg class="es-icon ml-0 icon-sm">
|
||||
<use href="#es-line-folder-alt"></use>
|
||||
</svg>
|
||||
<span class="pill-label ellipsis">
|
||||
{%= __("Explore Files") %}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="attachments-actions">
|
||||
<button class="data-pill btn add-attachment-btn">
|
||||
<li class="attachments-actions">
|
||||
<span class="form-sidebar-items">
|
||||
<span>
|
||||
<svg class="es-icon ml-0 icon-sm">
|
||||
<use href="#es-line-attachment"></use>
|
||||
</svg>
|
||||
<span class="pill-label ellipsis">
|
||||
{%= __("Add File") %}
|
||||
</span>
|
||||
<a class="pill-label ellipsis explore-link">
|
||||
{%= __("Attachments") %}
|
||||
</a>
|
||||
</span>
|
||||
<button class="add-attachment-btn btn btn-link icon-btn">
|
||||
<svg class="es-icon icon-sm"><use href="#es-line-add"></use></svg>
|
||||
</button>
|
||||
<button class="text-muted btn btn-default icon-btn explore-btn">
|
||||
<svg class="es-icon icon-sm">
|
||||
<use href="#es-line-folder-alt"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<button class="show-all-btn hidden">
|
||||
<svg class="es-icon icon-sm">
|
||||
<use href="#es-line-preview"></use>
|
||||
</svg>
|
||||
<a href="" class="pill-label ellipsis">
|
||||
{%= __("Show All") %}
|
||||
</a>
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
<a class="show-all-btn hidden" href="">
|
||||
<svg class="es-icon icon-sm">
|
||||
<use href="#es-line-preview"></use>
|
||||
</svg>
|
||||
<span class="pill-label ellipsis">
|
||||
{%= __("Show All") %}
|
||||
</span>
|
||||
</a>
|
||||
</ul>
|
||||
<ul class="list-unstyled sidebar-menu form-reviews">
|
||||
<li class="sidebar-label reviews-label">
|
||||
<svg class="icon icon-sm"><use href="#icon-review"></use></svg>
|
||||
{%= __("Reviews") %}
|
||||
</li>
|
||||
<li class="reviews">
|
||||
<button class="add-review-btn text-muted btn btn-default icon-btn">
|
||||
<svg class="icon icon-sm"><use href="#icon-add"></use></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li class="reviews">
|
||||
<span class="form-sidebar-items">
|
||||
<span>
|
||||
<svg class="es-icon ml-0 icon-sm"><use href="#es-line-star"></use></svg>
|
||||
<span class="ellipsis">{%= __("Reviews") %}</span>
|
||||
</span>
|
||||
<button class="add-review-btn btn btn-link icon-btn">
|
||||
<svg class="es-icon icon-sm"><use href="#es-line-add"></use></svg>
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="list-unstyled sidebar-menu form-tags">
|
||||
<li class="sidebar-label tags-label">
|
||||
{%= __("Tags") %}
|
||||
</li>
|
||||
<li>
|
||||
<span class="form-sidebar-items">
|
||||
<span>
|
||||
<svg class="es-icon ml-0 icon-sm"><use href="#es-line-star"></use></svg>
|
||||
<span class="tags-label ellipsis">{%= __("Tags") %}</span>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="list-unstyled sidebar-menu form-shared">
|
||||
<li class="sidebar-label">
|
||||
{%= __("Share") %}
|
||||
</li>
|
||||
<li class="flex flex-wrap">
|
||||
<span class="shares"></span>
|
||||
<button class="share-doc-btn text-muted data-pill btn">
|
||||
<svg class="es-icon ml-0 icon-sm"><use href="#es-line-share"></use></svg>
|
||||
{%= __("Invite") %}
|
||||
</button>
|
||||
<li>
|
||||
<span class="form-sidebar-items">
|
||||
<span class="share-label">
|
||||
<svg class="es-icon ml-0 icon-sm"><use href="#es-line-add-people"></use></svg>
|
||||
<span class="ellipsis">{%= __("Share") %}</span>
|
||||
</span>
|
||||
<button class="share-doc-btn btn btn-link icon-btn">
|
||||
<svg class="es-icon icon-sm"><use href="#es-line-add"></use></svg>
|
||||
</button>
|
||||
</span>
|
||||
<div class="shares"></div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="list-unstyled sidebar-menu followed-by-section">
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ frappe.ui.TagEditor = class TagEditor {
|
|||
|
||||
this.tags = new frappe.ui.Tags({
|
||||
parent: this.wrapper,
|
||||
placeholder: __("Add Tags"),
|
||||
placeholder: '<svg class="es-icon icon-sm"><use href="#es-line-add"></use></svg>',
|
||||
onTagAdd: (tag) => {
|
||||
if (me.initialized && !me.refreshing) {
|
||||
return frappe.call({
|
||||
|
|
|
|||
|
|
@ -17,13 +17,11 @@ frappe.ui.Tags = class {
|
|||
this.$input = $(`<input class="tags-input form-control"></input>`);
|
||||
|
||||
this.$inputWrapper = this.get_list_element(this.$input);
|
||||
this.$placeholder = this.get_list_element(
|
||||
$(`<button class="tags-btn text-muted data-pill btn" id="add_tags">
|
||||
<svg class="es-icon ml-0 icon-sm"><use href="#es-line-tag"></use></svg>
|
||||
${__(placeholder)}
|
||||
</button>`)
|
||||
);
|
||||
this.$placeholder.appendTo(this.$ul);
|
||||
this.$placeholder =
|
||||
$(`<button class="add-tags-btn text-muted btn btn-link icon-btn" id="add_tags">
|
||||
${__(placeholder)}
|
||||
</button>`);
|
||||
this.$placeholder.appendTo(this.$ul.find(".form-sidebar-items"));
|
||||
this.$inputWrapper.appendTo(this.$ul);
|
||||
|
||||
this.deactivate();
|
||||
|
|
|
|||
|
|
@ -67,14 +67,28 @@ body[data-route^="Module"] .main-menu {
|
|||
// form sidebar
|
||||
.form-sidebar {
|
||||
.sidebar-menu {
|
||||
margin-bottom: var(--margin-lg);
|
||||
margin-bottom: var(--margin-sm);
|
||||
|
||||
.form-sidebar-items {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: var(--padding-sm);
|
||||
|
||||
.icon-btn {
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-tags {
|
||||
.form-tag-row {
|
||||
margin-top: var(--margin-sm);
|
||||
margin-bottom: 0;
|
||||
|
||||
.form-tag-row:not(:last-child) {
|
||||
margin-bottom: var(--margin-sm);
|
||||
}
|
||||
|
||||
.tag-area {
|
||||
margin-top: -3px;
|
||||
margin-left: -4px;
|
||||
|
|
@ -386,62 +400,72 @@ body[data-route^="Module"] .main-menu {
|
|||
}
|
||||
|
||||
.attachment-row, .form-tag-row {
|
||||
margin-bottom: var(--margin-sm);
|
||||
margin-bottom: 3px;
|
||||
max-width: 100%;
|
||||
.data-pill {
|
||||
justify-content: space-between;
|
||||
background-color: var(--subtle-fg);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.attachment-row {
|
||||
.data-pill {
|
||||
background-color: unset;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
padding-left: var(--padding-md);
|
||||
}
|
||||
}
|
||||
|
||||
.form-tag-row {
|
||||
margin-right: var(--margin-xs);
|
||||
.data-pill {
|
||||
background-color: var(--subtle-fg);
|
||||
}
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.attachments-actions, .explore-full-btn > .data-pill.btn {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
.explore-link {
|
||||
margin-top: var(--margin-sm);
|
||||
}
|
||||
|
||||
.explore-full-btn,
|
||||
.attachments-actions {
|
||||
margin-bottom: var(--margin-md);
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.show-all-btn {
|
||||
--icon-stroke: var(--text-light);
|
||||
width: 100%;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--bg-color);
|
||||
text-align: start;
|
||||
padding-left: 8px;
|
||||
margin-top: var(--margin-sm);
|
||||
margin-left: var(--margin-md);
|
||||
margin-bottom: var(--margin-sm);
|
||||
color: var(--text-light);
|
||||
|
||||
a.pill-label.ellipsis {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-assignments {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.form-assignments, .form-shared {
|
||||
.assignments, .shares {
|
||||
margin-bottom: var(--margin-xs);
|
||||
margin: var(--margin-xs) 0px;
|
||||
}
|
||||
}
|
||||
.add-assignment-btn,
|
||||
.add-attachment-btn,
|
||||
.add-review-btn,
|
||||
.shares,
|
||||
.add-tags-btn,
|
||||
.share-doc-btn,
|
||||
.followed-by {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.add-review-btn,
|
||||
.share-doc-btn,
|
||||
.add-assignment-btn {
|
||||
border-radius: 50%;
|
||||
width: unset;
|
||||
height: unset;
|
||||
margin-right: 0;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-reviews {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue