Merge branch 'develop' into update-cy-new
This commit is contained in:
mergify[bot]
GitHub
commit
0dbdb7847a
144 changed files with 3519 additions and 1005 deletions
|
|
@ -26,7 +26,7 @@ context("Awesome Bar", () => {
|
|||
cy.get("@awesome_bar").type("{enter}");
|
||||
cy.get(".title-text").should("contain", "To Do");
|
||||
cy.wait(200);
|
||||
const name_filter = cy.findByPlaceholderText("ID");
|
||||
const name_filter = cy.get('[data-original-title="ID"] > input');
|
||||
name_filter.should("have.value", "%test%");
|
||||
cy.clear_filters();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -101,10 +101,6 @@ context("Form", () => {
|
|||
cy.get("@email_input2").type(valid_email, { waitForAnimations: false });
|
||||
|
||||
cy.get("@row1").click();
|
||||
cy.get("@email_input1").should(($div) => {
|
||||
const style = window.getComputedStyle($div[0]);
|
||||
expect(style.backgroundColor).to.equal(expectBackgroundColor);
|
||||
});
|
||||
cy.get("@email_input1").should("have.class", "invalid");
|
||||
|
||||
cy.get("@row2").click();
|
||||
|
|
|
|||
|
|
@ -107,8 +107,8 @@ context("Form Builder", () => {
|
|||
|
||||
cy.get_open_dialog().find(".msgprint").should("contain", "In Global Search");
|
||||
});
|
||||
|
||||
it("Drag Field/Column/Section & Tab", () => {
|
||||
// not important and was flaky on CI
|
||||
it.skip("Drag Field/Column/Section & Tab", () => {
|
||||
cy.visit(`/app/doctype/${doctype_name}`);
|
||||
cy.findByRole("tab", { name: "Form" }).click();
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ context("List Paging", () => {
|
|||
cy.get(".list-paging-area .list-count").should("contain.text", "300 of");
|
||||
|
||||
// check if refresh works after load more
|
||||
cy.get('.page-head .standard-actions [data-original-title="Refresh"]').click();
|
||||
cy.get('.page-head .standard-actions [data-original-title="Reload List"]').click();
|
||||
cy.get(".list-paging-area .list-count").should("contain.text", "300 of");
|
||||
|
||||
cy.get('.list-paging-area .btn-group .btn-paging[data-value="500"]').click();
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ context("List View", () => {
|
|||
cy.go_to_list("ToDo");
|
||||
cy.clear_filters();
|
||||
cy.get(".list-header-subject > .list-subject > .list-check-all").click();
|
||||
cy.get("button[data-original-title='Refresh']").click();
|
||||
cy.get("button[data-original-title='Reload List']").click();
|
||||
cy.get(".list-row-container .list-row-checkbox:checked").should("be.visible");
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ context("List View Settings", () => {
|
|||
cy.clear_filters();
|
||||
cy.wait(300);
|
||||
cy.get(".list-count").should("contain", "20 of");
|
||||
cy.get("[href='#icon-small-message']").should("be.visible");
|
||||
cy.get("[href='#es-line-chat-alt']").should("be.visible");
|
||||
cy.get(".menu-btn-group button").click();
|
||||
cy.get(".dropdown-menu li").filter(":visible").contains("List Settings").click();
|
||||
cy.get(".modal-dialog").should("contain", "DocType Settings");
|
||||
|
|
@ -29,7 +29,7 @@ context("List View Settings", () => {
|
|||
|
||||
cy.get(".list-count").should("be.empty");
|
||||
cy.get(".list-sidebar .list-tags").should("not.exist");
|
||||
cy.get("[href='#icon-small-message']").should("not.be.visible");
|
||||
cy.get("[href='#es-line-chat-alt']").should("not.be.visible");
|
||||
|
||||
cy.get(".menu-btn-group button").click({ force: true });
|
||||
cy.get(".dropdown-menu li").filter(":visible").contains("List Settings").click();
|
||||
|
|
|
|||
|
|
@ -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: "Attach File" }).click();
|
||||
cy.findByRole("button", { name: "Add File" }).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: "Attach File" }).click();
|
||||
cy.findByRole("button", { name: "Add File" }).click();
|
||||
cy.get_open_dialog().find(".file-upload-area").selectFile(files, {
|
||||
action: "drag-drop",
|
||||
});
|
||||
|
|
@ -99,8 +99,9 @@ context("Sidebar", () => {
|
|||
|
||||
//Assigning a doctype to a user
|
||||
cy.visit(`/app/todo/${todo_name}`);
|
||||
cy.get(".form-assignments > .flex > .text-muted").click();
|
||||
cy.get(".add-assignment-btn").click();
|
||||
cy.get_field("assign_to_me", "Check").click();
|
||||
cy.wait(1000);
|
||||
cy.get(".modal-footer > .standard-actions > .btn-primary").click();
|
||||
cy.visit("/app/todo");
|
||||
cy.click_sidebar_button("Assigned To");
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ from frappe import _
|
|||
from frappe.desk.reportview import validate_args
|
||||
from frappe.model.db_query import check_parent_permission
|
||||
from frappe.utils import get_safe_filters
|
||||
from frappe.utils.deprecations import deprecated
|
||||
|
||||
if TYPE_CHECKING:
|
||||
from frappe.model.document import Document
|
||||
|
|
@ -325,6 +326,7 @@ def get_password(doctype, name, fieldname):
|
|||
|
||||
|
||||
@frappe.whitelist()
|
||||
@deprecated
|
||||
def get_js(items):
|
||||
"""Load JS code files. Will also append translations
|
||||
and extend `frappe._messages`
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ DEFAULT_LOGTYPES_RETENTION = {
|
|||
"Prepared Report": 30,
|
||||
"Webhook Request Log": 30,
|
||||
"Integration Request": 90,
|
||||
"Unhandled Email": 30,
|
||||
"Reminder": 30,
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -438,6 +438,7 @@ def get_workspace_sidebar_items():
|
|||
"public",
|
||||
"module",
|
||||
"icon",
|
||||
"indicator_color",
|
||||
"is_hidden",
|
||||
]
|
||||
all_pages = frappe.get_all(
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"module",
|
||||
"column_break_3",
|
||||
"icon",
|
||||
"indicator_color",
|
||||
"restrict_to_domain",
|
||||
"hide_custom",
|
||||
"public",
|
||||
|
|
@ -207,11 +208,18 @@
|
|||
"fieldtype": "Table",
|
||||
"label": "Custom Blocks",
|
||||
"options": "Workspace Custom Block"
|
||||
},
|
||||
{
|
||||
"depends_on": "doc.icon",
|
||||
"fieldname": "indicator_color",
|
||||
"fieldtype": "Select",
|
||||
"label": "Indicator Color",
|
||||
"options": "green\ncyan\nblue\norange\nyellow\ngray\ngrey\nred\npink\ndarkgrey\npurple\nlight-blue"
|
||||
}
|
||||
],
|
||||
"in_create": 1,
|
||||
"links": [],
|
||||
"modified": "2023-06-08 14:52:38.110224",
|
||||
"modified": "2023-08-25 15:04:03.419848",
|
||||
"modified_by": "Administrator",
|
||||
"module": "Desk",
|
||||
"name": "Workspace",
|
||||
|
|
|
|||
|
|
@ -36,6 +36,20 @@ class Workspace(Document):
|
|||
custom_blocks: DF.Table[WorkspaceCustomBlock]
|
||||
for_user: DF.Data | None
|
||||
hide_custom: DF.Check
|
||||
indicator_color: DF.Literal[
|
||||
"green",
|
||||
"cyan",
|
||||
"blue",
|
||||
"orange",
|
||||
"yellow",
|
||||
"gray",
|
||||
"grey",
|
||||
"red",
|
||||
"pink",
|
||||
"darkgrey",
|
||||
"purple",
|
||||
"light-blue",
|
||||
]
|
||||
is_hidden: DF.Check
|
||||
label: DF.Data
|
||||
links: DF.Table[WorkspaceLink]
|
||||
|
|
@ -232,6 +246,7 @@ def new_page(new_page):
|
|||
doc = frappe.new_doc("Workspace")
|
||||
doc.title = page.get("title")
|
||||
doc.icon = page.get("icon")
|
||||
doc.indicator_color = page.get("indicator_color")
|
||||
doc.content = page.get("content")
|
||||
doc.parent_page = page.get("parent_page")
|
||||
doc.label = page.get("label")
|
||||
|
|
@ -264,13 +279,14 @@ def save_page(title, public, new_widgets, blocks):
|
|||
|
||||
|
||||
@frappe.whitelist()
|
||||
def update_page(name, title, icon, parent, public):
|
||||
def update_page(name, title, icon, indicator_color, parent, public):
|
||||
public = frappe.parse_json(public)
|
||||
doc = frappe.get_doc("Workspace", name)
|
||||
|
||||
if doc:
|
||||
doc.title = title
|
||||
doc.icon = icon
|
||||
doc.indicator_color = indicator_color
|
||||
doc.parent_page = parent
|
||||
if doc.public != public:
|
||||
doc.sequence_id = frappe.db.count("Workspace", {"public": public}, cache=True)
|
||||
|
|
@ -344,6 +360,7 @@ def duplicate_page(page_name, new_page):
|
|||
doc = frappe.copy_doc(old_doc)
|
||||
doc.title = new_page.get("title")
|
||||
doc.icon = new_page.get("icon")
|
||||
doc.indicator_color = new_page.get("indicator_color")
|
||||
doc.parent_page = new_page.get("parent") or ""
|
||||
doc.public = new_page.get("is_public")
|
||||
doc.for_user = ""
|
||||
|
|
|
|||
|
|
@ -259,24 +259,12 @@ def get_context(context):
|
|||
message = frappe.render_template(self.message, context)
|
||||
if self.sender and self.sender_email:
|
||||
sender = formataddr((self.sender, self.sender_email))
|
||||
frappe.sendmail(
|
||||
recipients=recipients,
|
||||
subject=subject,
|
||||
sender=sender,
|
||||
cc=cc,
|
||||
bcc=bcc,
|
||||
message=message,
|
||||
reference_doctype=doc.doctype,
|
||||
reference_name=doc.name,
|
||||
attachments=attachments,
|
||||
expose_recipients="header",
|
||||
print_letterhead=((attachments and attachments[0].get("print_letterhead")) or False),
|
||||
)
|
||||
|
||||
communication = None
|
||||
# Add mail notification to communication list
|
||||
# No need to add if it is already a communication.
|
||||
if doc.doctype != "Communication":
|
||||
make_communication(
|
||||
communication = make_communication(
|
||||
doctype=doc.doctype,
|
||||
name=doc.name,
|
||||
content=message,
|
||||
|
|
@ -289,7 +277,22 @@ def get_context(context):
|
|||
cc=cc,
|
||||
bcc=bcc,
|
||||
communication_type="Automated Message",
|
||||
)
|
||||
).get("name")
|
||||
|
||||
frappe.sendmail(
|
||||
recipients=recipients,
|
||||
subject=subject,
|
||||
sender=sender,
|
||||
cc=cc,
|
||||
bcc=bcc,
|
||||
message=message,
|
||||
reference_doctype=doc.doctype,
|
||||
reference_name=doc.name,
|
||||
attachments=attachments,
|
||||
expose_recipients="header",
|
||||
print_letterhead=((attachments and attachments[0].get("print_letterhead")) or False),
|
||||
communication=communication,
|
||||
)
|
||||
|
||||
def send_a_slack_msg(self, doc, context):
|
||||
send_slack_message(
|
||||
|
|
|
|||
|
|
@ -20,10 +20,12 @@ class UnhandledEmail(Document):
|
|||
reason: DF.LongText | None
|
||||
uid: DF.Data | None
|
||||
# end: auto-generated types
|
||||
pass
|
||||
|
||||
|
||||
def remove_old_unhandled_emails():
|
||||
frappe.db.delete(
|
||||
"Unhandled Email", {"creation": ("<", frappe.utils.add_days(frappe.utils.nowdate(), -30))}
|
||||
)
|
||||
@staticmethod
|
||||
def clear_old_logs(days=30):
|
||||
frappe.db.delete(
|
||||
"Unhandled Email",
|
||||
{
|
||||
"modified": ("<", frappe.utils.add_days(frappe.utils.nowdate(), -1 * days)),
|
||||
},
|
||||
)
|
||||
|
|
|
|||
|
|
@ -435,7 +435,8 @@ class Email:
|
|||
|
||||
self.from_real_name = parse_addr(_from_email)[0] if "@" in _from_email else _from_email
|
||||
|
||||
def decode_email(self, email):
|
||||
@staticmethod
|
||||
def decode_email(email):
|
||||
if not email:
|
||||
return
|
||||
decoded = ""
|
||||
|
|
@ -443,7 +444,7 @@ class Email:
|
|||
frappe.as_unicode(email).replace('"', " ").replace("'", " ")
|
||||
):
|
||||
if encoding:
|
||||
decoded += part.decode(encoding)
|
||||
decoded += part.decode(encoding, "replace")
|
||||
else:
|
||||
decoded += safe_decode(part)
|
||||
return decoded
|
||||
|
|
|
|||
|
|
@ -197,6 +197,12 @@ Reply-To: test2_@erpnext.com
|
|||
mail = Email(content_bytes)
|
||||
self.assertEqual(mail.text_content, text_content)
|
||||
|
||||
def test_poorly_encoded_messages(self):
|
||||
mail = Email.decode_email(
|
||||
"=?iso-2022-jp?B?VEFLQVlBTUEgS2FvcnUgWxskQnxiOzMbKEIgGyRCNzAbKEJd?=\n\t<user@example.com>"
|
||||
)
|
||||
self.assertIn("user@example.com", mail)
|
||||
|
||||
|
||||
def fixed_column_width(string, chunk_size):
|
||||
parts = [string[0 + i : chunk_size + i] for i in range(0, len(string), chunk_size)]
|
||||
|
|
|
|||
|
|
@ -35,7 +35,10 @@ app_include_css = [
|
|||
"desk.bundle.css",
|
||||
"report.bundle.css",
|
||||
]
|
||||
app_include_icons = ["frappe/public/icons/timeless/icons.svg"]
|
||||
app_include_icons = [
|
||||
"frappe/icons/timeless/icons.svg",
|
||||
"frappe/icons/espresso/icons.svg",
|
||||
]
|
||||
|
||||
doctype_js = {
|
||||
"Web Page": "public/js/frappe/utils/web_template.js",
|
||||
|
|
@ -237,7 +240,6 @@ scheduler_events = {
|
|||
"frappe.integrations.doctype.google_contacts.google_contacts.sync",
|
||||
"frappe.automation.doctype.auto_repeat.auto_repeat.make_auto_repeat_entry",
|
||||
"frappe.automation.doctype.auto_repeat.auto_repeat.set_auto_repeat_as_completed",
|
||||
"frappe.email.doctype.unhandled_email.unhandled_email.remove_old_unhandled_emails",
|
||||
],
|
||||
"daily_long": [
|
||||
"frappe.integrations.doctype.dropbox_settings.dropbox_settings.take_backups_daily",
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ frappe.ui.form.PrintView = class {
|
|||
});
|
||||
|
||||
this.page.add_action_icon(
|
||||
"file",
|
||||
"es-line-filetype",
|
||||
() => {
|
||||
this.go_to_form_view();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -72,8 +72,9 @@
|
|||
|
||||
.print-format-builder-section-head .section-label {
|
||||
font-size: var(--text-lg);
|
||||
font-weight: var(--weight-medium);
|
||||
letter-spacing: 0.015em;
|
||||
color: var(--text-color);
|
||||
font-weight: 500;
|
||||
vertical-align: middle;
|
||||
margin-left: var(--margin-sm);
|
||||
}
|
||||
|
|
|
|||
4
frappe/public/css/bootstrap.css
vendored
4
frappe/public/css/bootstrap.css
vendored
|
|
@ -2622,8 +2622,8 @@ tbody.collapse.in {
|
|||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, .15);
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||
-webkit-box-shadow: 0px 0px 1px rgba(0,0,0,0.200), 0px 1px 3px rgba(0,0,0,0.050), 0px 10px 24px -3px rgba(0,0,0,0.100);
|
||||
box-shadow: 0px 0px 1px rgba(0,0,0,0.200), 0px 1px 3px rgba(0,0,0,0.050), 0px 10px 24px -3px rgba(0,0,0,0.100);
|
||||
}
|
||||
.dropdown-menu.pull-right {
|
||||
right: 0;
|
||||
|
|
|
|||
BIN
frappe/public/css/fonts/inter/Inter-Italic.var.woff2
Normal file
BIN
frappe/public/css/fonts/inter/Inter-Italic.var.woff2
Normal file
Binary file not shown.
BIN
frappe/public/css/fonts/inter/Inter.var.woff2
Normal file
BIN
frappe/public/css/fonts/inter/Inter.var.woff2
Normal file
Binary file not shown.
|
|
@ -1,11 +1,21 @@
|
|||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-family: 'Inter V';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
src: url("/assets/frappe/css/fonts/inter/inter_thin.woff2") format("woff2"),
|
||||
url("/assets/frappe/css/fonts/inter/inter_thin.woff") format("woff");
|
||||
}
|
||||
font-style: normal;
|
||||
src: url('/assets/frappe/css/fonts/inter/Inter.var.woff2?v=3.19') format('woff2-variations'),
|
||||
url('/assets/frappe/css/fonts/inter/Inter.var.woff2?v=3.19') format('woff2');
|
||||
src: url('/assets/frappe/css/fonts/inter/Inter.var.woff2?v=3.19') format('woff2') tech('variations');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter V';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-style: italic;
|
||||
src: url('/assets/frappe/css/fonts/inter/Inter-Italic.var.woff2?v=3.19') format('woff2-variations'),
|
||||
url('/assets/frappe/css/fonts/inter/Inter-Italic.var.woff2?v=3.19') format('woff2');
|
||||
src: url('/assets/frappe/css/fonts/inter/Inter-Italic.var.woff2?v=3.19') format('woff2') tech('variations');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-display: swap;
|
||||
|
|
|
|||
1680
frappe/public/icons/espresso/icons.svg
Normal file
1680
frappe/public/icons/espresso/icons.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 194 KiB |
|
|
@ -926,8 +926,8 @@
|
|||
<path d="M7 12H17" stroke="white" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_76:14" x1="0" y1="0" x2="0" y2="24" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#2C9AF1"/>
|
||||
<stop offset="1" stop-color="#2490EF"/>
|
||||
<stop stop-color="var(--primary)"/>
|
||||
<stop offset="1" stop-color="var(--primary)"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</symbol>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 114 KiB |
|
|
@ -2,16 +2,16 @@
|
|||
<svg width="400px" height="400px" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<style>
|
||||
polygon {
|
||||
fill: #0E253A;
|
||||
fill: #171717;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
polygon {
|
||||
fill: #0089FF;
|
||||
fill: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="favicon" transform="translate(110.000000, 66.000000)" fill="#0089FF" fill-rule="nonzero">
|
||||
<g id="favicon" transform="translate(110.000000, 66.000000)" fill="#171717" fill-rule="nonzero">
|
||||
<polygon id="Path" points="0 0 0 47.1807692 57.2278846 47.1807692 167.313462 47.1807692 179.203846 47.1807692 179.203846 0"></polygon>
|
||||
<polygon id="Path" points="0 120.297115 0 268.052885 57.2278846 268.052885 57.2278846 167.477885 167.313462 167.477885 167.313462 120.297115 57.2278846 120.297115"></polygon>
|
||||
</g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 877 B After Width: | Height: | Size: 877 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 3 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 12C0 5.37258 5.37258 0 12 0H88C94.6274 0 100 5.37258 100 12V88C100 94.6274 94.6274 100 88 100H12C5.37258 100 0 94.6274 0 88V12Z" fill="#0089FF"/>
|
||||
<path d="M0 12C0 5.37258 5.37258 0 12 0H88C94.6274 0 100 5.37258 100 12V88C100 94.6274 94.6274 100 88 100H12C5.37258 100 0 94.6274 0 88V12Z" fill="#171717"/>
|
||||
<path d="M68.4319 25H35V33.794H68.4319V25Z" fill="white"/>
|
||||
<path d="M35 47.4357V75H45.671V56.2445H66.2149V47.4357H35Z" fill="white"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 399 B After Width: | Height: | Size: 399 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 3 KiB |
|
|
@ -5,5 +5,5 @@
|
|||
<path d="M54 18H12" stroke="#74808B" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="49" cy="47" r="2" fill="#74808B"/>
|
||||
<circle cx="57" cy="55" r="15" fill="white" stroke="#74808B" stroke-width="2"/>
|
||||
<path d="M56.5522 48.9012C56.7361 48.5312 57.2639 48.5312 57.4478 48.9012L58.9493 51.9232C59.0221 52.0698 59.162 52.1714 59.3238 52.1954L62.6619 52.6895C63.0706 52.75 63.2338 53.252 62.9387 53.5412L60.5285 55.9031C60.4117 56.0176 60.3582 56.1821 60.3855 56.3434L60.947 59.6708C61.0158 60.0782 60.5887 60.3885 60.2225 60.1972L57.2315 58.6349C57.0865 58.5592 56.9135 58.5592 56.7685 58.6349L53.7775 60.1972C53.4113 60.3885 52.9842 60.0782 53.053 59.6708L53.6145 56.3434C53.6418 56.1821 53.5883 56.0176 53.4715 55.9031L51.0613 53.5412C50.7662 53.252 50.9294 52.75 51.3381 52.6895L54.6762 52.1954C54.838 52.1714 54.9779 52.0698 55.0507 51.9232L56.5522 48.9012Z" stroke="#2D95F0" stroke-width="2"/>
|
||||
<path d="M56.5522 48.9012C56.7361 48.5312 57.2639 48.5312 57.4478 48.9012L58.9493 51.9232C59.0221 52.0698 59.162 52.1714 59.3238 52.1954L62.6619 52.6895C63.0706 52.75 63.2338 53.252 62.9387 53.5412L60.5285 55.9031C60.4117 56.0176 60.3582 56.1821 60.3855 56.3434L60.947 59.6708C61.0158 60.0782 60.5887 60.3885 60.2225 60.1972L57.2315 58.6349C57.0865 58.5592 56.9135 58.5592 56.7685 58.6349L53.7775 60.1972C53.4113 60.3885 52.9842 60.0782 53.053 59.6708L53.6145 56.3434C53.6418 56.1821 53.5883 56.0176 53.4715 55.9031L51.0613 53.5412C50.7662 53.252 50.9294 52.75 51.3381 52.6895L54.6762 52.1954C54.838 52.1714 54.9779 52.0698 55.0507 51.9232L56.5522 48.9012Z" stroke="#171717" stroke-width="2"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
|
@ -1,10 +1,10 @@
|
|||
<svg viewBox="0 0 78 85" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="13" y="12" width="64" height="72" rx="7" stroke="#A6B1B9" stroke-width="2"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 2H58C61.3137 2 64 4.68629 64 8V9H66V8C66 3.58172 62.4183 0 58 0H8C3.58172 0 0 3.58172 0 8V66C0 70.4183 3.58172 74 8 74H10V72H8C4.68629 72 2 69.3137 2 66V8C2 4.68629 4.68629 2 8 2Z" fill="#A6B1B9"/>
|
||||
<path d="M42 31H66" stroke="#A6B1B9" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M42 51H66" stroke="#A6B1B9" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M42 25H55" stroke="#A6B1B9" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M42 45H55" stroke="#A6B1B9" stroke-width="2" stroke-linecap="round"/>
|
||||
<rect x="24" y="23" width="10" height="10" rx="2" stroke="#2D95F0" stroke-width="2"/>
|
||||
<rect x="24" y="43" width="10" height="10" rx="2" stroke="#2D95F0" stroke-width="2"/>
|
||||
<path d="M42 31H66" stroke="#383838" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M42 51H66" stroke="#383838" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M42 25H55" stroke="#383838" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M42 45H55" stroke="#383838" stroke-width="2" stroke-linecap="round"/>
|
||||
<rect x="24" y="23" width="10" height="10" rx="2" stroke="#A6B1B9" stroke-width="2"/>
|
||||
<rect x="24" y="43" width="10" height="10" rx="2" stroke="#A6B1B9" stroke-width="2"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 912 B After Width: | Height: | Size: 912 B |
|
|
@ -1,8 +1,8 @@
|
|||
<svg width="72" height="70" viewBox="0 0 72 70" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 36C1 27.1634 8.16344 20 17 20H60C66.0751 20 71 24.9249 71 31V55C71 56.1046 70.1046 57 69 57H3C1.89543 57 1 56.1046 1 55V36Z" stroke="#74808B" stroke-width="2"/>
|
||||
<path d="M1 36C1 27.1634 8.16344 20 17 20V20C25.8366 20 33 27.1634 33 36V57H1.72549C1.32481 57 1 56.6752 1 56.2745V36Z" stroke="#74808B" stroke-width="2"/>
|
||||
<path d="M10 34H22" stroke="#2D95F0" stroke-width="2" stroke-linecap="round"/>
|
||||
<path opacity="0.5" d="M10 38H17" stroke="#2D95F0" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M10 34H22" stroke="#171717" stroke-width="2" stroke-linecap="round"/>
|
||||
<path opacity="0.5" d="M10 38H17" stroke="#171717" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M37 57H29V67C29 68.1046 29.8954 69 31 69H35C36.1046 69 37 68.1046 37 67V57Z" stroke="#74808B" stroke-width="2"/>
|
||||
<path d="M46 11.4956H59.9942V1H50.3732C47.9679 1 46 2.96793 46 5.37318V31" stroke="#74808B" stroke-width="2" stroke-miterlimit="10"/>
|
||||
<circle cx="46" cy="33" r="3" stroke="#74808B" stroke-width="2"/>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 926 B After Width: | Height: | Size: 926 B |
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import Sidebar from "./components/Sidebar.vue"
|
||||
import Sidebar from "./components/Sidebar.vue";
|
||||
import Tabs from "./components/Tabs.vue";
|
||||
import { computed, onMounted, watch, ref } from "vue";
|
||||
import { useStore } from "./store";
|
||||
|
|
@ -12,8 +12,7 @@ let should_render = computed(() => {
|
|||
});
|
||||
|
||||
let container = ref(null);
|
||||
onClickOutside(container, () => store.form.selected_field = null);
|
||||
|
||||
onClickOutside(container, () => (store.form.selected_field = null));
|
||||
|
||||
watch(
|
||||
() => store.form.layout,
|
||||
|
|
@ -69,7 +68,7 @@ onMounted(() => store.fetch());
|
|||
|
||||
.form-main {
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--card-shadow);
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: var(--card-bg);
|
||||
margin: 10px;
|
||||
}
|
||||
|
|
@ -77,9 +76,18 @@ onMounted(() => store.fetch());
|
|||
.form-sidebar,
|
||||
.form-main {
|
||||
:deep(.section-columns.has-one-column .field) {
|
||||
input.form-control, .signature-field {
|
||||
input.form-control,
|
||||
.signature-field {
|
||||
width: calc(50% - 19px);
|
||||
}
|
||||
|
||||
.select-input {
|
||||
width: calc(50% - 19px);
|
||||
|
||||
input.form-control {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.column-container .field.sortable-chosen) {
|
||||
|
|
@ -165,11 +173,14 @@ onMounted(() => store.fetch());
|
|||
:deep(.preview) {
|
||||
--field-placeholder-color: var(--fg-bg-color);
|
||||
|
||||
.tab, .column, .field {
|
||||
.tab,
|
||||
.column,
|
||||
.field {
|
||||
background-color: var(--fg-color);
|
||||
}
|
||||
|
||||
.column, .field {
|
||||
.column,
|
||||
.field {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -196,9 +207,18 @@ onMounted(() => store.fetch());
|
|||
margin-top: 8px;
|
||||
|
||||
&.has-one-column .field {
|
||||
input.form-control, .signature-field {
|
||||
input.form-control,
|
||||
.signature-field {
|
||||
width: calc(50% - 15px);
|
||||
}
|
||||
|
||||
.select-input {
|
||||
width: calc(50% - 15px);
|
||||
|
||||
input.form-control {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-columns-container {
|
||||
|
|
@ -227,7 +247,8 @@ onMounted(() => store.fetch());
|
|||
}
|
||||
}
|
||||
|
||||
.selected, .hovered {
|
||||
.selected,
|
||||
.hovered {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ let docfield_df = computed(() => {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.control-data {
|
||||
height: calc(100vh - 250px);
|
||||
height: calc(100vh - 150px);
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ function on_drag_end(evt) {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.fields-container {
|
||||
height: calc(100vh - 22px);
|
||||
height: calc(100vh - 133px);
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
|
|
@ -79,7 +79,7 @@ function on_drag_end(evt) {
|
|||
display: block !important;
|
||||
background-color: var(--bg-light-gray);
|
||||
border-radius: var(--border-radius);
|
||||
border: 0.5px solid var(--gray-400);
|
||||
border: 0.5px solid var(--dark-border-color);
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
.search-icon {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 5px;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -279,7 +279,7 @@ function delete_tab(with_children) {
|
|||
}
|
||||
|
||||
.tab-contents {
|
||||
max-height: 100vh;
|
||||
max-height: calc(100vh - 110px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
border-radius: var(--border-radius);
|
||||
|
|
|
|||
|
|
@ -90,10 +90,10 @@ if (props.df.fieldtype === "Icon") {
|
|||
<style lang="scss" scoped>
|
||||
.selected-color {
|
||||
background-color: transparent;
|
||||
top: 32px !important;
|
||||
top: 30px !important;
|
||||
}
|
||||
|
||||
.selected-phone {
|
||||
top: 34px !important;
|
||||
top: 32px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ watch(() => props.df.options, () => {
|
|||
<style lang="scss" scoped>
|
||||
.editable {
|
||||
.select-icon {
|
||||
top: 7px !important;
|
||||
top: 3px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -124,19 +124,31 @@ frappe.assets = {
|
|||
// this is virtual page load, only get the the source
|
||||
// *without* the template
|
||||
|
||||
frappe.call({
|
||||
type: "GET",
|
||||
method: "frappe.client.get_js",
|
||||
args: {
|
||||
items: items,
|
||||
},
|
||||
callback: function (r) {
|
||||
$.each(items, function (i, src) {
|
||||
frappe.assets.add(src, r.message[i]);
|
||||
});
|
||||
callback();
|
||||
},
|
||||
freeze: true,
|
||||
if (items.length === 0) {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
|
||||
const version_string =
|
||||
frappe.boot.developer_mode || window.dev_server ? Date.now() : window._version_number;
|
||||
|
||||
async function fetch_item(item) {
|
||||
// Add the version to the URL to bust the cache for non-bundled assets
|
||||
let url = new URL(item, window.location.origin);
|
||||
|
||||
if (!item.includes(".bundle.") && !url.searchParams.get("v")) {
|
||||
url.searchParams.append("v", version_string);
|
||||
}
|
||||
const response = await fetch(url.toString());
|
||||
const body = await response.text();
|
||||
frappe.assets.add(item, body);
|
||||
}
|
||||
|
||||
frappe.dom.freeze();
|
||||
const fetch_promises = items.map(fetch_item);
|
||||
Promise.all(fetch_promises).then(() => {
|
||||
frappe.dom.unfreeze();
|
||||
callback();
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -15,18 +15,12 @@
|
|||
<div class="mt-2 text-center">
|
||||
<button class="btn btn-file-upload" @click="browse_files">
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="15" cy="15" r="15" fill="url(#paint0_linear)"/>
|
||||
<path d="M13.5 22V19" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16.5 22V19" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.5 22H19.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.5 16H22.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M21 8H9C8.17157 8 7.5 8.67157 7.5 9.5V17.5C7.5 18.3284 8.17157 19 9 19H21C21.8284 19 22.5 18.3284 22.5 17.5V9.5C22.5 8.67157 21.8284 8 21 8Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="0" y1="0" x2="0" y2="30" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#2C9AF1"/>
|
||||
<stop offset="1" stop-color="#2490EF"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)"/>
|
||||
<path d="M13.5 22V19" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16.5 22V19" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.5 22H19.5" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.5 16H22.5" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M21 8H9C8.17157 8 7.5 8.67157 7.5 9.5V17.5C7.5 18.3284 8.17157 19 9 19H21C21.8284 19 22.5 18.3284 22.5 17.5V9.5C22.5 8.67157 21.8284 8 21 8Z" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div class="mt-1">{{ __('My Device') }}</div>
|
||||
</button>
|
||||
|
|
@ -40,26 +34,26 @@
|
|||
>
|
||||
<button class="btn btn-file-upload" v-if="!disable_file_browser" @click="show_file_browser = true">
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="15" cy="15" r="15" fill="#48BB74"/>
|
||||
<path d="M13.0245 11.5H8C7.72386 11.5 7.5 11.7239 7.5 12V20C7.5 21.1046 8.39543 22 9.5 22H20.5C21.6046 22 22.5 21.1046 22.5 20V14.5C22.5 14.2239 22.2761 14 22 14H15.2169C15.0492 14 14.8926 13.9159 14.8 13.776L13.4414 11.724C13.3488 11.5841 13.1922 11.5 13.0245 11.5Z" stroke="white" stroke-miterlimit="10" stroke-linecap="square"/>
|
||||
<path d="M8.87939 9.5V8.5C8.87939 8.22386 9.10325 8 9.37939 8H20.6208C20.8969 8 21.1208 8.22386 21.1208 8.5V12" stroke="white" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)"/>
|
||||
<path d="M13.0245 11.5H8C7.72386 11.5 7.5 11.7239 7.5 12V20C7.5 21.1046 8.39543 22 9.5 22H20.5C21.6046 22 22.5 21.1046 22.5 20V14.5C22.5 14.2239 22.2761 14 22 14H15.2169C15.0492 14 14.8926 13.9159 14.8 13.776L13.4414 11.724C13.3488 11.5841 13.1922 11.5 13.0245 11.5Z" stroke="var(--text-color)" stroke-miterlimit="10" stroke-linecap="square"/>
|
||||
<path d="M8.87939 9.5V8.5C8.87939 8.22386 9.10325 8 9.37939 8H20.6208C20.8969 8 21.1208 8.22386 21.1208 8.5V12" stroke="var(--text-color)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div class="mt-1">{{ __('Library') }}</div>
|
||||
</button>
|
||||
<button class="btn btn-file-upload" v-if="allow_web_link" @click="show_web_link = true">
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="15" cy="15" r="15" fill="#ECAC4B"/>
|
||||
<path d="M12.0469 17.9543L17.9558 12.0454" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.8184 11.4547L15.7943 9.47873C16.4212 8.85205 17.2714 8.5 18.1578 8.5C19.0443 8.5 19.8945 8.85205 20.5214 9.47873V9.47873C21.1481 10.1057 21.5001 10.9558 21.5001 11.8423C21.5001 12.7287 21.1481 13.5789 20.5214 14.2058L18.5455 16.1818" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11.4547 13.8184L9.47873 15.7943C8.85205 16.4212 8.5 17.2714 8.5 18.1578C8.5 19.0443 8.85205 19.8945 9.47873 20.5214V20.5214C10.1057 21.1481 10.9558 21.5001 11.8423 21.5001C12.7287 21.5001 13.5789 21.1481 14.2058 20.5214L16.1818 18.5455" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)"/>
|
||||
<path d="M12.0469 17.9543L17.9558 12.0454" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.8184 11.4547L15.7943 9.47873C16.4212 8.85205 17.2714 8.5 18.1578 8.5C19.0443 8.5 19.8945 8.85205 20.5214 9.47873V9.47873C21.1481 10.1057 21.5001 10.9558 21.5001 11.8423C21.5001 12.7287 21.1481 13.5789 20.5214 14.2058L18.5455 16.1818" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11.4547 13.8184L9.47873 15.7943C8.85205 16.4212 8.5 17.2714 8.5 18.1578C8.5 19.0443 8.85205 19.8945 9.47873 20.5214V20.5214C10.1057 21.1481 10.9558 21.5001 11.8423 21.5001C12.7287 21.5001 13.5789 21.1481 14.2058 20.5214L16.1818 18.5455" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div class="mt-1">{{ __('Link') }}</div>
|
||||
</button>
|
||||
<button v-if="allow_take_photo" class="btn btn-file-upload" @click="capture_image">
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="15" cy="15" r="15" fill="#CE315B"/>
|
||||
<path d="M11.5 10.5H9.5C8.67157 10.5 8 11.1716 8 12V20C8 20.8284 8.67157 21.5 9.5 21.5H20.5C21.3284 21.5 22 20.8284 22 20V12C22 11.1716 21.3284 10.5 20.5 10.5H18.5L17.3 8.9C17.1111 8.64819 16.8148 8.5 16.5 8.5H13.5C13.1852 8.5 12.8889 8.64819 12.7 8.9L11.5 10.5Z" stroke="white" stroke-linejoin="round"/>
|
||||
<circle cx="15" cy="16" r="2.5" stroke="white"/>
|
||||
<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)"/>
|
||||
<path d="M11.5 10.5H9.5C8.67157 10.5 8 11.1716 8 12V20C8 20.8284 8.67157 21.5 9.5 21.5H20.5C21.3284 21.5 22 20.8284 22 20V12C22 11.1716 21.3284 10.5 20.5 10.5H18.5L17.3 8.9C17.1111 8.64819 16.8148 8.5 16.5 8.5H13.5C13.1852 8.5 12.8889 8.64819 12.7 8.9L11.5 10.5Z" stroke="var(--text-color)" stroke-linejoin="round"/>
|
||||
<circle cx="15" cy="16" r="2.5" stroke="var(--text-color)"/>
|
||||
</svg>
|
||||
<div class="mt-1">{{ __('Camera') }}</div>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ frappe.ui.form.ControlAttach = class ControlAttach extends frappe.ui.form.Contro
|
|||
this.$value = $(
|
||||
`<div class="attached-file flex justify-between align-center">
|
||||
<div class="ellipsis">
|
||||
<i class="fa fa-paperclip"></i>
|
||||
${frappe.utils.icon("es-line-link", "sm")}
|
||||
<a class="attached-file-link" target="_blank"></a>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -9,15 +9,13 @@ frappe.ui.form.ControlComment = class ControlComment extends frappe.ui.form.Cont
|
|||
? $(`
|
||||
<div class="comment-input-wrapper">
|
||||
<div class="comment-input-header">
|
||||
<span>${__("Add a comment")}</span>
|
||||
<span>${__("Comments")}</span>
|
||||
</div>
|
||||
<div class="comment-input-container">
|
||||
<div class="frappe-control"></div>
|
||||
<div class="text-muted small">
|
||||
${__("Ctrl+Enter to add comment")}
|
||||
</div>
|
||||
${frappe.avatar(frappe.session.user, "avatar-medium")}
|
||||
<div class="frappe-control col"></div>
|
||||
</div>
|
||||
<button class="btn btn-default btn-comment btn-xs">
|
||||
<button class="btn hidden btn-comment btn-xs" style="margin-left:48px;">
|
||||
${__("Comment")}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -66,9 +64,9 @@ frappe.ui.form.ControlComment = class ControlComment extends frappe.ui.form.Cont
|
|||
update_state() {
|
||||
const value = this.get_value();
|
||||
if (strip_html(value).trim() != "" || value.includes("img")) {
|
||||
this.button.removeClass("btn-default").addClass("btn-primary");
|
||||
this.button.removeClass("hidden").addClass("btn-primary");
|
||||
} else {
|
||||
this.button.addClass("btn-default").removeClass("btn-primary");
|
||||
this.button.addClass("hidden").removeClass("btn-primary");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -77,6 +75,7 @@ frappe.ui.form.ControlComment = class ControlComment extends frappe.ui.form.Cont
|
|||
return Object.assign(options, {
|
||||
theme: "bubble",
|
||||
bounds: this.quill_container[0],
|
||||
placeholder: __("Type a reply / comment"),
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -285,7 +285,7 @@ frappe.ui.form.ControlLink = class ControlLink extends frappe.ui.form.ControlDat
|
|||
// new item
|
||||
r.results.push({
|
||||
html:
|
||||
"<span class='text-primary link-option'>" +
|
||||
"<span class='link-option'>" +
|
||||
"<i class='fa fa-plus' style='margin-right: 5px;'></i> " +
|
||||
__("Create a new {0}", [__(me.get_options())]) +
|
||||
"</span>",
|
||||
|
|
@ -309,7 +309,7 @@ frappe.ui.form.ControlLink = class ControlLink extends frappe.ui.form.ControlDat
|
|||
// not applicable in web forms
|
||||
r.results.push({
|
||||
html:
|
||||
"<span class='text-primary link-option'>" +
|
||||
"<span class='link-option'>" +
|
||||
"<i class='fa fa-search' style='margin-right: 5px;'></i> " +
|
||||
__("Advanced Search") +
|
||||
"</span>",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ frappe.ui.form.ControlSignature = class ControlSignature extends frappe.ui.form.
|
|||
this.$reset_button_wrapper = $(`
|
||||
<div class="signature-btn-row">
|
||||
<a href="#" type="button" class="signature-reset btn icon-btn">
|
||||
${frappe.utils.icon("refresh", "sm")}
|
||||
${frappe.utils.icon("es-line-reload", "sm")}
|
||||
</a>
|
||||
</div>
|
||||
`)
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ class BaseTimeline {
|
|||
this.timeline_actions_wrapper = $(`
|
||||
<div class="timeline-items timeline-actions">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content action-buttons"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -124,7 +123,7 @@ class BaseTimeline {
|
|||
if (item.icon) {
|
||||
timeline_item.append(`
|
||||
<div class="timeline-badge" title='${item.title || frappe.utils.to_title_case(item.icon)}'>
|
||||
${frappe.utils.icon(item.icon, item.icon_size || "md")}
|
||||
${frappe.utils.icon(item.icon, item.icon_size || "md", item.icon_class || "")}
|
||||
</div>
|
||||
`);
|
||||
} else if (item.timeline_badge) {
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@ class FormTimeline extends BaseTimeline {
|
|||
this.add_action_button(
|
||||
__("New Email"),
|
||||
() => this.compose_mail(),
|
||||
"mail",
|
||||
"btn-secondary-dark"
|
||||
"es-line-add",
|
||||
"btn-secondary"
|
||||
);
|
||||
this.setup_new_event_button();
|
||||
}
|
||||
|
|
@ -54,32 +54,37 @@ class FormTimeline extends BaseTimeline {
|
|||
return (communications || []).length || (comments || []).length;
|
||||
};
|
||||
let me = this;
|
||||
this.timeline_wrapper.remove(this.timeline_actions_wrapper);
|
||||
this.timeline_wrapper.prepend(`
|
||||
<div class="timeline-item activity-title">
|
||||
<h4>${__("Activity")}</h4>
|
||||
</div>
|
||||
`);
|
||||
if (has_communications()) {
|
||||
this.timeline_wrapper
|
||||
.prepend(
|
||||
.find(".timeline-item.activity-title")
|
||||
.append(
|
||||
`
|
||||
<div class="timeline-item activity-toggle">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content flex align-center">
|
||||
<h4>${__("Activity")}</h4>
|
||||
<nav class="nav nav-pills flex-row">
|
||||
<a class="flex-sm-fill text-sm-center nav-link" data-only-communication="true">${__(
|
||||
"Communication"
|
||||
)}</a>
|
||||
<a class="flex-sm-fill text-sm-center nav-link active">${__("All")}</a>
|
||||
</nav>
|
||||
<div class="d-flex align-items-center show-all-activity">
|
||||
<span style="color: var(--text-light); margin:0px 6px;">Show all activity</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
`
|
||||
)
|
||||
.find("a")
|
||||
.find("input[type=checkbox]")
|
||||
.prop("checked", !me.only_communication)
|
||||
.on("click", function (e) {
|
||||
e.preventDefault();
|
||||
me.only_communication = $(this).data().onlyCommunication;
|
||||
me.only_communication = !this.checked;
|
||||
me.render_timeline_items();
|
||||
$(this).tab("show");
|
||||
});
|
||||
}
|
||||
this.timeline_wrapper
|
||||
.find(".timeline-item.activity-title")
|
||||
.append(this.timeline_actions_wrapper);
|
||||
}
|
||||
|
||||
setup_document_email_link() {
|
||||
|
|
@ -99,7 +104,7 @@ class FormTimeline extends BaseTimeline {
|
|||
</div>
|
||||
</div>
|
||||
`);
|
||||
this.timeline_actions_wrapper.append(this.document_email_link_wrapper);
|
||||
this.timeline_items_wrapper.before(this.document_email_link_wrapper);
|
||||
|
||||
this.document_email_link_wrapper.find(".document-email-link").on("click", (e) => {
|
||||
let text = $(e.target).text();
|
||||
|
|
@ -330,7 +335,8 @@ class FormTimeline extends BaseTimeline {
|
|||
|
||||
get_comment_timeline_item(comment) {
|
||||
return {
|
||||
icon: "small-message",
|
||||
icon: "es-line-chat-alt",
|
||||
icon_size: "sm",
|
||||
creation: comment.creation,
|
||||
is_card: true,
|
||||
doctype: "Comment",
|
||||
|
|
@ -414,7 +420,7 @@ class FormTimeline extends BaseTimeline {
|
|||
);
|
||||
|
||||
attachment_timeline_contents.push({
|
||||
icon: is_file_upload ? "upload" : "delete",
|
||||
icon: is_file_upload ? "es-line-attachment" : "es-line-delete",
|
||||
icon_size: "sm",
|
||||
creation: attachment_log.creation,
|
||||
content: timeline_content,
|
||||
|
|
@ -458,7 +464,7 @@ class FormTimeline extends BaseTimeline {
|
|||
);
|
||||
|
||||
like_timeline_contents.push({
|
||||
icon: "heart",
|
||||
icon: "es-line-like",
|
||||
icon_size: "sm",
|
||||
creation: like_log.creation,
|
||||
content: timeline_content,
|
||||
|
|
|
|||
|
|
@ -362,6 +362,12 @@ export default class Grid {
|
|||
grid: this,
|
||||
show_search: true,
|
||||
});
|
||||
this.header_search.row.addClass("filter-row");
|
||||
if (this.header_search.show_search || this.header_search.show_search_row()) {
|
||||
$(this.parent).find(".grid-heading-row").addClass("with-filter");
|
||||
} else {
|
||||
$(this.parent).find(".grid-heading-row").removeClass("with-filter");
|
||||
}
|
||||
|
||||
this.filter_applied && this.update_search_columns();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -428,7 +428,7 @@ export default class GridRow {
|
|||
|
||||
$(`
|
||||
<div class='form-group'>
|
||||
<div class='row' style='margin:0px; margin-bottom:10px'>
|
||||
<div class='row' style='margin:0px; margin-bottom:10px;'>
|
||||
<div class='col-md-8'>
|
||||
${__("Fieldname").bold()}
|
||||
</div>
|
||||
|
|
@ -516,22 +516,27 @@ export default class GridRow {
|
|||
|
||||
fields += `
|
||||
<div class='control-input flex align-center form-control fields_order sortable-handle sortable'
|
||||
style='display: block; margin-bottom: 5px; cursor: pointer;' data-fieldname='${docfield.fieldname}'
|
||||
style='display: block; margin-bottom: 5px; padding: 0 8px; cursor: pointer; height: 32px;' data-fieldname='${
|
||||
docfield.fieldname
|
||||
}'
|
||||
data-label='${docfield.label}' data-type='${docfield.fieldtype}'>
|
||||
|
||||
<div class='row'>
|
||||
<div class='col-md-1' style='padding-top: 2px'>
|
||||
<div class='col-md-1' style='padding-top: 4px;'>
|
||||
<a style='cursor: grabbing;'>${frappe.utils.icon("drag", "xs")}</a>
|
||||
</div>
|
||||
<div class='col-md-7' style='padding-left:0px; padding-top:3px'>
|
||||
<div class='col-md-8' style='padding-right:0px; padding-top: 5px;'>
|
||||
${__(docfield.label)}
|
||||
</div>
|
||||
<div class='col-md-3' style='padding-left:0px;margin-top:-2px;' title='${__("Columns")}'>
|
||||
<input class='form-control column-width input-xs text-right'
|
||||
<div class='col-md-2' style='padding-left:0px; padding-top: 2px; margin-top:-2px;' title='${__(
|
||||
"Columns"
|
||||
)}'>
|
||||
<input class='form-control column-width my-1 input-xs text-right'
|
||||
style='height: 24px; max-width: 80px; background: var(--bg-color);'
|
||||
value='${docfield.columns || cint(d.columns)}'
|
||||
data-fieldname='${docfield.fieldname}' style='background-color: var(--modal-bg); display: inline'>
|
||||
</div>
|
||||
<div class='col-md-1' style='padding-top: 3px'>
|
||||
<div class='col-md-1' style='padding-top: 3px;'>
|
||||
<a class='text-muted remove-field' data-fieldname='${docfield.fieldname}'>
|
||||
<i class='fa fa-trash-o' aria-hidden='true'></i>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@ export default class Section {
|
|||
}
|
||||
|
||||
set_icon(hide) {
|
||||
let indicator_icon = hide ? "down" : "up-line";
|
||||
let indicator_icon = hide ? "es-line-down" : "es-line-up";
|
||||
this.indicator && this.indicator.html(frappe.utils.icon(indicator_icon, "sm", "mb-1"));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ frappe.ui.form.Attachments = class Attachments {
|
|||
}
|
||||
|
||||
const icon = `<a href="/app/file/${fileid}">
|
||||
${frappe.utils.icon(attachment.is_private ? "lock" : "unlock", "sm ml-0")}
|
||||
${frappe.utils.icon(attachment.is_private ? "es-line-lock" : "es-line-unlock", "sm ml-0")}
|
||||
</a>`;
|
||||
|
||||
$(`<li class="attachment-row">`)
|
||||
|
|
|
|||
|
|
@ -40,45 +40,27 @@
|
|||
</ul>
|
||||
<ul class="list-unstyled sidebar-menu form-assignments">
|
||||
<li class="sidebar-label">
|
||||
<svg class="icon icon-sm"><use href="#icon-assign"></use></svg>
|
||||
{%= __("Assigned To") %}
|
||||
</li>
|
||||
<li class="flex flex-wrap">
|
||||
<span class="assignments"></span>
|
||||
<button class="text-muted btn btn-default icon-btn add-assignment-btn">
|
||||
<svg class="icon icon-sm"><use href="#icon-add"></use></svg>
|
||||
<button class="add-assignment-btn data-pill btn">
|
||||
<svg class="es-icon mr-2 icon-sm"><use href="#es-line-customer"></use></svg>
|
||||
<span class="ellipsis">{%= __("Add Assignee") %}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="list-unstyled sidebar-menu form-attachments">
|
||||
<li class="sidebar-label attachments-label">
|
||||
<svg class="icon icon-sm"><use href="#icon-attachment"></use></svg>
|
||||
{%= __("Attachments") %}
|
||||
<span class="ellipsis">{%= __("Attachments") %}</span>
|
||||
|
||||
<li class="explore-full-btn hidden">
|
||||
<button class="data-pill btn">
|
||||
<span class="pill-label ellipsis">
|
||||
{%= __("Explore Files") %}
|
||||
</span>
|
||||
<svg class="icon icon-sm">
|
||||
<use href="#icon-projects"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class="attachments-actions">
|
||||
<button class="data-pill btn add-attachment-btn">
|
||||
<span class="pill-label ellipsis">
|
||||
{%= __("Attach File") %}
|
||||
</span>
|
||||
<svg class="icon icon-sm">
|
||||
<use href="#icon-add"></use>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="text-muted btn btn-default icon-btn explore-btn">
|
||||
<svg class="icon icon-sm">
|
||||
<use href="#icon-projects"></use>
|
||||
<svg class="es-icon icon-sm">
|
||||
<use href="#es-line-folder-alt"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
|
|
@ -90,7 +72,21 @@
|
|||
</a>
|
||||
</li>
|
||||
</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">
|
||||
|
|
@ -103,15 +99,20 @@
|
|||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="list-unstyled sidebar-menu form-tags">
|
||||
<li class="sidebar-label tags-label">
|
||||
{%= __("Tags") %}
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="list-unstyled sidebar-menu form-shared">
|
||||
<li class="sidebar-label">
|
||||
<svg class="icon icon-sm"><use href="#icon-share"></use></svg>
|
||||
{%= __("Shared With") %}
|
||||
</li>
|
||||
<li class="flex flex-wrap">
|
||||
<span class="shares"></span>
|
||||
<button class="share-doc-btn text-muted btn btn-default icon-btn">
|
||||
<svg class="icon icon-sm"><use href="#icon-add"></use></svg>
|
||||
<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>
|
||||
{%= __("Invite") %}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -132,12 +133,6 @@
|
|||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="list-unstyled sidebar-menu form-tags">
|
||||
<li class="sidebar-label tags-label">
|
||||
<svg class="icon icon-sm"><use href="#icon-tag"></use></svg>
|
||||
{%= __("Tags") %}
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="list-unstyled sidebar-menu">
|
||||
<a><li class="auto-repeat-status"><li></a>
|
||||
</ul>
|
||||
|
|
@ -146,16 +141,16 @@
|
|||
<div class="form-stats">
|
||||
<span class="form-stats-likes">
|
||||
<span class="liked-by like-action">
|
||||
<svg class="icon icon-sm">
|
||||
<use href="#icon-heart" class="like-icon"></use>
|
||||
<svg class="es-icon icon-sm">
|
||||
<use href="#es-solid-heart" class="like-icon"></use>
|
||||
</svg>
|
||||
<span class="like-count"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="mx-1">·</span>
|
||||
<a class="comments">
|
||||
<svg class="icon icon-sm">
|
||||
<use href="#icon-comment" class="comment-icon"></use>
|
||||
<svg class="es-icon icon-sm">
|
||||
<use href="#es-line-chat-alt" class="comment-icon"></use>
|
||||
</svg>
|
||||
<span class="comments-count"></span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="timeline-message-box" data-communication-type="{{ doc.communication_type }}">
|
||||
<span class="flex justify-between">
|
||||
<span class="flex justify-between m-1">
|
||||
<span class="text-color flex">
|
||||
{% if (doc.communication_type && doc.communication_type == "Automated Message") { %}
|
||||
<span>
|
||||
|
|
@ -28,8 +28,10 @@
|
|||
</span>
|
||||
{% } else if (doc.comment_type && doc.comment_type == "Comment") { %}
|
||||
<span>
|
||||
{{ doc.user_full_name || frappe.user.full_name(doc.owner) }} {{ __("commented") }}
|
||||
<span class="text-muted margin-left">
|
||||
{{ frappe.avatar(doc.owner, "avatar-medium") }}
|
||||
<span class="ml-2" style="font-size: var(--text-base);">{{ doc.user_full_name || frappe.user.full_name(doc.owner) }}</span>
|
||||
<span style="color: var(--text-muted);">{{ __("commented") }}</span>
|
||||
<span class="margin-left" style="color: var(--text-muted);">
|
||||
{{ comment_when(doc.creation) }}
|
||||
</span>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -281,7 +281,7 @@ frappe.ui.form.Toolbar = class Toolbar {
|
|||
// Navigate
|
||||
if (!this.frm.is_new() && !this.frm.meta.issingle) {
|
||||
this.page.add_action_icon(
|
||||
"left",
|
||||
"es-line-left-chevron",
|
||||
() => {
|
||||
this.frm.navigate_records(1);
|
||||
},
|
||||
|
|
@ -289,7 +289,7 @@ frappe.ui.form.Toolbar = class Toolbar {
|
|||
__("Previous Document")
|
||||
);
|
||||
this.page.add_action_icon(
|
||||
"right",
|
||||
"es-line-right-chevron",
|
||||
() => {
|
||||
this.frm.navigate_records(0);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -230,9 +230,14 @@ frappe.views.BaseList = class BaseList {
|
|||
$secondary_action.addClass("visible-xs");
|
||||
}
|
||||
} else {
|
||||
this.refresh_button = this.page.add_action_icon("refresh", () => {
|
||||
this.refresh();
|
||||
});
|
||||
this.refresh_button = this.page.add_action_icon(
|
||||
"es-line-reload",
|
||||
() => {
|
||||
this.refresh();
|
||||
},
|
||||
"",
|
||||
__("Reload List")
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -840,7 +845,7 @@ class FilterArea {
|
|||
<div class="btn-group">
|
||||
<button class="btn btn-default btn-sm filter-button">
|
||||
<span class="filter-icon">
|
||||
${frappe.utils.icon("filter")}
|
||||
${frappe.utils.icon("es-line-filter")}
|
||||
</span>
|
||||
<span class="button-label hidden-xs">
|
||||
${__("Filter")}
|
||||
|
|
@ -848,7 +853,7 @@ class FilterArea {
|
|||
</button>
|
||||
<button class="btn btn-default btn-sm filter-x-button" title="${__("Clear all filters")}">
|
||||
<span class="filter-icon">
|
||||
${frappe.utils.icon("filter-x")}
|
||||
${frappe.utils.icon("es-small-close")}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -275,7 +275,7 @@ frappe.views.ListSidebar = class ListSidebar {
|
|||
this.insights_banner = $(`
|
||||
<div style="position: relative;">
|
||||
<div class="pr-3">
|
||||
${message} <a href="${link}" target="_blank" style="color: var(--primary-color)">${cta} → </a>
|
||||
${message} <a href="${link}" target="_blank" style="color: var(--text-color)">${cta} → </a>
|
||||
</div>
|
||||
<div style="position: absolute; top: -1px; right: -4px; cursor: pointer;" title="Dismiss"
|
||||
onclick="localStorage.setItem('show_insights_banner', 'false') || this.parentElement.remove()">
|
||||
|
|
|
|||
|
|
@ -632,7 +632,7 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
|
|||
<input class="level-item list-check-all" type="checkbox"
|
||||
title="${__("Select All")}">
|
||||
<span class="level-item list-liked-by-me hidden-xs">
|
||||
<span title="${__("Likes")}">${frappe.utils.icon("heart", "sm", "like-icon")}</span>
|
||||
<span title="${__("Likes")}">${frappe.utils.icon("es-solid-heart", "sm", "like-icon")}</span>
|
||||
</span>
|
||||
<span class="level-item" data-sort-by="${subject_field.fieldname}"
|
||||
title="${__("Click to sort by {0}", [subject_field.label])}">
|
||||
|
|
@ -911,7 +911,7 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
|
|||
if (this.list_view_settings && !this.list_view_settings.disable_comment_count) {
|
||||
comment_count = $(`<span class="comment-count"></span>`);
|
||||
$(comment_count).append(`
|
||||
${frappe.utils.icon("small-message")}
|
||||
${frappe.utils.icon("es-line-chat-alt")}
|
||||
${doc._comment_count > 99 ? "99+" : doc._comment_count || 0}`);
|
||||
}
|
||||
|
||||
|
|
@ -979,7 +979,7 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
|
|||
const div = document.createElement("div");
|
||||
div.innerHTML = `
|
||||
<span class="like-action ${heart_class}">
|
||||
${frappe.utils.icon("heart", "sm", "like-icon")}
|
||||
${frappe.utils.icon("es-solid-heart", "sm", "like-icon")}
|
||||
</span>
|
||||
<span class="likes-count">
|
||||
${liked_by.length > 99 ? __("99") + "+" : __(liked_by.length || "")}
|
||||
|
|
@ -1045,7 +1045,9 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
|
|||
];
|
||||
const title = docstatus_description[doc.docstatus || 0];
|
||||
if (indicator) {
|
||||
return `<span class="indicator-pill ${indicator[1]} filterable ellipsis"
|
||||
return `<span class="indicator-pill ${
|
||||
indicator[1]
|
||||
} filterable no-indicator-dot ellipsis"
|
||||
data-filter='${indicator[2]}' title='${title}'>
|
||||
<span class="ellipsis"> ${__(indicator[0])}</span>
|
||||
</span>`;
|
||||
|
|
|
|||
|
|
@ -164,6 +164,7 @@ frappe.ui.keys.AltShortcutGroup = class AltShortcutGroup {
|
|||
return letter;
|
||||
})
|
||||
.join("");
|
||||
text_html = `<span>${text_html}</span>`;
|
||||
let original_text_html = shortcut.$text_el.html();
|
||||
text_html = original_text_html.replace(shortcut.text.trim(), text_html.trim());
|
||||
shortcut.$text_el.html(text_html);
|
||||
|
|
|
|||
|
|
@ -229,7 +229,7 @@ frappe.ui.GroupBy = class {
|
|||
$(`<div class="group-by-selector">
|
||||
<button class="btn btn-default btn-sm group-by-button ellipsis">
|
||||
<span class="group-by-icon">
|
||||
${frappe.utils.icon("group-by")}
|
||||
${frappe.utils.icon("es-line-group")}
|
||||
</span>
|
||||
<span class="button-label hidden-xs">
|
||||
${__("Add Group")}
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
<!-- <div class="title-image hide hidden-md hidden-lg"></div> -->
|
||||
<!-- title -->
|
||||
<span class="sidebar-toggle-btn">
|
||||
<svg class="icon icon-md sidebar-toggle-placeholder">
|
||||
<use href="#icon-menu"></use>
|
||||
<svg class="es-icon icon-md sidebar-toggle-placeholder">
|
||||
<use href="#es-line-align-justify"></use>
|
||||
</svg>
|
||||
<span class="sidebar-toggle-icon">
|
||||
<svg class="icon icon-md">
|
||||
<use href="#icon-sidebar-collapse">
|
||||
<svg class="es-icon icon-md">
|
||||
<use href="#es-line-sidebar-collapse">
|
||||
</use>
|
||||
</svg>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -211,7 +211,10 @@ frappe.ui.Page = class Page {
|
|||
let sidebar_wrapper = this.wrapper.find(".layout-side-section");
|
||||
let is_sidebar_visible = $(sidebar_wrapper).is(":visible");
|
||||
sidebar_toggle_icon.html(
|
||||
frappe.utils.icon(is_sidebar_visible ? "sidebar-collapse" : "sidebar-expand", "md")
|
||||
frappe.utils.icon(
|
||||
is_sidebar_visible ? "es-line-sidebar-collapse" : "es-line-sidebar-expand",
|
||||
"md"
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -225,18 +228,29 @@ frappe.ui.Page = class Page {
|
|||
${frappe.utils.icon(icon)}
|
||||
</button>
|
||||
`);
|
||||
// ideally, we should pass tooltip_label this is just safe gaurd.
|
||||
if (!tooltip_label) {
|
||||
if (icon.startsWith("es-")) {
|
||||
icon = icon.replace("es-line-", "");
|
||||
icon = icon.replace("es-solid-", "");
|
||||
icon = icon.replace("es-small-", "");
|
||||
}
|
||||
tooltip_label = frappe.unscrub(icon);
|
||||
}
|
||||
|
||||
button.appendTo(this.icon_group.removeClass("hide"));
|
||||
button.click(click);
|
||||
button
|
||||
.attr("title", __(tooltip_label || frappe.unscrub(icon)))
|
||||
.attr("title", __(tooltip_label))
|
||||
.tooltip({ delay: { show: 600, hide: 100 }, trigger: "hover" });
|
||||
|
||||
return button;
|
||||
}
|
||||
|
||||
clear_indicator() {
|
||||
return this.indicator.removeClass().addClass("indicator-pill whitespace-nowrap hide");
|
||||
return this.indicator
|
||||
.removeClass()
|
||||
.addClass("indicator-pill no-indicator-dot whitespace-nowrap hide");
|
||||
}
|
||||
|
||||
get_icon_label(icon, label) {
|
||||
|
|
@ -254,14 +268,15 @@ frappe.ui.Page = class Page {
|
|||
set_action(btn, opts) {
|
||||
let me = this;
|
||||
if (opts.icon) {
|
||||
opts.label = this.get_icon_label(opts.icon, opts.label);
|
||||
opts.iconHTML = this.get_icon_label(opts.icon, opts.label);
|
||||
}
|
||||
|
||||
this.clear_action_of(btn);
|
||||
|
||||
btn.removeClass("hide")
|
||||
.prop("disabled", false)
|
||||
.html(opts.label)
|
||||
.html(opts.iconHTML || opts.label)
|
||||
.attr("data-label", opts.label)
|
||||
.on("click", function () {
|
||||
let response = opts.click.apply(this, [btn]);
|
||||
me.btn_disable_enable(btn, response);
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ frappe.ui.TagEditor = class TagEditor {
|
|||
|
||||
this.tags = new frappe.ui.Tags({
|
||||
parent: this.wrapper,
|
||||
placeholder: __("Add a tag ..."),
|
||||
placeholder: __("Add Tags"),
|
||||
onTagAdd: (tag) => {
|
||||
if (me.initialized && !me.refreshing) {
|
||||
return frappe.call({
|
||||
|
|
|
|||
|
|
@ -18,10 +18,13 @@ frappe.ui.Tags = class {
|
|||
|
||||
this.$inputWrapper = this.get_list_element(this.$input);
|
||||
this.$placeholder = this.get_list_element(
|
||||
$(`<span class="tags-placeholder text-muted">${placeholder}</span>`)
|
||||
$(`<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>
|
||||
${__(placeholder)}
|
||||
</button>`)
|
||||
);
|
||||
this.$inputWrapper.appendTo(this.$ul);
|
||||
this.$placeholder.appendTo(this.$ul);
|
||||
this.$inputWrapper.appendTo(this.$ul);
|
||||
|
||||
this.deactivate();
|
||||
this.bind();
|
||||
|
|
@ -69,7 +72,7 @@ frappe.ui.Tags = class {
|
|||
if (label && label !== "" && !this.tagsList.includes(label)) {
|
||||
let $tag = this.get_tag(label);
|
||||
let row = this.get_list_element($tag, "form-tag-row");
|
||||
row.insertBefore(this.$inputWrapper);
|
||||
row.insertAfter(this.$inputWrapper);
|
||||
this.tagsList.push(label);
|
||||
this.onTagAdd && this.onTagAdd(label);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<header class="navbar navbar-expand sticky-top" role="navigation">
|
||||
<div class="container">
|
||||
<a class="navbar-brand navbar-home" href="/app">
|
||||
<img class="app-logo" style="width: {{ navbar_settings.logo_width || 24 }}px" src="{{ frappe.boot.app_logo_url }}">
|
||||
<img class="app-logo" style="width: {{ navbar_settings.logo_width || 28 }}px" src="{{ frappe.boot.app_logo_url }}">
|
||||
</a>
|
||||
<ul class="nav navbar-nav d-none d-sm-flex" id="navbar-breadcrumbs"></ul>
|
||||
<div class="collapse navbar-collapse justify-content-end">
|
||||
|
|
@ -34,10 +34,10 @@
|
|||
href="#"
|
||||
onclick="return false;">
|
||||
<span class="notifications-seen">
|
||||
<svg class="icon icon-md"><use href="#icon-notification"></use></svg>
|
||||
<svg class="es-icon icon-sm" style="stroke:none;"><use href="#es-line-notifications"></use></svg>
|
||||
</span>
|
||||
<span class="notifications-unseen">
|
||||
<svg class="icon icon-md"><use href="#icon-notification-with-indicator"></use></svg>
|
||||
<svg class="es-icon icon-sm"><use href="#icon-notification-with-indicator"></use></svg>
|
||||
</span>
|
||||
</a>
|
||||
<div class="dropdown-menu notifications-list dropdown-menu-right" role="menu">
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
href="#"
|
||||
onclick="return false;">
|
||||
<span>
|
||||
<svg class="icon icon-md"><use href="#icon-small-message"></use></svg>
|
||||
<svg class="es-icon icon-sm"><use href="#es-line-chat-alt"></use></svg>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
<a class="nav-link" data-toggle="dropdown" href="#" onclick="return false;">
|
||||
{{ __("Help") }}
|
||||
<span>
|
||||
<svg class="icon icon-xs"><use href="#icon-small-down"></use></svg>
|
||||
<svg class="es-icon icon-xs"><use href="#es-line-down"></use></svg>
|
||||
</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" id="toolbar-help" role="menu">
|
||||
|
|
|
|||
|
|
@ -1206,14 +1206,22 @@ Object.assign(frappe.utils, {
|
|||
|
||||
icon(icon_name, size = "sm", icon_class = "", icon_style = "", svg_class = "") {
|
||||
let size_class = "";
|
||||
let is_espresso = icon_name.startsWith("es-");
|
||||
|
||||
icon_name = is_espresso ? `${"#" + icon_name}` : `${"#icon-" + icon_name}`;
|
||||
if (typeof size == "object") {
|
||||
icon_style += ` width: ${size.width}; height: ${size.height}`;
|
||||
} else {
|
||||
size_class = `icon-${size}`;
|
||||
}
|
||||
return `<svg class="icon ${svg_class} ${size_class}" style="${icon_style}">
|
||||
<use class="${icon_class}" href="#icon-${icon_name}"></use>
|
||||
return `<svg class="${
|
||||
is_espresso
|
||||
? icon_name.startsWith("es-solid")
|
||||
? "es-icon es-solid"
|
||||
: "es-icon es-line"
|
||||
: "icon"
|
||||
} ${svg_class} ${size_class}" style="${icon_style}">
|
||||
<use class="${icon_class}" href="${icon_name}"></use>
|
||||
</svg>`;
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -757,7 +757,7 @@ frappe.provide("frappe.views");
|
|||
|
||||
if (card.comment_count > 0)
|
||||
html += `<span class="list-comment-count small text-muted ">
|
||||
${frappe.utils.icon("small-message")}
|
||||
${frappe.utils.icon("es-line-chat-alt")}
|
||||
${card.comment_count}
|
||||
</span>`;
|
||||
|
||||
|
|
|
|||
|
|
@ -89,10 +89,15 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
|
|||
|
||||
set_default_secondary_action() {
|
||||
this.refresh_button && this.refresh_button.remove();
|
||||
this.refresh_button = this.page.add_action_icon("refresh", () => {
|
||||
this.setup_progress_bar();
|
||||
this.refresh();
|
||||
});
|
||||
this.refresh_button = this.page.add_action_icon(
|
||||
"es-line-reload",
|
||||
() => {
|
||||
this.setup_progress_bar();
|
||||
this.refresh();
|
||||
},
|
||||
"",
|
||||
__("Reload Report")
|
||||
);
|
||||
}
|
||||
|
||||
get_no_result_message() {
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ export default class Block {
|
|||
});
|
||||
this.block_widget.customize(this.options);
|
||||
this.wrapper.setAttribute(block_name, this.block_widget.label);
|
||||
$(this.wrapper).find(".widget").addClass(`${widget_type} edit-mode`);
|
||||
$(this.wrapper).find(".widget").addClass(`${widget_type}`);
|
||||
this.new_block_widget = this.block_widget.get_config();
|
||||
this.add_settings_button();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -60,15 +60,6 @@ export default class Shortcut extends Block {
|
|||
this.add_settings_button();
|
||||
this.add_new_block_button();
|
||||
} else {
|
||||
let $shortcut_icon = frappe.utils.icon(
|
||||
"arrow-up-right",
|
||||
"xs",
|
||||
"",
|
||||
"stroke: grey",
|
||||
"ml-2"
|
||||
);
|
||||
$(this.wrapper).find(".widget .widget-title").append($shortcut_icon);
|
||||
|
||||
$(this.wrapper).append($(`<div class="divider"></div>`));
|
||||
}
|
||||
return this.wrapper;
|
||||
|
|
|
|||
|
|
@ -31,6 +31,20 @@ frappe.views.Workspace = class Workspace {
|
|||
private: {},
|
||||
};
|
||||
this.sidebar_categories = ["My Workspaces", "Public"];
|
||||
this.indicator_colors = [
|
||||
"green",
|
||||
"cyan",
|
||||
"blue",
|
||||
"orange",
|
||||
"yellow",
|
||||
"gray",
|
||||
"grey",
|
||||
"red",
|
||||
"pink",
|
||||
"darkgrey",
|
||||
"purple",
|
||||
"light-blue",
|
||||
];
|
||||
|
||||
this.prepare_container();
|
||||
this.setup_pages();
|
||||
|
|
@ -80,6 +94,9 @@ frappe.views.Workspace = class Workspace {
|
|||
}
|
||||
|
||||
sidebar_item_container(item) {
|
||||
item.indicator_color =
|
||||
item.indicator_color || this.indicator_colors[Math.floor(Math.random() * 12)];
|
||||
|
||||
return $(`
|
||||
<div
|
||||
class="sidebar-item-container ${item.is_editable ? "is-draggable" : ""}"
|
||||
|
|
@ -97,10 +114,13 @@ frappe.views.Workspace = class Workspace {
|
|||
}"
|
||||
class="item-anchor ${item.is_editable ? "" : "block-click"}" title="${__(item.title)}"
|
||||
>
|
||||
<span class="sidebar-item-icon" item-icon=${item.icon || "folder-normal"}>${frappe.utils.icon(
|
||||
item.icon || "folder-normal",
|
||||
"md"
|
||||
)}</span>
|
||||
<span class="sidebar-item-icon" item-icon=${item.icon || "folder-normal"}>
|
||||
${
|
||||
item.icon
|
||||
? frappe.utils.icon(item.icon, "md")
|
||||
: `<span class="indicator ${item.indicator_color}"></span>`
|
||||
}
|
||||
</span>
|
||||
<span class="sidebar-item-label">${__(item.title)}<span>
|
||||
</a>
|
||||
<div class="sidebar-item-control"></div>
|
||||
|
|
@ -142,16 +162,16 @@ frappe.views.Workspace = class Workspace {
|
|||
);
|
||||
|
||||
let $title = $(`<div class="standard-sidebar-label">
|
||||
<span>${frappe.utils.icon("small-down", "xs")}</span>
|
||||
<span>${frappe.utils.icon("es-line-down", "xs")}</span>
|
||||
<span class="section-title">${__(title)}<span>
|
||||
</div>`).appendTo(sidebar_section);
|
||||
this.prepare_sidebar(root_pages, sidebar_section, this.sidebar);
|
||||
|
||||
$title.on("click", (e) => {
|
||||
let icon =
|
||||
$(e.target).find("span use").attr("href") === "#icon-small-down"
|
||||
? "#icon-right"
|
||||
: "#icon-small-down";
|
||||
$(e.target).find("span use").attr("href") === "#es-line-down"
|
||||
? "#es-line-right-chevron"
|
||||
: "#es-line-down";
|
||||
$(e.target).find("span use").attr("href", icon);
|
||||
$(e.target).parent().find(".sidebar-item-container").toggleClass("hidden");
|
||||
});
|
||||
|
|
@ -210,7 +230,7 @@ frappe.views.Workspace = class Workspace {
|
|||
}
|
||||
|
||||
add_drop_icon(item, sidebar_control, item_container) {
|
||||
let drop_icon = "small-down";
|
||||
let drop_icon = "es-line-down";
|
||||
if (item_container.find(`[item-name="${this.current_page.name}"]`).length) {
|
||||
drop_icon = "small-up";
|
||||
}
|
||||
|
|
@ -229,9 +249,9 @@ frappe.views.Workspace = class Workspace {
|
|||
}
|
||||
$drop_icon.on("click", () => {
|
||||
let icon =
|
||||
$drop_icon.find("use").attr("href") === "#icon-small-down"
|
||||
? "#icon-small-up"
|
||||
: "#icon-small-down";
|
||||
$drop_icon.find("use").attr("href") === "#es-line-down"
|
||||
? "#es-line-up"
|
||||
: "#es-line-down";
|
||||
$drop_icon.find("use").attr("href", icon);
|
||||
$child_item_section.toggleClass("hidden");
|
||||
});
|
||||
|
|
@ -419,19 +439,24 @@ frappe.views.Workspace = class Workspace {
|
|||
|
||||
this.clear_page_actions();
|
||||
|
||||
this.page.set_secondary_action(__("Edit"), async () => {
|
||||
if (!this.editor || !this.editor.readOnly) return;
|
||||
this.is_read_only = false;
|
||||
this.toggle_hidden_workspaces(true);
|
||||
await this.editor.readOnly.toggle();
|
||||
this.editor.isReady.then(() => {
|
||||
this.initialize_editorjs_undo();
|
||||
this.setup_customization_buttons(current_page);
|
||||
this.show_sidebar_actions();
|
||||
this.make_blocks_sortable();
|
||||
});
|
||||
});
|
||||
|
||||
this.page.set_secondary_action(
|
||||
__("Edit"),
|
||||
async () => {
|
||||
if (!this.editor || !this.editor.readOnly) return;
|
||||
this.is_read_only = false;
|
||||
this.toggle_hidden_workspaces(true);
|
||||
await this.editor.readOnly.toggle();
|
||||
this.editor.isReady.then(() => {
|
||||
this.body.addClass("edit-mode");
|
||||
this.initialize_editorjs_undo();
|
||||
this.setup_customization_buttons(current_page);
|
||||
this.show_sidebar_actions();
|
||||
this.make_blocks_sortable();
|
||||
});
|
||||
},
|
||||
"es-line-edit"
|
||||
);
|
||||
// need to add option for icons in inner buttons as well
|
||||
this.page.add_inner_button(__("Create Workspace"), () => {
|
||||
this.initialize_new_page();
|
||||
});
|
||||
|
|
@ -457,6 +482,7 @@ frappe.views.Workspace = class Workspace {
|
|||
__("Save"),
|
||||
() => {
|
||||
this.clear_page_actions();
|
||||
this.body.removeClass("edit-mode");
|
||||
this.save_page(page).then((saved) => {
|
||||
if (!saved) return;
|
||||
this.undo.readOnly = true;
|
||||
|
|
@ -469,6 +495,7 @@ frappe.views.Workspace = class Workspace {
|
|||
);
|
||||
|
||||
this.page.set_secondary_action(__("Discard"), async () => {
|
||||
this.body.removeClass("edit-mode");
|
||||
this.discard = true;
|
||||
this.clear_page_actions();
|
||||
this.toggle_hidden_workspaces(false);
|
||||
|
|
@ -527,7 +554,7 @@ frappe.views.Workspace = class Workspace {
|
|||
);
|
||||
} else {
|
||||
frappe.utils.add_custom_button(
|
||||
frappe.utils.icon("drag", "xs"),
|
||||
frappe.utils.icon("es-line-drag", "xs"),
|
||||
null,
|
||||
"drag-handle",
|
||||
__("Drag"),
|
||||
|
|
@ -599,6 +626,16 @@ frappe.views.Workspace = class Workspace {
|
|||
fieldtype: "Icon",
|
||||
fieldname: "icon",
|
||||
default: item.icon,
|
||||
change: function () {
|
||||
d.set_df_property("indicator_color", "hidden", this.get_value() ? 1 : 0);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: __("Indicator color"),
|
||||
fieldtype: "Select",
|
||||
fieldname: "indicator_color",
|
||||
options: this.indicator_colors,
|
||||
default: item.indicator_color,
|
||||
},
|
||||
],
|
||||
primary_action_label: __("Update"),
|
||||
|
|
@ -619,6 +656,7 @@ frappe.views.Workspace = class Workspace {
|
|||
name: old_item.name,
|
||||
title: values.title,
|
||||
icon: values.icon || "",
|
||||
indicator_color: values.indicator_color || "",
|
||||
parent: values.parent || "",
|
||||
public: values.is_public || 0,
|
||||
},
|
||||
|
|
@ -662,6 +700,7 @@ frappe.views.Workspace = class Workspace {
|
|||
|
||||
new_updated_item.title = new_item.title;
|
||||
new_updated_item.icon = new_item.icon;
|
||||
new_updated_item.indicator_color = new_item.indicator_color;
|
||||
new_updated_item.parent_page = new_item.parent || "";
|
||||
new_updated_item.public = new_item.is_public;
|
||||
|
||||
|
|
@ -783,8 +822,8 @@ frappe.views.Workspace = class Workspace {
|
|||
}
|
||||
|
||||
let $button = $(`
|
||||
<div class="btn btn-secondary btn-xs setting-btn dropdown-btn" title="${__("Setting")}">
|
||||
${frappe.utils.icon("dot-horizontal", "xs")}
|
||||
<div class="btn btn-xs setting-btn dropdown-btn" title="${__("Setting")}">
|
||||
${frappe.utils.icon("es-line-dot-horizontal", "xs")}
|
||||
</div>
|
||||
<div class="dropdown-list hidden"></div>
|
||||
`);
|
||||
|
|
@ -914,6 +953,16 @@ frappe.views.Workspace = class Workspace {
|
|||
fieldtype: "Icon",
|
||||
fieldname: "icon",
|
||||
default: new_page.icon,
|
||||
change: function () {
|
||||
d.set_df_property("indicator_color", "hidden", this.get_value() ? 1 : 0);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: __("Indicator color"),
|
||||
fieldtype: "Select",
|
||||
fieldname: "indicator_color",
|
||||
options: this.indicator_colors,
|
||||
default: new_page.indicator_color,
|
||||
},
|
||||
],
|
||||
primary_action_label: __("Duplicate"),
|
||||
|
|
@ -943,6 +992,7 @@ frappe.views.Workspace = class Workspace {
|
|||
new_page.name = values.title + (new_page.public ? "" : "-" + frappe.session.user);
|
||||
new_page.label = new_page.name;
|
||||
new_page.icon = values.icon;
|
||||
new_page.indicator_color = values.indicator_color;
|
||||
new_page.parent_page = values.parent || "";
|
||||
new_page.for_user = new_page.public ? "" : frappe.session.user;
|
||||
new_page.is_editable = !new_page.public;
|
||||
|
|
@ -1146,6 +1196,15 @@ frappe.views.Workspace = class Workspace {
|
|||
label: __("Icon"),
|
||||
fieldtype: "Icon",
|
||||
fieldname: "icon",
|
||||
change: function () {
|
||||
d.set_df_property("indicator_color", "hidden", this.get_value() ? 1 : 0);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: __("Indicator color"),
|
||||
fieldtype: "Select",
|
||||
fieldname: "indicator_color",
|
||||
options: this.indicator_colors,
|
||||
},
|
||||
],
|
||||
primary_action_label: __("Create"),
|
||||
|
|
@ -1172,6 +1231,7 @@ frappe.views.Workspace = class Workspace {
|
|||
public: values.is_public || 0,
|
||||
for_user: values.is_public ? "" : frappe.session.user,
|
||||
icon: values.icon,
|
||||
indicator_color: values.indicator_color,
|
||||
parent_page: values.parent || "",
|
||||
is_editable: true,
|
||||
selected: true,
|
||||
|
|
@ -1289,7 +1349,7 @@ frappe.views.Workspace = class Workspace {
|
|||
$sidebar_item.appendTo($child_section);
|
||||
$child_section.removeClass("hidden");
|
||||
$item_container.find(".drop-icon.hidden").removeClass("hidden");
|
||||
$item_container.find(".drop-icon use").attr("href", "#icon-small-up");
|
||||
$item_container.find(".drop-icon use").attr("href", "#es-line-up");
|
||||
}
|
||||
|
||||
let section = item.is_public ? "public" : "private";
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export default class Widget {
|
|||
|
||||
options.allow_sorting &&
|
||||
frappe.utils.add_custom_button(
|
||||
frappe.utils.icon("drag", "xs"),
|
||||
frappe.utils.icon("es-line-drag", "xs"),
|
||||
null,
|
||||
"drag-handle",
|
||||
__("Drag"),
|
||||
|
|
@ -58,7 +58,7 @@ export default class Widget {
|
|||
|
||||
options.allow_edit &&
|
||||
frappe.utils.add_custom_button(
|
||||
frappe.utils.icon("edit", "xs"),
|
||||
frappe.utils.icon("es-line-edit-alt", "xs"),
|
||||
() => this.edit(),
|
||||
"edit-button",
|
||||
__("Edit"),
|
||||
|
|
@ -99,7 +99,7 @@ export default class Widget {
|
|||
let title = max_chars ? frappe.ellipsis(base, max_chars) : base;
|
||||
|
||||
if (this.icon) {
|
||||
let icon = frappe.utils.icon(this.icon, "lg");
|
||||
let icon = frappe.utils.icon(this.icon, "sm");
|
||||
this.title_field[0].innerHTML = `${icon} <span class="ellipsis" title="${title}">${title}</span>`;
|
||||
} else {
|
||||
this.title_field[0].innerHTML = `<span class="ellipsis" title="${title}">${title}</span>`;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ frappe.provide("frappe.utils");
|
|||
|
||||
export default class LinksWidget extends Widget {
|
||||
constructor(opts) {
|
||||
opts.icon = opts.icon || "file";
|
||||
opts.icon = opts.icon || "es-line-filetype";
|
||||
super(opts);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -247,7 +247,7 @@ export default class NumberCardWidget extends Widget {
|
|||
color_class = "grey-stat";
|
||||
} else if (this.percentage_stat > 0) {
|
||||
caret_html = `<span class="indicator-pill-round green">
|
||||
${frappe.utils.icon("arrow-up-right", "xs")}
|
||||
${frappe.utils.icon("es-line-arrow-up-right", "xs")}
|
||||
</span>`;
|
||||
color_class = "green-stat";
|
||||
} else {
|
||||
|
|
@ -277,13 +277,7 @@ export default class NumberCardWidget extends Widget {
|
|||
|
||||
$(this.body).find(".widget-content").append(`<div class="card-stats ${color_class}">
|
||||
<span class="percentage-stat-area">
|
||||
${caret_html}
|
||||
<span class="percentage-stat">
|
||||
${stat} %
|
||||
</span>
|
||||
</span>
|
||||
<span class="stat-period text-muted">
|
||||
${stats_qualifier}
|
||||
${caret_html} ${stat} % ${stats_qualifier}
|
||||
</span>
|
||||
</div>`);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -50,10 +50,28 @@ export default class OnboardingWidget extends Widget {
|
|||
|
||||
let $step = $(`<a class="onboarding-step ${status}">
|
||||
<div class="step-title">
|
||||
<div class="step-index step-pending">${__(index + 1)}</div>
|
||||
<div class="step-index step-skipped">${frappe.utils.icon("tick", "xs")}</div>
|
||||
<div class="step-index step-complete">${frappe.utils.icon("tick", "xs")}</div>
|
||||
<div>${__(step.title)}</div>
|
||||
<div class="step-index step-pending">${frappe.utils.icon(
|
||||
"es-line-success",
|
||||
"md",
|
||||
"",
|
||||
"",
|
||||
"step-icon"
|
||||
)}</div>
|
||||
<div class="step-index step-skipped">${frappe.utils.icon(
|
||||
"es-line-close-circle",
|
||||
"md",
|
||||
"",
|
||||
"--icon-stroke: var(--gray-600);",
|
||||
"step-icon"
|
||||
)}</div>
|
||||
<div class="step-index step-complete">${frappe.utils.icon(
|
||||
"es-solid-success",
|
||||
"md",
|
||||
"",
|
||||
"",
|
||||
"step-icon"
|
||||
)}</div>
|
||||
<div class="step-text">${__(step.title)}</div>
|
||||
</div>
|
||||
</a>`);
|
||||
|
||||
|
|
@ -556,7 +574,7 @@ export default class OnboardingWidget extends Widget {
|
|||
|
||||
this.action_area.empty();
|
||||
const dismiss = $(
|
||||
`<div class="small" style="cursor:pointer;">${__(
|
||||
`<div class="btn btn-sm btn-secondary small" style="cursor:pointer;">${__(
|
||||
"Dismiss",
|
||||
null,
|
||||
"Stop showing the onboarding widget."
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export default class QuickListWidget extends Widget {
|
|||
setup_refresh_list_button() {
|
||||
this.refresh_list = $(
|
||||
`<div class="refresh-list btn btn-xs pull-right" title="${__("Refresh List")}">
|
||||
${frappe.utils.icon("refresh", "sm")}
|
||||
${frappe.utils.icon("es-line-reload", "sm")}
|
||||
</div>`
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -65,6 +65,10 @@ export default class ShortcutWidget extends Widget {
|
|||
set_actions() {
|
||||
if (this.in_customize_mode) return;
|
||||
|
||||
$(frappe.utils.icon("es-line-arrow-up-right", "xs", "", "", "ml-2")).appendTo(
|
||||
this.action_area
|
||||
);
|
||||
|
||||
this.widget.addClass("shortcut-widget-box");
|
||||
|
||||
let filters = frappe.utils.get_filter_from_json(this.stats_filter);
|
||||
|
|
@ -86,10 +90,13 @@ export default class ShortcutWidget extends Widget {
|
|||
};
|
||||
|
||||
this.action_area.empty();
|
||||
const label = get_label();
|
||||
let color = this.color && count ? this.color.toLowerCase() : "gray";
|
||||
$(`<div class="indicator-pill ellipsis ${color}">${label}</div>`).appendTo(
|
||||
$(frappe.utils.icon("es-line-arrow-up-right", "xs", "", "", "ml-2")).appendTo(
|
||||
this.action_area
|
||||
);
|
||||
const label = get_label();
|
||||
let color = this.color && count ? this.color.toLowerCase() : "gray";
|
||||
$(
|
||||
`<div class="indicator-pill no-indicator-dot ellipsis ${color}">${label}</div>`
|
||||
).appendTo(this.action_area);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ let marker_end_primary = {
|
|||
width: 11,
|
||||
height: 11,
|
||||
strokeWidth: 1.7,
|
||||
color: "#2490ef"
|
||||
color: "#171717"
|
||||
};
|
||||
|
||||
watch(
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
position: absolute;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
background-color: var(--fg-color);
|
||||
background-color: var(--bg-color);
|
||||
max-height: unquote("min(60vh, 300px)");
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
&> li {
|
||||
cursor: pointer;
|
||||
font-size: var(--text-md);
|
||||
@include get_textstyle("sm", "regular");
|
||||
padding: var(--padding-sm);
|
||||
color: var(--text-color);
|
||||
border-radius: var(--border-radius);
|
||||
|
|
@ -49,10 +49,14 @@
|
|||
overflow-y: clip;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
strong {
|
||||
@include get_textstyle("sm", "bold");
|
||||
}
|
||||
}
|
||||
|
||||
&> li .link-option {
|
||||
font-weight: normal;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
&> li:hover, &> li[aria-selected=true] {
|
||||
|
|
|
|||
|
|
@ -6,9 +6,18 @@
|
|||
|
||||
.btn {
|
||||
border: none;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--btn-shadow);
|
||||
font-size: var(--text-md);
|
||||
box-shadow: none;
|
||||
@include get_textstyle("base", "regular");
|
||||
|
||||
&:active {
|
||||
// override #dadada that comes from bootstrap (probably) to support dark theme.
|
||||
color: var(--text-color) !important;
|
||||
background-color: var(--control-bg) !important;
|
||||
box-shadow: var(--focus-default) !important;
|
||||
}
|
||||
|
||||
&.icon-btn {
|
||||
height: var(--btn-height);
|
||||
padding: 0px;
|
||||
|
|
@ -40,12 +49,13 @@
|
|||
|
||||
.btn-primary-light {
|
||||
@include button-variant(
|
||||
$background: $primary-light,
|
||||
$border: $primary-light,
|
||||
$hover-background: lighten($primary-light, 1%),
|
||||
$hover-border: $primary-light,
|
||||
$active-background: lighten($primary-light, 1%),
|
||||
$active-border: darken($primary-light, 12.5%)
|
||||
// not happy with this
|
||||
$background: $gray-300,
|
||||
$border: $gray-800,
|
||||
$hover-background: $gray-200,
|
||||
$hover-border: $gray-300,
|
||||
$active-background: $gray-300,
|
||||
$active-border: $gray-200
|
||||
);
|
||||
|
||||
color: var(--primary);
|
||||
|
|
@ -54,7 +64,7 @@
|
|||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--primary-light);
|
||||
box-shadow: var(--focus-default);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -62,30 +72,35 @@
|
|||
background-color: var(--control-bg);
|
||||
color: var(--text-color);
|
||||
&:hover, &:active {
|
||||
background-color: var(--gray-400);
|
||||
background-color: var(--btn-default-hover-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-default {
|
||||
background-color: var(--fg-color);
|
||||
background-color: var(--control-bg);
|
||||
color: var(--text-color);
|
||||
&:hover, &:active {
|
||||
background: var(--fg-hover-color);
|
||||
background: var(--btn-default-hover-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-primary {
|
||||
background-color: var(--primary);
|
||||
color: var(--white);
|
||||
background-color: var(--btn-primary);
|
||||
color: var(--neutral);
|
||||
white-space: nowrap;
|
||||
--icon-stroke: currentColor;
|
||||
--icon-fill-bg: var(--primary);
|
||||
--icon-fill-bg: var(--btn-primary);
|
||||
|
||||
&:active {
|
||||
color: var(--gray-100) !important;
|
||||
background-color: var(--invert-neutral) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-danger {
|
||||
background-color: var(--red-400);
|
||||
background-color: var(--danger);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
|
@ -99,7 +114,11 @@
|
|||
|
||||
[data-theme="dark"] {
|
||||
.btn-primary-light {
|
||||
background-color: var(--bg-dark-blue);
|
||||
background-color: var(--bg-dark-gray);
|
||||
box-shadow: none;
|
||||
}
|
||||
.btn-primary:active {
|
||||
color: var(--gray-900) !important;
|
||||
background-color: var(--invert-neutral) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
.toggle-password {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
top: 0;
|
||||
right: 8px;
|
||||
padding: 3px;
|
||||
z-index: 3;
|
||||
|
|
@ -49,6 +49,7 @@ select.form-control {
|
|||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
/* table multiselect */
|
||||
|
|
@ -130,7 +131,7 @@ select.form-control {
|
|||
}
|
||||
|
||||
.frappe-control {
|
||||
font-size: var(--text-md);
|
||||
@include get_textstyle("base", "regular");
|
||||
.control-label.reqd:after {
|
||||
content: ' *';
|
||||
color: var(--red-400);
|
||||
|
|
@ -147,7 +148,7 @@ select.form-control {
|
|||
margin-bottom: var(--margin-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: var(--text-sm);
|
||||
@include get_textstyle("sm", "regular");
|
||||
word-wrap: break-word;
|
||||
position: relative;
|
||||
p:last-child {
|
||||
|
|
@ -165,7 +166,7 @@ select.form-control {
|
|||
}
|
||||
.action-btn {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
top: 0px;
|
||||
right: 4px;
|
||||
padding: 3px;
|
||||
z-index: 3;
|
||||
|
|
@ -206,6 +207,7 @@ select.form-control {
|
|||
}
|
||||
|
||||
.ace_editor {
|
||||
min-height: 48px;
|
||||
background-color: var(--control-bg);
|
||||
color: var(--text-color);
|
||||
.ace_gutter {
|
||||
|
|
@ -234,7 +236,14 @@ select.form-control {
|
|||
padding: 6px 10px;
|
||||
background: var(--control-bg);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: var(--text-md);
|
||||
@include get_textstyle("base", "regular");
|
||||
|
||||
.es-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.btn {
|
||||
padding: 0px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -503,10 +512,13 @@ button.data-pill {
|
|||
height: var(--btn-height);
|
||||
background-color: var(--fg-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: calc(var(--padding-xs) - 2px) var(--padding-sm);
|
||||
color: var(--text-color);
|
||||
background-color: var(--subtle-fg);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.pill-label {
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.capture-remove-btn {
|
||||
|
|
|
|||
|
|
@ -1,171 +1,45 @@
|
|||
$input-height: 28px !default;
|
||||
$input-height: 28px;
|
||||
$disabled-input-height: 22px;
|
||||
|
||||
:root,
|
||||
[data-theme="light"] {
|
||||
--brand-color: #0089FF;
|
||||
|
||||
--pink-900: #5B1E34;
|
||||
--pink-800: #702440;
|
||||
--pink-700: #97264F;
|
||||
--pink-600: #D2326D;
|
||||
--pink-500: #F2508B;
|
||||
--pink-400: #F46B9E;
|
||||
--pink-300: #F584AE;
|
||||
--pink-200: #FAB9D1;
|
||||
--pink-100: #FCDCE8;
|
||||
--pink-50 : #FEEDF3;
|
||||
|
||||
--blue-900: #1A4469;
|
||||
--blue-800: #154875;
|
||||
--blue-700: #1366AE;
|
||||
--blue-600: #1673C5;
|
||||
--blue-500: #2490EF;
|
||||
--blue-400: #50A6F2;
|
||||
--blue-300: #7CBCF5;
|
||||
--blue-200: #A7D3F9;
|
||||
--blue-100: #D3E9FC;
|
||||
--blue-50 : #F0F8FE;
|
||||
|
||||
--cyan-900: #006464;
|
||||
--cyan-800: #007272;
|
||||
--cyan-700: #008b8b;
|
||||
--cyan-600: #02c5c5;
|
||||
--cyan-500: #00ffff;
|
||||
--cyan-400: #2ef8f8;
|
||||
--cyan-300: #6efcfc;
|
||||
--cyan-200: #a0f8f8;
|
||||
--cyan-100: #c7fcfc;
|
||||
--cyan-50 : #dafafa;
|
||||
|
||||
--green-900: #2D401D;
|
||||
--green-800: #44622A;
|
||||
--green-700: #518B21;
|
||||
--green-600: #68AB30;
|
||||
--green-500: #8CCF54;
|
||||
--green-400: #A5D97A;
|
||||
--green-300: #BCE39B;
|
||||
--green-200: #D2ECBD;
|
||||
--green-100: #E9F6DE;
|
||||
--green-50 : #F4FAEE;
|
||||
|
||||
--dark-green-900: #1F3E2B;
|
||||
--dark-green-800: #29593B;
|
||||
--dark-green-700: #286840;
|
||||
--dark-green-600: #2E844E;
|
||||
--dark-green-500: #2F9D58;
|
||||
--dark-green-400: #59B179;
|
||||
--dark-green-300: #82C49B;
|
||||
--dark-green-200: #ACD8BC;
|
||||
--dark-green-100: #DFEEE5;
|
||||
--dark-green-50: #EAF5EE;
|
||||
|
||||
--gray-900: #1F272E;
|
||||
--gray-800: #333C44;
|
||||
--gray-700: #505A62;
|
||||
--gray-600: #687178;
|
||||
--gray-500: #98A1A9;
|
||||
--gray-400: #C0C6CC;
|
||||
--gray-300: #DCE0E3;
|
||||
--gray-200: #EBEEF0;
|
||||
--gray-100: #F4F5F6;
|
||||
--gray-50: #F9FAFA;
|
||||
|
||||
--red-900: #631D1D;
|
||||
--red-800: #802121;
|
||||
--red-700: #9B2C2C;
|
||||
--red-600: #C53030;
|
||||
--red-500: #E24C4C;
|
||||
--red-400: #EC645E;
|
||||
--red-300: #FCA4A4;
|
||||
--red-200: #FCC8C8;
|
||||
--red-100: #FFECEC;
|
||||
--red-50 : #FFF5F5;
|
||||
|
||||
--yellow-900: #5F370E;
|
||||
--yellow-800: #744210;
|
||||
--yellow-700: #975A16;
|
||||
--yellow-600: #B7791F;
|
||||
--yellow-500: #D69E2E;
|
||||
--yellow-400: #ECB64B;
|
||||
--yellow-300: #F6C35E;
|
||||
--yellow-200: #FAD489;
|
||||
--yellow-100: #FEE9BF;
|
||||
--yellow-50: #FEF4E2;
|
||||
|
||||
--orange-900: #653019;
|
||||
--orange-800: #7B3A1E;
|
||||
--orange-700: #9C4621;
|
||||
--orange-600: #CB5A2A;
|
||||
--orange-500: #F8814F;
|
||||
--orange-400: #F9966C;
|
||||
--orange-300: #FDAE8C;
|
||||
--orange-200: #FECDB8;
|
||||
--orange-100: #FFEAE1;
|
||||
--orange-50: #FFF5F0;
|
||||
|
||||
--purple-900: #343360;
|
||||
--purple-800: #45438F;
|
||||
--purple-700: #4946BF;
|
||||
--purple-600: #6461D6;
|
||||
--purple-500: #8684FF;
|
||||
--purple-400: #9897F7;
|
||||
--purple-300: #B9B8FA;
|
||||
--purple-200: #DAD9F7;
|
||||
--purple-100: #EAEAFB;
|
||||
--purple-50: #F2F2FD;
|
||||
--brand-color: var(--primary);
|
||||
|
||||
--padding-xs: 5px;
|
||||
--padding-sm: 10px;
|
||||
--padding-sm: 6px;
|
||||
--padding-md: 15px;
|
||||
--padding-lg: 20px;
|
||||
--padding-xl: 30px;
|
||||
--padding-2xl: 40px;
|
||||
|
||||
--margin-xs: 5px;
|
||||
--margin-sm: 8px;
|
||||
--margin-sm: 10px;
|
||||
--margin-md: 15px;
|
||||
--margin-lg: 20px;
|
||||
--margin-xl: 30px;
|
||||
--margin-2xl: 40px;
|
||||
|
||||
--font-stack: "Inter", "-apple-system", "BlinkMacSystemFont","Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
|
||||
--text-bold: 500;
|
||||
|
||||
--shadow-xs: rgba(0, 0, 0, 0.05) 0px 0.5px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px;
|
||||
--shadow-sm: 0px 1px 2px rgba(25, 39, 52, 0.05), 0px 0px 4px rgba(25, 39, 52, 0.1);
|
||||
--shadow-base: 0px 4px 8px rgba(25, 39, 52, 0.06), 0px 0px 4px rgba(25, 39, 52, 0.12);
|
||||
--shadow-md: 0px 8px 14px rgba(25, 39, 52, 0.08), 0px 2px 6px rgba(25, 39, 52, 0.04);
|
||||
--shadow-lg: 0px 18px 22px rgba(25, 39, 52, 0.1), 0px 1px 10px rgba(0, 0, 0, 0.06), 0px 0.5px 5px rgba(25, 39, 52, 0.04);
|
||||
|
||||
--drop-shadow: 0px 0.5px 0px rgba(0, 0, 0, 0.05), 0px 0px 0px rgba(0, 0, 0, 0), 0px 2px 4px rgba(0, 0, 0, 0.05);
|
||||
|
||||
--modal-shadow: var(--shadow-md);
|
||||
--card-shadow: var(--shadow-sm);
|
||||
--btn-shadow: var(--shadow-xs);
|
||||
|
||||
// Type Colors
|
||||
--text-muted: var(--gray-700);
|
||||
--text-light: var(--gray-800);
|
||||
--text-dark: var(--fg-color);
|
||||
--text-color: var(--gray-900);
|
||||
--heading-color: var(--gray-900);
|
||||
|
||||
// SVG Colors
|
||||
--icon-fill: transparent;
|
||||
--icon-fill-bg: var(--fg-color);
|
||||
--icon-stroke: var(--gray-900);
|
||||
--icon-stroke: var(--gray-800);
|
||||
|
||||
// Background Text Color Pairs
|
||||
--bg-blue: var(--blue-100);
|
||||
--bg-light-blue: var(--blue-50);
|
||||
--bg-dark-blue: var(--blue-300);
|
||||
--bg-green: var(--dark-green-50);
|
||||
--bg-yellow: var(--yellow-50);
|
||||
--bg-orange: var(--orange-50);
|
||||
--bg-green: var(--green-100);
|
||||
--bg-yellow: var(--yellow-100);
|
||||
--bg-orange: var(--orange-100);
|
||||
--bg-red: var(--red-100);
|
||||
--bg-gray: var(--gray-200);
|
||||
--bg-grey: var(--gray-200);
|
||||
--bg-gray: var(--gray-100);
|
||||
--bg-grey: var(--gray-100);
|
||||
--bg-light-gray: var(--gray-100);
|
||||
--bg-dark-gray: var(--gray-400);
|
||||
--bg-darkgrey: var(--gray-400);
|
||||
|
|
@ -173,23 +47,15 @@ $input-height: 28px !default;
|
|||
--bg-pink: var(--pink-50);
|
||||
--bg-cyan: var(--cyan-50);
|
||||
|
||||
//font sizes
|
||||
--text-xs: 11px;
|
||||
--text-sm: 12px;
|
||||
--text-md: 13px;
|
||||
--text-base: 14px;
|
||||
--text-lg: 16px;
|
||||
--text-xl: 18px;
|
||||
--text-2xl: 20px;
|
||||
--text-3xl: 22px;
|
||||
|
||||
|
||||
--text-on-blue: var(--blue-700);
|
||||
--text-on-light-blue: var(--blue-600);
|
||||
--text-on-dark-blue: var(--blue-800);
|
||||
--text-on-green: var(--dark-green-700);
|
||||
--text-on-green: var(--green-800);
|
||||
--text-on-yellow: var(--yellow-700);
|
||||
--text-on-orange: var(--orange-700);
|
||||
--text-on-red: var(--red-600);
|
||||
--text-on-red: var(--red-700);
|
||||
--text-on-gray: var(--gray-700);
|
||||
--text-on-grey: var(--gray-700);
|
||||
--text-on-darkgrey: var(--gray-800);
|
||||
|
|
@ -197,7 +63,7 @@ $input-height: 28px !default;
|
|||
--text-on-light-gray: var(--gray-800);
|
||||
--text-on-purple: var(--purple-700);
|
||||
--text-on-pink: var(--pink-700);
|
||||
--text-on-cyan: var(--cyan-800);
|
||||
--text-on-cyan: var(--cyan-700);
|
||||
|
||||
// alert colors
|
||||
--alert-text-danger: var(--red-600);
|
||||
|
|
@ -207,15 +73,17 @@ $input-height: 28px !default;
|
|||
--alert-bg-danger: var(--red-50);
|
||||
--alert-bg-warning: var(--yellow-50);
|
||||
--alert-bg-info: var(--blue-50);
|
||||
--alert-bg-success: var(--green-50);
|
||||
--alert-bg-success: var(--green-100);
|
||||
|
||||
// Layout Colors
|
||||
--bg-color: var(--gray-50);
|
||||
--bg-color: white;
|
||||
--fg-color: white;
|
||||
--subtle-accent: var(--gray-50);
|
||||
--subtle-fg: var(--gray-100);
|
||||
--navbar-bg: white;
|
||||
--fg-hover-color: var(--gray-100);
|
||||
--card-bg: var(--fg-color);
|
||||
--disabled-text-color: var(--gray-700);
|
||||
--disabled-text-color: var(--gray-600);
|
||||
--disabled-control-bg: var(--gray-50);
|
||||
--control-bg: var(--gray-100);
|
||||
--control-bg-on-gray: var(--gray-200);
|
||||
|
|
@ -227,6 +95,7 @@ $input-height: 28px !default;
|
|||
--awesomplete-hover-bg: var(--control-bg);
|
||||
|
||||
// Button Colors
|
||||
--btn-primary: var(--gray-900);
|
||||
--btn-default-bg: var(--gray-100);
|
||||
--btn-default-hover-bg: var(--gray-300);
|
||||
|
||||
|
|
@ -237,7 +106,7 @@ $input-height: 28px !default;
|
|||
--scrollbar-track-color: var(--gray-200);
|
||||
|
||||
--shadow-inset: inset 0px -1px 0px var(--gray-300);
|
||||
--border-color: var(--gray-100);
|
||||
--border-color: var(--gray-200);
|
||||
--dark-border-color: var(--gray-300);
|
||||
--table-border-color: var(--gray-200);
|
||||
--highlight-color: var(--gray-50);
|
||||
|
|
@ -245,7 +114,7 @@ $input-height: 28px !default;
|
|||
|
||||
--btn-group-border-color: var(--gray-300);
|
||||
|
||||
--field-placeholder-color: var(--gray-50);
|
||||
--placeholder-color: var(--gray-50);
|
||||
|
||||
--highlight-shadow: 1px 1px 10px var(--blue-50), 0px 0px 4px var(--blue-600);
|
||||
|
||||
|
|
@ -253,15 +122,9 @@ $input-height: 28px !default;
|
|||
--code-block-bg: var(--gray-900);
|
||||
--code-block-text: var(--gray-400);
|
||||
|
||||
// Border Sizes
|
||||
--border-radius-sm: 4px;
|
||||
--border-radius: 6px;
|
||||
--border-radius-md: 8px;
|
||||
--border-radius-lg: 12px;
|
||||
--border-radius-full: 999px;
|
||||
|
||||
--primary-color: #2490EF;
|
||||
--btn-height: 30px;
|
||||
--primary-color: var(--gray-900);
|
||||
--btn-height: 28px;
|
||||
|
||||
// input
|
||||
--input-height: #{$input-height};
|
||||
|
|
@ -270,8 +133,15 @@ $input-height: 28px !default;
|
|||
// Checkbox
|
||||
--checkbox-right-margin: var(--margin-xs);
|
||||
--checkbox-size: 14px;
|
||||
--checkbox-color: var(--neutral-black);
|
||||
|
||||
--checkbox-focus-shadow: 0 0 0 2px var(--gray-300);
|
||||
--checkbox-gradient: linear-gradient(180deg, #4AC3F8 -124.51%, var(--primary) 100%);
|
||||
--checkbox-gradient: linear-gradient(180deg, var(--primary) -124.51%, var(--primary) 100%);
|
||||
--checkbox-disabled-gradient: linear-gradient(180deg, var(--disabled-control-bg) -124.51%, var(--disabled-control-bg) 100%);
|
||||
|
||||
|
||||
// switch
|
||||
--switch-bg: var(--gray-300);
|
||||
|
||||
// "diff" colors
|
||||
--diff-added: var(--green-100);
|
||||
|
|
|
|||
|
|
@ -8,8 +8,9 @@
|
|||
z-index: 9999 !important;
|
||||
background: var(--fg-color);
|
||||
color: var(--text-color);
|
||||
border-radius: var(--border-radius);
|
||||
border-radius: var(--border-radius-lg);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: var(--shadow-2xl);
|
||||
position: fixed;
|
||||
|
||||
&.active {
|
||||
|
|
@ -19,6 +20,9 @@
|
|||
&--nav {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
&--nav-title:hover, &--nav-action:hover {
|
||||
background-color: var(--fg-hover-color);
|
||||
}
|
||||
|
||||
&--time-current-hours, &--time-current-minutes, &--time-current-seconds {
|
||||
font-family: inherit;
|
||||
|
|
@ -34,28 +38,32 @@
|
|||
|
||||
&--cell {
|
||||
&.-current- {
|
||||
color: var(--brand-color);
|
||||
color: var(--text-color);
|
||||
|
||||
&.-in-range- {
|
||||
color: var(--brand-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.-range-from-, &.-range-to- {
|
||||
border: 1px solid fade(#0089FF, 30%);
|
||||
background: fade(#0089FF, 10%);
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--date-range-bg);
|
||||
}
|
||||
|
||||
&.-selected-, &.-current-.-selected- {
|
||||
background: #0089FF;
|
||||
color: var(--date-active-text);
|
||||
background: var(--date-active-bg);
|
||||
border-radius: var(--border-radius-tiny);
|
||||
}
|
||||
|
||||
&.-in-range- {
|
||||
background: fade(#0089FF, 5%);
|
||||
color: var(--text-color);
|
||||
background: var(--date-range-bg);
|
||||
}
|
||||
|
||||
&.-in-range-.-focus- {
|
||||
background: fade(#0089FF, 10%);
|
||||
color: var(--date-active-text);
|
||||
background: var(--date-active-bg);
|
||||
}
|
||||
|
||||
&.-focus- {
|
||||
|
|
@ -63,7 +71,8 @@
|
|||
}
|
||||
|
||||
&.-selected-.-focus- {
|
||||
background: fade(#0089FF, 90%);
|
||||
color: var(--date-active-text);
|
||||
background: var(--date-active-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -72,7 +81,7 @@
|
|||
}
|
||||
|
||||
&--time-row {
|
||||
background-image: linear-gradient(to right, #0089FF, #0089FF);
|
||||
background-image: linear-gradient(to right, var(--gray-900), var(--gray-900));
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 1px;
|
||||
background-position: left 50%;
|
||||
|
|
@ -90,7 +99,7 @@
|
|||
}
|
||||
|
||||
&--button {
|
||||
color: var(--brand-color);
|
||||
color: var(--text-color);
|
||||
&:hover {
|
||||
color: var(--text-color);
|
||||
background-color: var(--fg-hover-color);
|
||||
|
|
|
|||
|
|
@ -73,6 +73,8 @@
|
|||
}
|
||||
|
||||
.level-item {
|
||||
font-weight: var(--weight-medium);
|
||||
color: var(--text-muted);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-basis: auto;
|
||||
|
|
|
|||
|
|
@ -1,29 +1,30 @@
|
|||
.form-control {
|
||||
border: none;
|
||||
font-size: var(--text-md);
|
||||
height: var(--input-height);
|
||||
@include get_textstyle("base", "regular");
|
||||
border-radius: var(--border-radius-sm);
|
||||
padding: var(--input-padding);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-control.bold {
|
||||
font-weight: 500;
|
||||
font-weight: var(--weight-medium);
|
||||
}
|
||||
|
||||
.like-disabled-input {
|
||||
.for-description {
|
||||
font-weight: normal;
|
||||
font-size: var(--text-sm);
|
||||
@include get_textstyle("sm", "regular");
|
||||
}
|
||||
min-height: var(--input-height);
|
||||
border-radius: $border-radius;
|
||||
font-weight: 400;
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--border-radius-sm);
|
||||
padding: var(--disabled-input-padding);
|
||||
cursor: default;
|
||||
color: var(--disabled-text-color);
|
||||
background-color: var(--disabled-control-bg);
|
||||
}
|
||||
|
||||
.head-title {
|
||||
font-size: var(--text-lg);
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 700;
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-variation-settings: "opsz" 24;
|
||||
}
|
||||
|
||||
/* checkbox */
|
||||
|
|
@ -15,7 +16,8 @@ html, body {
|
|||
--checkbox-right-margin: 8px;
|
||||
|
||||
.label-area {
|
||||
font-size: var(--text-sm);
|
||||
@include get_textstyle("sm", "medium");
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.input-area, .disp-area {
|
||||
|
|
@ -25,6 +27,8 @@ html, body {
|
|||
|
||||
.frappe-card {
|
||||
@include card();
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--gray-300);
|
||||
}
|
||||
|
||||
.frappe-control[data-fieldtype="Select"].frappe-control[data-fieldname="color"] {
|
||||
|
|
@ -52,6 +56,7 @@ html, body {
|
|||
-moz-appearance: none;
|
||||
/* for Chrome */
|
||||
-webkit-appearance: none;
|
||||
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
|
|
@ -59,7 +64,7 @@ html, body {
|
|||
padding-right: inherit;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 7px;
|
||||
top: 3px;
|
||||
right: 12px;
|
||||
|
||||
&.xs {
|
||||
|
|
@ -79,7 +84,7 @@ html, body {
|
|||
padding-right: inherit;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 7px;
|
||||
top: 3px;
|
||||
left: 12px;
|
||||
max-width: 80%;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.form-grid {
|
||||
border: 1px solid var(--table-border-color);
|
||||
border-radius: var(--border-radius);
|
||||
border-radius: var(--border-radius-md);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
|
@ -10,13 +10,37 @@
|
|||
|
||||
.grid-heading-row {
|
||||
border-bottom: 1px solid var(--table-border-color);
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-md);
|
||||
color: var(--gray-600);
|
||||
background-color: var(--subtle-fg);
|
||||
@include get_textstyle("sm", "regular");
|
||||
height: 32px;
|
||||
padding: 0 !important;
|
||||
border-top-left-radius: var(--border-radius-md);
|
||||
border-top-right-radius: var(--border-radius-md);
|
||||
|
||||
&.with-filter {
|
||||
height: 64px;
|
||||
}
|
||||
.filter-row {
|
||||
background-color: var(--bg-color);
|
||||
|
||||
.search {
|
||||
// TODO: Align with table grid without overwriting padding if possible
|
||||
padding: 4px 7px 4px 7px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-static-col, .row-check, .row-index {
|
||||
height: 32px;
|
||||
padding: 6px 8px !important;
|
||||
}
|
||||
.grid-static-col {
|
||||
.static-area.reqd:after {
|
||||
content: ' *';
|
||||
color: var(--red-400);
|
||||
padding: 6px 8px !important;
|
||||
.static-area{
|
||||
&.reqd:after {
|
||||
content: ' *';
|
||||
color: var(--red-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -28,7 +52,7 @@
|
|||
}
|
||||
|
||||
.data-row textarea {
|
||||
height: 40px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.form-grid .data-row {
|
||||
|
|
@ -72,7 +96,8 @@
|
|||
}
|
||||
|
||||
.grid-body .data-row {
|
||||
font-size: $font-size-sm;
|
||||
@include get_textstyle("sm", "regular");
|
||||
color: var(--text-muted)
|
||||
}
|
||||
|
||||
.grid-empty,
|
||||
|
|
@ -88,8 +113,7 @@
|
|||
|
||||
.grid-static-col,
|
||||
.row-index {
|
||||
height: 34px;
|
||||
padding: 8px;
|
||||
height: 38px;
|
||||
max-height: 200px;
|
||||
|
||||
&.search {
|
||||
|
|
@ -103,8 +127,7 @@
|
|||
}
|
||||
|
||||
.row-check {
|
||||
height: 34px;
|
||||
padding: 8px 3px !important;
|
||||
height: 38px;
|
||||
text-align: center;
|
||||
|
||||
input {
|
||||
|
|
@ -112,7 +135,7 @@
|
|||
}
|
||||
|
||||
&.search {
|
||||
padding: 0 !important;
|
||||
padding: var(--grid-padding) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -163,8 +186,7 @@
|
|||
}
|
||||
|
||||
.col {
|
||||
padding-left: var(--padding-sm);
|
||||
padding-right: var(--padding-sm);
|
||||
padding: var(--grid-padding);
|
||||
border-right: 1px solid var(--table-border-color);
|
||||
// overflow: hidden;
|
||||
}
|
||||
|
|
@ -181,19 +203,25 @@
|
|||
|
||||
.btn-open-row {
|
||||
display: flex;
|
||||
padding-top: var(--padding-sm);
|
||||
justify-content: center;
|
||||
line-height: unset;
|
||||
div {
|
||||
margin-left: var(--margin-xs);
|
||||
line-height: 1.7em;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-row {
|
||||
// TODO: Dark and Light Mode
|
||||
--control-bg: var(--neutral);
|
||||
--input-disabled-bg: var(--gray-50);
|
||||
.grid-static-col {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.frappe-control[data-fieldtype=Select].form-group .select-icon {
|
||||
top: 9px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin: 0px;
|
||||
text-align: center;
|
||||
|
|
@ -201,19 +229,20 @@
|
|||
}
|
||||
|
||||
textarea {
|
||||
height: 37px !important;
|
||||
height: 46px !important;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 0px;
|
||||
border: 0px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 9px;
|
||||
height: 34px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
top: 2px;
|
||||
top: 5px;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
|
|
@ -352,8 +381,7 @@
|
|||
|
||||
.section-head {
|
||||
padding: 0;
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 500;
|
||||
@include get_textstyle("lg", "medium");
|
||||
}
|
||||
|
||||
.form-column:first-child {
|
||||
|
|
@ -421,7 +449,9 @@
|
|||
.grid-custom-buttons:empty {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.grid-footer {
|
||||
margin-top: var(--margin-sm);
|
||||
}
|
||||
.grid-footer, .grid-custom-buttons {
|
||||
padding: var(--padding-sm) 0px;
|
||||
background-color: var(--fg-color);
|
||||
|
|
|
|||
|
|
@ -11,10 +11,18 @@
|
|||
stroke: var(--icon-stroke);
|
||||
}
|
||||
|
||||
.es-icon {
|
||||
@extend .icon;
|
||||
// reverse fill and stroke because of the way es icon is drawn
|
||||
fill: var(--icon-stroke);
|
||||
stroke: var(--icon-fill);
|
||||
}
|
||||
|
||||
/* like icon */
|
||||
use.like-icon {
|
||||
--icon-stroke: transparent;
|
||||
cursor: pointer;
|
||||
stroke: var(--gray-500);
|
||||
stroke: var(--gray-600);
|
||||
}
|
||||
|
||||
#icon-file-large {
|
||||
|
|
@ -26,7 +34,7 @@ use.like-icon {
|
|||
}
|
||||
|
||||
#icon-close {
|
||||
fill: var(--gray-600);
|
||||
fill: var(--invert-neutral);
|
||||
}
|
||||
|
||||
.icon > .close-alt {
|
||||
|
|
@ -35,8 +43,9 @@ use.like-icon {
|
|||
|
||||
.liked {
|
||||
use.like-icon {
|
||||
stroke: none;
|
||||
fill: var(--red-500);
|
||||
--icon-stroke: var(--red-500);
|
||||
stroke: var(--icon-stroke);
|
||||
fill: var(--icon-stroke);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,26 +8,23 @@
|
|||
|
||||
.indicator::before {
|
||||
content: '';
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
border-radius: var(--border-radius);
|
||||
margin: 0px 8px 0px 0px;
|
||||
}
|
||||
|
||||
.indicator-pill,
|
||||
.indicator-pill-right {
|
||||
padding: 3px 10px;
|
||||
font-size: var(--text-sm);
|
||||
border-radius: var( --border-radius);
|
||||
font-weight: 500;
|
||||
height: 24px;
|
||||
@include get_textstyle("sm", "regular");
|
||||
padding: 4.5px 8px;
|
||||
border-radius: var( --border-radius-full);
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.indicator-pill-round {
|
||||
@include get_textstyle("sm", "regular");
|
||||
justify-content: center;
|
||||
font-size: var(--text-sm);
|
||||
border-radius: 50%;
|
||||
font-weight: 500;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
|
@ -36,8 +33,8 @@
|
|||
.indicator-pill-right::after {
|
||||
content:'';
|
||||
display: inline-table;
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -150,6 +150,10 @@ body.modal-open[style^="padding-right"] {
|
|||
|
||||
}
|
||||
|
||||
.modal-backdrop.show {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.modal-minimize {
|
||||
position: initial;
|
||||
height: 0;
|
||||
|
|
|
|||
|
|
@ -32,16 +32,101 @@
|
|||
}
|
||||
/*rtl:end:ignore*/
|
||||
|
||||
// Quill doesn't use variables for :(
|
||||
.ql-snow.ql-toolbar button:hover,
|
||||
.ql-snow .ql-toolbar button:hover,
|
||||
.ql-snow.ql-toolbar button:focus,
|
||||
.ql-snow .ql-toolbar button:focus,
|
||||
.ql-snow.ql-toolbar button.ql-active,
|
||||
.ql-snow .ql-toolbar button.ql-active,
|
||||
.ql-snow.ql-toolbar .ql-picker-label:hover,
|
||||
.ql-snow .ql-toolbar .ql-picker-label:hover,
|
||||
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
|
||||
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
|
||||
.ql-snow.ql-toolbar .ql-picker-item:hover,
|
||||
.ql-snow .ql-toolbar .ql-picker-item:hover,
|
||||
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
|
||||
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
|
||||
color: var(--invert-neutral);
|
||||
}
|
||||
.ql-snow.ql-toolbar button:hover .ql-fill,
|
||||
.ql-snow .ql-toolbar button:hover .ql-fill,
|
||||
.ql-snow.ql-toolbar button:focus .ql-fill,
|
||||
.ql-snow .ql-toolbar button:focus .ql-fill,
|
||||
.ql-snow.ql-toolbar button.ql-active .ql-fill,
|
||||
.ql-snow .ql-toolbar button.ql-active .ql-fill,
|
||||
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
|
||||
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
|
||||
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
|
||||
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
|
||||
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
|
||||
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
|
||||
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
|
||||
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
|
||||
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
|
||||
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
|
||||
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
|
||||
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
|
||||
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
|
||||
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
|
||||
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
|
||||
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
|
||||
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
|
||||
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
|
||||
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
|
||||
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
|
||||
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
|
||||
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
|
||||
fill: var(--invert-neutral);
|
||||
}
|
||||
.ql-snow.ql-toolbar button:hover .ql-stroke,
|
||||
.ql-snow .ql-toolbar button:hover .ql-stroke,
|
||||
.ql-snow.ql-toolbar button:focus .ql-stroke,
|
||||
.ql-snow .ql-toolbar button:focus .ql-stroke,
|
||||
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
|
||||
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
|
||||
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
|
||||
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
|
||||
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
|
||||
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
|
||||
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
|
||||
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
|
||||
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
|
||||
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
|
||||
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
|
||||
stroke: var(--invert-neutral);
|
||||
}
|
||||
|
||||
.ql-toolbar.ql-snow {
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
background-color: var(--fg-color);
|
||||
box-shadow: var(--shadow-inset);
|
||||
padding-bottom: 0;
|
||||
background-color: var(--gray-200);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 0;
|
||||
padding-top: 4px;
|
||||
|
||||
}
|
||||
[data-theme="dark"] {
|
||||
.ql-toolbar.ql-snow {
|
||||
background-color: var(--gray-900);
|
||||
}
|
||||
}
|
||||
|
||||
.ql-container.ql-snow {
|
||||
background-color: var(--gray-100);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
|
|
@ -84,7 +169,7 @@
|
|||
}
|
||||
|
||||
.ql-snow .ql-picker {
|
||||
font-size: var(--text-sm);
|
||||
@include get_textstyle("sm", "regular");
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
|
|
@ -161,7 +246,7 @@
|
|||
border-radius: var(--border-radius-lg);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 2px 5px;
|
||||
font-size: var(--text-sm);
|
||||
@include get_textstyle("sm", "regular");
|
||||
background-color: var(--user-mention-bg-color);
|
||||
a[href] {
|
||||
text-decoration: none;
|
||||
|
|
@ -212,7 +297,7 @@
|
|||
.ql-editor blockquote {
|
||||
border-left: 4px solid var(--gray-300);
|
||||
padding-left: var(--padding-sm);
|
||||
font-size: var(--text-sm);
|
||||
@include get_textstyle("sm", "regular");
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
|
@ -245,3 +330,9 @@
|
|||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-input-wrapper .ql-editor.ql-blank::before {
|
||||
left: 8px;
|
||||
color: var(--text-muted);
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -12,11 +12,11 @@
|
|||
--blue-avatar-bg: var(--blue-50);
|
||||
--blue-avatar-color: var(--blue-500);
|
||||
|
||||
--green-avatar-bg: var(--green-50);
|
||||
--green-avatar-color: var(--green-500);
|
||||
--green-avatar-bg: var(--green-200);
|
||||
--green-avatar-color: var(--green-800);
|
||||
|
||||
--dark-green-avatar-bg: var(--dark-green-50);
|
||||
--dark-green-avatar-color: var(--dark-green-500);
|
||||
--dark-green-avatar-bg: var(--green-200);
|
||||
--dark-green-avatar-color: var(--green-800);
|
||||
|
||||
--red-avatar-bg: var(--red-50);
|
||||
--red-avatar-color: var(--red-500);
|
||||
|
|
@ -32,9 +32,9 @@
|
|||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--avatar-frame-color: var(--gray-50);
|
||||
--avatar-frame-bg: var(--gray-400);
|
||||
--avatar-frame-border: var(--gray-400);
|
||||
--avatar-frame-color: var(--gray-600);
|
||||
--avatar-frame-bg: var(--gray-800);
|
||||
--avatar-frame-border: var(--gray-700);
|
||||
|
||||
--orange-avatar-bg: var(--orange-600);
|
||||
--orange-avatar-color: var(--orange-100);
|
||||
|
|
@ -46,10 +46,10 @@
|
|||
--blue-avatar-color: var(--blue-50);
|
||||
|
||||
--green-avatar-bg: var(--green-500);
|
||||
--green-avatar-color: var(--green-50);
|
||||
--green-avatar-color: var(--green-100);
|
||||
|
||||
--dark-green-avatar-bg: var(--dark-green-500);
|
||||
--dark-green-avatar-color: var(--dark-green-50);
|
||||
--dark-green-avatar-bg: var(--green-500);
|
||||
--dark-green-avatar-color: var(--green-100);
|
||||
|
||||
--red-avatar-bg: var(--red-500);
|
||||
--red-avatar-color: var(--red-50);
|
||||
|
|
@ -103,11 +103,11 @@
|
|||
}
|
||||
|
||||
.avatar-medium {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
.standard-image {
|
||||
font-size: var(--text-base);
|
||||
@include get_textstyle("base", "regular");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
height: 64px;
|
||||
|
||||
.standard-image {
|
||||
font-size: var(--text-2xl);
|
||||
@include get_textstyle("2xl", "regular");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
height: 108px;
|
||||
|
||||
.standard-image {
|
||||
font-size: var(--text-2xl);
|
||||
@include get_textstyle("2xl", "regular");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -194,8 +194,7 @@
|
|||
}
|
||||
|
||||
.avatar-extra-count {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
@include get_textstyle("sm", "medium");
|
||||
color: $white;
|
||||
background-color: var(--blue-500);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,14 +2,13 @@
|
|||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
background-color: white;
|
||||
font-size: var(--text-sm);
|
||||
@include get_textstyle("sm", "regular");
|
||||
}
|
||||
/*! This comment will be included even in compressed mode. */
|
||||
#navbar-breadcrumbs {
|
||||
margin-left: var(--margin-md);
|
||||
font-size: var(--text-sm);
|
||||
@include get_textstyle("base", "regular");
|
||||
a {
|
||||
font-size: var(--text-md);
|
||||
margin-right: 10px;
|
||||
&:before {
|
||||
content: #{"/*!rtl:var(--left-arrow-svg);*/"}var(--right-arrow-svg);
|
||||
|
|
@ -20,7 +19,7 @@
|
|||
|
||||
li.disabled {
|
||||
a {
|
||||
color: var(--text-muted);
|
||||
color: var(--gray-600);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,14 +10,12 @@
|
|||
--sm-width: map-get($grid-breakpoints, 'sm');
|
||||
--xs-width: map-get($grid-breakpoints, 'xs');
|
||||
|
||||
--text-bold: 500;
|
||||
|
||||
--navbar-height: 60px;
|
||||
--navbar-height: 48px;
|
||||
|
||||
|
||||
|
||||
--appreciation-color: var(--dark-green-600);
|
||||
--appreciation-bg: var(--dark-green-100);
|
||||
--appreciation-color: var(--green-600);
|
||||
--appreciation-bg: var(--green-100);
|
||||
--criticism-color: var(--red-600);
|
||||
--criticism-bg: var(--red-100);
|
||||
|
||||
|
|
@ -26,20 +24,27 @@
|
|||
--error-border: var(--red-400);
|
||||
|
||||
// page
|
||||
--page-head-height: 75px;
|
||||
--page-head-height: 60px;
|
||||
--page-bottom-margin: 60px;
|
||||
|
||||
// checkbox
|
||||
--checkbox-right-margin: var(--margin-xs);
|
||||
--checkbox-size: 14px;
|
||||
--checkbox-focus-shadow: 0 0 0 2px var(--gray-300);
|
||||
--checkbox-focus-shadow: var(--focus-default);
|
||||
|
||||
// date-picker
|
||||
--date-active-text: var(--gray-100);
|
||||
--date-active-bg: var(--gray-900);
|
||||
--date-range-bg: var(--subtle-fg);
|
||||
|
||||
// timeline
|
||||
--timeline-item-icon-size: 34px;
|
||||
--timeline-item-left-margin: var(--margin-xl);
|
||||
--timeline-item-icon-size: 30px;
|
||||
--timeline-item-left-margin: var(--margin-lg);
|
||||
--timeline-item-bottom-margin: var(--margin-sm);
|
||||
--timeline-content-max-width: 700px;
|
||||
--timeline-left-padding: calc(var(--padding-xl) + var(--timeline-item-icon-size) / 2);
|
||||
--timeline-badge-color: var(--gray-900);
|
||||
--timeline-badge-bg: var(--gray-100);
|
||||
|
||||
// mentions
|
||||
--user-mention-bg-color: var(--fg-color);
|
||||
|
|
|
|||
|
|
@ -1,19 +1,15 @@
|
|||
$check-icon-dark: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
|
||||
[data-theme="dark"] {
|
||||
--gray-50: #{$gray-50};
|
||||
--gray-100: #f7fafc;
|
||||
--gray-200: #edf2f7;
|
||||
--gray-300: #c9d0d6;
|
||||
--gray-400: #7a838c;
|
||||
--gray-500: #575e66;
|
||||
--gray-600: #434a52;
|
||||
--gray-700: #242a30;
|
||||
--gray-800: #1c2126;
|
||||
--gray-900: #161a1f;
|
||||
--neutral: var(--neutral-black);
|
||||
--invert-neutral: var(--neutral-white);
|
||||
// TODO: Update Pallete for dark mode.
|
||||
--gray-700: #383838;
|
||||
--gray-800: #232323;
|
||||
|
||||
// Type Colors
|
||||
--text-dark: var(--gray-900);
|
||||
--text-muted: var(--gray-400);
|
||||
--text-light: var(--gray-300);
|
||||
--text-dark: var(--gray-900);
|
||||
--text-color: var(--gray-50);
|
||||
--heading-color: var(--gray-50);
|
||||
|
||||
|
|
@ -27,37 +23,42 @@
|
|||
|
||||
// Layout Colors
|
||||
--bg-color: var(--gray-900);
|
||||
--fg-color: var(--gray-800);
|
||||
--navbar-bg: var(--gray-800);
|
||||
--fg-hover-color: var(--gray-700);
|
||||
--card-bg: var(--gray-800);
|
||||
--fg-color: var(--gray-900);
|
||||
--subtle-accent: var(--gray-700);
|
||||
--subtle-fg: var(--gray-800);
|
||||
--navbar-bg: var(--gray-900);
|
||||
--fg-hover-color: var(--gray-800);
|
||||
--card-bg: var(--gray-900);
|
||||
--disabled-text-color: var(--gray-400);
|
||||
--disabled-control-bg: var(--gray-700);
|
||||
--control-bg: var(--gray-700);
|
||||
--disabled-control-bg: var(--gray-800);
|
||||
--control-bg: var(--gray-800);
|
||||
--control-bg-on-gray: var(--gray-800);
|
||||
--awesomebar-focus-bg: var(--control-bg);
|
||||
--awesomplete-hover-bg: var(--gray-700);
|
||||
--modal-bg: var(--gray-700);
|
||||
--awesomplete-hover-bg: var(--gray-800);
|
||||
--modal-bg: var(--gray-900);
|
||||
--toast-bg: var(--modal-bg);
|
||||
--popover-bg: var(--bg-color);
|
||||
|
||||
// Button Colors
|
||||
--btn-default-bg: var(--gray-700);
|
||||
--btn-default-hover-bg: var(--gray-500);
|
||||
--btn-default-bg: var(--gray-800);
|
||||
--btn-default-hover-bg: var(--gray-700);
|
||||
--btn-primary: var(--gray-300);
|
||||
|
||||
|
||||
|
||||
// Background Text Color Pairs
|
||||
--bg-blue: var(--blue-600);
|
||||
--bg-light-blue: var(--blue-600);
|
||||
--bg-dark-blue: var(--blue-900);
|
||||
--bg-green: var(--green-800);
|
||||
--bg-green: var(--green-900);
|
||||
--bg-yellow: var(--yellow-700);
|
||||
--bg-orange: var(--orange-700);
|
||||
--bg-red: var(--red-600);
|
||||
--bg-gray: var(--gray-400);
|
||||
--bg-grey: var(--gray-400);
|
||||
--bg-gray: var(--gray-600);
|
||||
--bg-grey: var(--gray-600);
|
||||
--bg-darkgrey: var(--gray-600);
|
||||
--bg-dark-gray: var(--gray-600);
|
||||
--bg-light-gray: var(--gray-700);
|
||||
--bg-dark-gray: var(--gray-500);
|
||||
--bg-light-gray: var(--gray-800);
|
||||
--bg-purple: var(--purple-700);
|
||||
--bg-pink: var(--pink-700);
|
||||
--bg-cyan: var(--cyan-800);
|
||||
|
|
@ -65,7 +66,7 @@
|
|||
--text-on-blue: var(--blue-50);
|
||||
--text-on-light-blue: var(--blue-50);
|
||||
--text-on-dark-blue: var(--blue-300);
|
||||
--text-on-green: var(--dark-green-50);
|
||||
--text-on-green: var(--green-100);
|
||||
--text-on-yellow: var(--yellow-50);
|
||||
--text-on-orange: var(--orange-100);
|
||||
--text-on-red: var(--red-50);
|
||||
|
|
@ -93,16 +94,19 @@
|
|||
--scrollbar-thumb-color: var(--gray-600);
|
||||
--scrollbar-track-color: var(--gray-700);
|
||||
|
||||
--timeline-badge-color: var(--gray-500);
|
||||
--timeline-badge-bg: var(--gray-900);
|
||||
|
||||
--shadow-inset: var(--fg-color);
|
||||
--border-color: var(--gray-700);
|
||||
--border-color: var(--gray-800);
|
||||
--dark-border-color: var(--gray-600);
|
||||
--table-border-color: var(--gray-600);
|
||||
--table-border-color: var(--border-color);
|
||||
--highlight-color: var(--gray-700);
|
||||
--yellow-highlight-color: var(--yellow-700);
|
||||
|
||||
--btn-group-border-color: var(--gray-800);
|
||||
|
||||
--field-placeholder-color: var(--gray-700);
|
||||
--placeholder-color: var(--gray-700);
|
||||
|
||||
--highlight-shadow: 1px 1px 10px var(--blue-900), 0px 0px 4px var(--blue-500);
|
||||
|
||||
|
|
@ -112,12 +116,47 @@
|
|||
--diff-added: var(--green-800);
|
||||
--diff-removed: var(--red-800);
|
||||
|
||||
// sidebar toggle
|
||||
.page-title .sidebar-toggle-btn {
|
||||
--icon-stroke: var(--gray-300);
|
||||
}
|
||||
|
||||
// input
|
||||
--input-disabled-bg: none;
|
||||
|
||||
// checkbox
|
||||
--checkbox-focus-shadow: 0 0 0 2px var(--gray-600);
|
||||
--checkbox-color: var(--neutral-white);
|
||||
--checkbox-gradient: linear-gradient(180deg, var(--neutral-white) -124.51%, var(--neutral-white) 100%);
|
||||
--checkbox-disabled-gradient: linear-gradient(180deg, var(--gray-600) -124.51%, var(--gray-600) 100%);
|
||||
--checkbox-focus-shadow: var(--focus-default);
|
||||
|
||||
input[type="checkbox"] {
|
||||
&:checked {
|
||||
background-image: $check-icon-dark, var(--checkbox-gradient);
|
||||
}
|
||||
&.disabled-selected, &:disabled:checked {
|
||||
background-image: $check-icon-dark, var(--checkbox-disabled-gradient);
|
||||
}
|
||||
&.disabled-deselected {
|
||||
border: none;
|
||||
background-color: var(--gray-700);
|
||||
}
|
||||
}
|
||||
|
||||
// switch
|
||||
--switch-bg: var(--gray-500);
|
||||
|
||||
// date-picker
|
||||
--date-active-text: var(--gray-100);
|
||||
--date-active-bg: var(--gray-700);
|
||||
--date-range-bg: var(--subtle-fg);
|
||||
|
||||
|
||||
// grid
|
||||
.grid-body .editable-row {
|
||||
--control-bg: var(--gray-900);
|
||||
--input-disabled-bg: var(--gray-800);
|
||||
}
|
||||
color-scheme: dark;
|
||||
|
||||
.frappe-card {
|
||||
|
|
@ -133,7 +172,7 @@
|
|||
.modal,
|
||||
.form-in-grid {
|
||||
--control-bg: var(--gray-800);
|
||||
--border-color: var(--gray-600);
|
||||
--border-color: var(--gray-800);
|
||||
}
|
||||
|
||||
.print-format {
|
||||
|
|
@ -153,6 +192,9 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.comment-input-wrapper .ql-editor.ql-blank::before {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
// --appreciation-color: var(--dark-green-100);
|
||||
// --appreciation-bg: var(--dark-green-600);
|
||||
// --criticism-color: var(--red-100);
|
||||
|
|
@ -161,7 +203,7 @@
|
|||
// Frappe Charts Colors
|
||||
.chart-container {
|
||||
--charts-label-color: var(--gray-300);
|
||||
--charts-axis-line-color: var(--gray-500);
|
||||
--charts-axis-line-color: var(--subtle-fg);
|
||||
|
||||
--charts-stroke-width: 5px;
|
||||
--charts-dataset-circle-stroke: #ffffff;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
html,
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
::selection {
|
||||
color: var(--neutral-black);
|
||||
background: var(--gray-300);
|
||||
}
|
||||
}
|
||||
|
||||
.desk-sidebar {
|
||||
|
|
@ -26,7 +30,7 @@ body {
|
|||
}
|
||||
|
||||
.widget-group {
|
||||
font-size: var(--text-base);
|
||||
@include get_textstyle("base", "regular");
|
||||
margin-bottom: var(--margin-2xl);
|
||||
|
||||
&.widget-charts {
|
||||
|
|
@ -38,8 +42,7 @@ body {
|
|||
|
||||
.widget-group-title {
|
||||
color: var(--heading-color);
|
||||
font-weight: 600;
|
||||
font-size: var(--text-lg);
|
||||
@include get_textstyle("lg", "semibold");
|
||||
margin-bottom: var(--margin-md);
|
||||
}
|
||||
}
|
||||
|
|
@ -111,7 +114,7 @@ body {
|
|||
@include flex(flex, null, null, column);
|
||||
min-height: 1px;
|
||||
padding: 7px;
|
||||
border-radius: var(--border-radius-md);
|
||||
border-radius: var(--border-radius-lg);
|
||||
height: 100%;
|
||||
background-color: var(--card-bg);
|
||||
|
||||
|
|
@ -137,11 +140,10 @@ body {
|
|||
|
||||
.widget-title {
|
||||
@include flex(flex, null, center, null);
|
||||
font-size: var(--text-lg);
|
||||
@include get_textstyle("base", "medium");
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.3em;
|
||||
color: var(--heading-color);
|
||||
color: var(--text-color);
|
||||
cursor: default;
|
||||
|
||||
svg {
|
||||
|
|
@ -208,6 +210,11 @@ body {
|
|||
// Overrides for each widgets
|
||||
&.dashboard-widget-box {
|
||||
min-height: 240px;
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
.widget-head {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.filter-chart {
|
||||
background-color: var(--control-bg);
|
||||
|
|
@ -341,16 +348,17 @@ body {
|
|||
&.onboarding-widget-box {
|
||||
margin-bottom: var(--margin-2xl);
|
||||
padding: var(--padding-lg) !important;
|
||||
background-color: var(--bg-light-gray);
|
||||
box-shadow: var(--card-shadow) ;
|
||||
background-color: var(--bg-color);
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
&.edit-mode:hover {
|
||||
background-color: var(--fg-color);
|
||||
background-color: var(--bg-color);
|
||||
|
||||
.onboarding-step {
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: var(--bg-color);
|
||||
&:hover,
|
||||
&.complete {
|
||||
background-color: var(--fg-hover-color);
|
||||
|
||||
.step-index.step-pending {
|
||||
background-color: var(--fg-color);
|
||||
|
|
@ -366,10 +374,15 @@ body {
|
|||
.widget-head {
|
||||
display: flex;
|
||||
|
||||
.widget-label .widget-title {
|
||||
@include get_textstyle("lg", "semibold");
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
.widget-subtitle {
|
||||
margin-top: 5px;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-sm);
|
||||
@include get_textstyle("base", "regular");
|
||||
}
|
||||
|
||||
.widget-control {
|
||||
|
|
@ -393,17 +406,23 @@ body {
|
|||
|
||||
h1,
|
||||
h2 {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 600;
|
||||
@include get_textstyle("lg", "medium");
|
||||
margin-bottom: var(--margin-sm);
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
@include get_textstyle("lg", "semibold");
|
||||
margin-bottom: var(--margin-sm);
|
||||
}
|
||||
|
||||
.onboarding-step-body {
|
||||
color: var(--text-muted);
|
||||
|
||||
p {
|
||||
@include get_textstyle("base", "regular");
|
||||
}
|
||||
}
|
||||
.onboarding-step-footer {
|
||||
margin-top: var(--margin-md);
|
||||
}
|
||||
|
|
@ -412,10 +431,11 @@ body {
|
|||
.onboarding-step {
|
||||
@include flex(flex, space-between, center, null);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 8px;
|
||||
font-size: var(--text-md);
|
||||
padding: 5px 8px;
|
||||
@include get_textstyle("base", "regular");
|
||||
max-width: 350px;
|
||||
text-decoration: none;
|
||||
margin-bottom: var(--margin-xs);
|
||||
|
||||
&.pending {
|
||||
.step-index.step-pending {
|
||||
|
|
@ -432,41 +452,31 @@ body {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
stroke: var(--white);
|
||||
}
|
||||
|
||||
span {
|
||||
color: $text-color;
|
||||
color: var(--gray-700);
|
||||
}
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: var(--fg-color);
|
||||
|
||||
.step-index {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.step-skip {
|
||||
visibility: visible;
|
||||
}
|
||||
background-color: var(--subtle-fg);
|
||||
}
|
||||
&.active .step-skip {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
@include flex(flex, null, center, null);
|
||||
|
||||
.step-text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.step-index {
|
||||
@include flex(flex, center, center, null);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
color: var(--text-on-light-gray);
|
||||
background-color: var(--bg-light-gray);
|
||||
|
||||
margin-right: var(--margin-sm);
|
||||
border-radius: var(--border-radius-full);
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
|
||||
&.step-pending {
|
||||
display: none;
|
||||
|
|
@ -474,42 +484,39 @@ body {
|
|||
|
||||
&.step-complete {
|
||||
display: none;
|
||||
background-color: var(--primary);
|
||||
.icon use {
|
||||
stroke: var(--var(--fg-color));
|
||||
}
|
||||
}
|
||||
|
||||
&.step-skipped {
|
||||
display: none;
|
||||
background-color: var(--blue-100);
|
||||
svg {
|
||||
stroke: var(--blue-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-skip {
|
||||
font-size: var(--text-md);
|
||||
@include get_textstyle("base", "regular");
|
||||
visibility: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.skipped {
|
||||
color: var(--text-light);
|
||||
background-color: var(--bg-color);
|
||||
.step-index.step-skipped {
|
||||
display: flex;
|
||||
}
|
||||
.step-text {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.step-skip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
i {
|
||||
color: var(--text-muted);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--text-muted);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -543,18 +550,15 @@ body {
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
--icon-stroke: var(--gray-600);
|
||||
.widget-title {
|
||||
color: var(--blue-500) !important;
|
||||
}
|
||||
|
||||
svg.icon-xs {
|
||||
stroke: var(--blue-500) !important;
|
||||
color: var(--gray-600) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-title {
|
||||
cursor: pointer !important;
|
||||
font-size: var(--text-base) !important;
|
||||
@include get_textstyle("base", "medium");
|
||||
}
|
||||
|
||||
.indicator-pill {
|
||||
|
|
@ -564,19 +568,32 @@ body {
|
|||
}
|
||||
|
||||
&.links-widget-box {
|
||||
padding: 12px 7px;
|
||||
|
||||
.widget-head .widget-label .widget-title svg {
|
||||
margin: 2px;
|
||||
margin-right: 12px !important;
|
||||
}
|
||||
|
||||
padding: 10px;
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
.link-item {
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
font-size: var(--text-md);
|
||||
@include get_textstyle("base", "regular");
|
||||
color: var(--text-color);
|
||||
padding: 4px;
|
||||
margin-left: -4px;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 0px;
|
||||
border-radius: var(--border-radius-md);
|
||||
cursor: pointer;
|
||||
|
||||
.indicator-pill::before {
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
border-radius: var(--border-radius-lg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-hover-color);
|
||||
|
||||
|
|
@ -586,7 +603,7 @@ body {
|
|||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 18px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -617,18 +634,25 @@ body {
|
|||
padding: 3px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-head .widget-label .widget-title {
|
||||
@include get_textstyle("lg", "semibold");
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.number-widget-box {
|
||||
cursor: pointer;
|
||||
height: 115px;
|
||||
padding: var(--padding-sm) var(--padding-md);
|
||||
min-height: 84px;
|
||||
padding: var(--number-card-padding);
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
.widget-head {
|
||||
.widget-title {
|
||||
font-weight: 500;
|
||||
color: var(--heading-color);
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--weight-medium);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
font-size: var(--text-tiny);
|
||||
margin-top: var(--margin-xs);
|
||||
}
|
||||
|
||||
|
|
@ -653,12 +677,11 @@ body {
|
|||
|
||||
.widget-content {
|
||||
@include flex(flex, space-between, null, null);
|
||||
padding-top: var(--padding-xl);
|
||||
padding-top: var(--padding-md);
|
||||
|
||||
.number {
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
line-height: 2.4em;
|
||||
@include get_textstyle("2xl", "semibold");
|
||||
line-height: var(--text-line-height-3xl);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
|
@ -669,11 +692,12 @@ body {
|
|||
}
|
||||
|
||||
.card-stats {
|
||||
@include flex(flex, null, flex-end, column);
|
||||
@include flex(flex, null, flex-end, row);
|
||||
}
|
||||
|
||||
.percentage-stat-area {
|
||||
font-size: $font-size-sm;
|
||||
margin-left: var(--margin-xs);
|
||||
|
||||
.indicator-pill-round {
|
||||
height: 18px;
|
||||
|
|
@ -684,24 +708,17 @@ body {
|
|||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.percentage-stat {
|
||||
margin-left: var(--margin-xs);
|
||||
vertical-align: bottom;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-period {
|
||||
margin-top: var(--margin-xs);
|
||||
font-size: 11px;
|
||||
margin-left: var(--margin-xs);
|
||||
}
|
||||
|
||||
.green-stat {
|
||||
color: var(--dark-green-500);
|
||||
color: var(--green-500);
|
||||
|
||||
use {
|
||||
stroke: var(--dark-green-500);
|
||||
stroke: var(--green-500);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -959,6 +976,13 @@ body {
|
|||
.layout-main-section {
|
||||
padding: var(--padding-md);
|
||||
margin-bottom: var(--margin-sm);
|
||||
|
||||
&.edit-mode {
|
||||
background-color: var(--subtle-fg) !important;
|
||||
.links-widget-box {
|
||||
background-color: var(--bg-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.desk-sidebar {
|
||||
|
|
@ -974,7 +998,7 @@ body {
|
|||
|
||||
.layout-main-section {
|
||||
background-color: var(--fg-color);
|
||||
box-shadow: var(--card-shadow);
|
||||
box-shadow: none;
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: var(--padding-sm);
|
||||
}
|
||||
|
|
@ -1026,7 +1050,7 @@ body {
|
|||
.item-anchor {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
padding: 8px 0px 8px 12px;
|
||||
padding: 4px 0px 4px 8px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1089,6 +1113,7 @@ body {
|
|||
&:hover, &.selected {
|
||||
.drag-handle {
|
||||
display: inline-block;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.setting-btn, .duplicate-page, .unhide-workspace-btn {
|
||||
|
|
@ -1112,7 +1137,7 @@ body {
|
|||
|
||||
// widgets
|
||||
.widget.number-widget-box {
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1176,6 +1201,9 @@ body {
|
|||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.widget-control > svg {
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.ce-block--focused {
|
||||
|
|
@ -1252,6 +1280,10 @@ body {
|
|||
margin-bottom: 0 !important;
|
||||
flex: 1;
|
||||
|
||||
.h4 {
|
||||
@include get_textstyle("xl", "semibold");
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -1279,7 +1311,7 @@ body {
|
|||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-base);
|
||||
background-color: var(--fg-color);
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
&.spacer {
|
||||
|
|
@ -1336,7 +1368,7 @@ body {
|
|||
padding-left: 0px !important;
|
||||
min-height: 40px;
|
||||
box-shadow: none;
|
||||
background-color: var(--control-bg);
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-muted);
|
||||
cursor: text;
|
||||
|
||||
|
|
@ -1346,7 +1378,7 @@ body {
|
|||
}
|
||||
|
||||
&.shortcut {
|
||||
background-color: var(--control-bg);
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ div#driver-popover-item {
|
|||
box-shadow: var(--shadow-md);
|
||||
|
||||
.driver-popover-title {
|
||||
font-size: var(--text-lg);
|
||||
@include get_textstyle("lg", "regular");
|
||||
color: var(--text-color);
|
||||
margin-bottom: var(--margin-sm);
|
||||
}
|
||||
|
|
@ -59,6 +59,7 @@ div#driver-popover-item {
|
|||
}
|
||||
|
||||
#driver-highlighted-element-stage {
|
||||
background-color: var(--bg-color) !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
.filter-icon.active {
|
||||
--icon-stroke: var(--text-on-blue);
|
||||
--icon-stroke: var(--primary);
|
||||
}
|
||||
|
||||
.filter-popover {
|
||||
min-width: 500px;
|
||||
min-height: 50px;
|
||||
font-size: var(--text-md);
|
||||
@include get_textstyle("base", "regular");
|
||||
z-index: 1019;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.filter-area {
|
||||
|
|
@ -92,7 +93,7 @@
|
|||
}
|
||||
|
||||
.remove-filter {
|
||||
font-size: var(--text-sm);
|
||||
@include get_textstyle("sm", "regular");
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,8 @@
|
|||
|
||||
.std-form-layout > .form-layout > .form-page {
|
||||
border-radius: var(--border-radius-md);
|
||||
box-shadow: var(--card-shadow);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: none;
|
||||
background-color: var(--card-bg);
|
||||
}
|
||||
|
||||
|
|
@ -35,13 +36,14 @@
|
|||
|
||||
.form-section-description {
|
||||
margin-bottom: 10px;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
@include get_textstyle("base", "regular");
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
.section-head {
|
||||
@extend .head-title;
|
||||
font-size: var(--text-base);
|
||||
@include get_textstyle("lg", "semibold");
|
||||
color: var(--text-color);
|
||||
width: 100%;
|
||||
padding: var(--padding-sm) var(--padding-md);
|
||||
margin: 0;
|
||||
|
|
@ -117,13 +119,12 @@
|
|||
|
||||
.control-label,
|
||||
.grid-heading-row {
|
||||
color: var(--text-light);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
@include get_textstyle("sm", "regular");
|
||||
}
|
||||
|
||||
.control-label {
|
||||
margin-bottom: var(--margin-xs);
|
||||
font-weight: normal;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.form-inner-toolbar {
|
||||
|
|
@ -132,23 +133,31 @@
|
|||
}
|
||||
|
||||
.form-control:disabled, .form-control[readonly] {
|
||||
color: var(--text-muted);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.comment-box {
|
||||
@include card();
|
||||
margin-top: var(--margin-lg);
|
||||
padding: var(--padding-lg);
|
||||
padding: 0;
|
||||
.comment-input-header {
|
||||
@extend .head-title;
|
||||
margin-bottom: var(--margin-sm);
|
||||
}
|
||||
.comment-input-container {
|
||||
.frappe-control {
|
||||
margin-bottom: var(--margin-xs);
|
||||
display: flex;
|
||||
.avatar {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
.ql-editor {
|
||||
background-color: var(--control-bg);
|
||||
.frappe-control {
|
||||
padding-right: 0;
|
||||
.ql-editor {
|
||||
background-color: var(--control-bg) !important;
|
||||
border: 1px solid var(--border-color);
|
||||
min-height: 24px;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -166,7 +175,7 @@
|
|||
.form-link-title {
|
||||
margin-top: var(--margin-md);
|
||||
margin-bottom: var(--margin-sm);
|
||||
font-weight: var(--text-bold);
|
||||
font-weight: var(--weight-medium);
|
||||
}
|
||||
.form-documents:first-of-type .row:first-child {
|
||||
.form-link-title {
|
||||
|
|
@ -178,15 +187,16 @@
|
|||
display: flex;
|
||||
.document-link-badge,
|
||||
.report-link-badge {
|
||||
font-size: var(--text-sm);
|
||||
@include get_textstyle("sm", "regular");
|
||||
padding: var(--padding-xs) var(--padding-sm);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--control-bg);
|
||||
.count {
|
||||
font-size: var(--text-xs);
|
||||
background-color: var(--gray-500);
|
||||
border-radius: var(--border-radius-sm);
|
||||
color: var(--gray-50);
|
||||
font-weight: var(--weight-regular);
|
||||
background-color: var(--neutral-white);
|
||||
border-radius: var(--border-radius-full);
|
||||
color: var(--gray-700);
|
||||
padding: 0 var(--padding-xs);
|
||||
margin-right: var(--margin-xs);
|
||||
}
|
||||
|
|
@ -198,7 +208,7 @@
|
|||
.open-notification {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background-color: var(--indicator-red-bg);
|
||||
background-color: var(--gray-100);
|
||||
font-size: var(--text-xs);
|
||||
padding: 0 var(--padding-sm);
|
||||
color: var(--indicator-red);
|
||||
|
|
@ -276,15 +286,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin form-message-background($color) {
|
||||
background: var(--bg-#{$color});
|
||||
color: var(--text-on-#{$color});
|
||||
@mixin form-message-background($color, $theme: "light") {
|
||||
@if $theme == "light" {
|
||||
border: 1px solid var(--#{$color}-100);
|
||||
color: var(--#{$color}-800);
|
||||
background: var(--#{$color}-100);
|
||||
}
|
||||
@if $theme == "dark" {
|
||||
border: 1px solid var(--#{$color}-700);
|
||||
color: var(--#{$color}-100);
|
||||
background: var(--#{$color}-800);
|
||||
}
|
||||
}
|
||||
|
||||
.form-message {
|
||||
position: relative;
|
||||
border-radius: var(--border-radius);
|
||||
padding: var(--padding-md) var(--padding-xl);
|
||||
padding: 8px 10px;
|
||||
font-size: var(--text-md, 13px);
|
||||
margin-bottom: var(--margin-md);
|
||||
|
||||
|
|
@ -317,6 +335,28 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
[data-theme="dark"] .form-message {
|
||||
|
||||
&.blue {
|
||||
@include form-message-background("blue", "dark");
|
||||
}
|
||||
|
||||
&.green {
|
||||
@include form-message-background("green", "dark");
|
||||
}
|
||||
|
||||
&.yellow {
|
||||
@include form-message-background("yellow", "dark");
|
||||
}
|
||||
|
||||
&.orange {
|
||||
@include form-message-background("orange", "dark");
|
||||
}
|
||||
|
||||
&.red {
|
||||
@include form-message-background("red", "dark");
|
||||
}
|
||||
}
|
||||
|
||||
.help-box {
|
||||
margin-top: 4px;
|
||||
|
|
@ -372,14 +412,15 @@
|
|||
z-index: 5;
|
||||
transition: 0.5s top;
|
||||
padding-left: var(--padding-xs);
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
|
||||
|
||||
.form-tabs {
|
||||
.nav-item {
|
||||
@include get_textstyle("base", "regular");
|
||||
.nav-link {
|
||||
color: var(--text-muted);
|
||||
padding: var(--padding-md) 0;
|
||||
padding: 10px 0;
|
||||
margin: 0 var(--margin-md);
|
||||
|
||||
&.active {
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
--dt-light-red: var(--red-50);
|
||||
--dt-light-yellow: var(--yellow-50);
|
||||
--dt-orange: var(--orange-500);
|
||||
--dt-text-color: var(--text-light);
|
||||
--dt-text-light: var(--bg-color);
|
||||
--dt-text-color: var(--text-muted);
|
||||
--dt-text-light: var(--text-light);
|
||||
--dt-spacer-1: 0.25rem;
|
||||
--dt-spacer-2: var(--padding-xs);
|
||||
--dt-spacer-3: 1rem;
|
||||
|
|
@ -13,13 +13,18 @@
|
|||
--dt-cell-bg: var(--fg-color);
|
||||
--dt-border-color: var(--table-border-color);
|
||||
--dt-border-radius: var(--border-radius);
|
||||
--dt-header-cell-bg: var(--fg-color);
|
||||
--dt-header-cell-bg: var(--subtle-fg);
|
||||
--dt-selection-highlight-color: var(--highlight-color);
|
||||
|
||||
background-color: var(--fg-color);
|
||||
background-color: var(--bg-color);
|
||||
margin-left: -5px;
|
||||
margin-top: 0px;
|
||||
font-size: var(--text-md);
|
||||
@include get_textstyle("base", "regular");
|
||||
|
||||
.dt-cell {
|
||||
color: var(--text-color) !important;
|
||||
background-color: var(--bg-color) !important;
|
||||
}
|
||||
|
||||
.frappe-control, .form-control {
|
||||
margin: 0;
|
||||
|
|
@ -47,9 +52,13 @@
|
|||
.dt-row[data-is-filter] {
|
||||
display: flex !important;
|
||||
}
|
||||
.dt-row-header {
|
||||
background-color: var(--subtle-fg);
|
||||
}
|
||||
|
||||
.dt-cell--header .dt-cell__content {
|
||||
font-weight: normal;
|
||||
background-color: var(--subtle-fg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -117,6 +126,11 @@
|
|||
border-radius: var(--border-radius);
|
||||
height: 100%;
|
||||
background-color: var(--control-bg);
|
||||
padding-left: 8px;
|
||||
|
||||
&:focus {
|
||||
box-shadow: var(--focus-default);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -147,7 +161,7 @@
|
|||
}
|
||||
|
||||
.dt-cell--focus .dt-cell__content {
|
||||
border-color: var(--blue-200);
|
||||
border-color: var(--gray-200);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
.gantt-container .popup-wrapper {
|
||||
min-width: 9rem;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: var(--text-sm);
|
||||
@include get_textstyle("sm", "regular");
|
||||
|
||||
.title {
|
||||
color: white;
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Reference in a new issue