vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: sidebar, multiselect, body tag letterspacing

Browse source 
* fixed space between multiselect pills
* fixed sidebar spacing and alignment
* added letterspacing of 0.02em in the body tag as this is the new base spacing.
This commit is contained in:
Maharshi Patel 2023-10-04 10:18:46 +05:30
parent 53c795f4b8
commit 8718b60bfc
6 changed files with 27 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frappe/public/js/frappe/dom.js
View file

@ -295,7 +295,7 @@ frappe.get_data_pill = (label, target_id = null, remove_action = null, image = n
<button class="data-pill btn">
<div class="flex align-center ellipsis">
${image ? image : ""}
<span class="pill-label ${image ? "ml-2" : ""}">${label}</span>
<span class="pill-label">${label}</span>
</div>
</button>
`);

36
frappe/public/js/frappe/form/templates/form_sidebar.html
View file

@ -45,7 +45,7 @@
<li class="flex flex-wrap">
<span class="assignments"></span>
<button class="add-assignment-btn data-pill btn">
<svg class="es-icon mr-2 icon-sm"><use href="#es-line-add-people"></use></svg>
<svg class="es-icon ml-0 icon-sm"><use href="#es-line-add-people"></use></svg>
<span class="ellipsis">{%= __("Add Assignee") %}</span>
</button>
</li>
@ -56,7 +56,7 @@
<li class="explore-full-btn hidden">
<button class="data-pill btn">
<svg class="es-icon mr-2 icon-sm">
<svg class="es-icon ml-0 icon-sm">
<use href="#es-line-folder-alt"></use>
</svg>
<span class="pill-label ellipsis">
@ -64,6 +64,21 @@
</span>
</button>
</li>
<li class="attachments-actions">
<button class="data-pill btn add-attachment-btn">
<svg class="es-icon ml-0 icon-sm">
<use href="#es-line-attachment"></use>
</svg>
<span class="pill-label ellipsis">
{%= __("Add File") %}
</span>
</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>
@ -73,21 +88,6 @@
</a>
</button>
</li>
<li class="attachments-actions">
<button class="data-pill btn add-attachment-btn">
<svg class="es-icon mr-2 icon-sm">
<use href="#es-line-attachment"></use>
</svg>
<span class="pill-label ellipsis">
{%= __("Add File") %}
</span>
</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>
</ul>
<ul class="list-unstyled sidebar-menu form-reviews">
<li class="sidebar-label reviews-label">
@ -112,7 +112,7 @@
<li class="flex flex-wrap">
<span class="shares"></span>
<button class="share-doc-btn text-muted data-pill btn">
<svg class="es-icon mr-2 icon-sm"><use href="#es-line-share"></use></svg>
<svg class="es-icon ml-0 icon-sm"><use href="#es-line-share"></use></svg>
{%= __("Invite") %}
</button>
</li>

2
frappe/public/js/frappe/ui/tags.js
View file

@ -19,7 +19,7 @@ frappe.ui.Tags = class {
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 mr-2 icon-sm"><use href="#es-line-tag"></use></svg>
<svg class="es-icon ml-0 icon-sm"><use href="#es-line-tag"></use></svg>
${__(placeholder)}
</button>`)
);

1
frappe/public/scss/common/controls.scss
View file

@ -60,6 +60,7 @@ select.form-control {
height: auto;
padding: 10px;
padding-bottom: 5px;
gap: 6px;
.link-field {
width: 100%;
}

2
frappe/public/scss/desk/global.scss
View file

@ -7,6 +7,7 @@ body {
-moz-osx-font-smoothing: grayscale;
color: var(--text-muted);
font-weight: var(--weight-regular);
letter-spacing: 0.02em;
background-color: var(--bg-color);
&.full-width {
@ -384,6 +385,7 @@ kbd {
font-family: var(--font-stack);
color: var(--text-light);
line-height: 1.2em;
letter-spacing: 0.02em;
height: 20px;
padding: 4px 8px;
}

4
frappe/public/scss/desk/sidebar.scss
View file

@ -41,6 +41,9 @@ body[data-route^="Module"] .main-menu {
.data-pill {
width: 100%;
justify-content: unset;
.es-icon {
margin: 0px 6px;
}
}
&.user-actions {
@ -405,6 +408,7 @@ body[data-route^="Module"] .main-menu {
.explore-full-btn,
.attachments-actions {
margin-bottom: var(--margin-md);
gap: 6px;
}
.show-all-btn {