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

Merge branch 'rebrand-ui' of https://github.com/frappe/frappe into rebrand-ui

Browse source
This commit is contained in:
prssanna 2020-07-29 19:39:36 +05:30
commit f33699da0b
10 changed files with 135 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frappe/public/js/frappe/form/controls/comment.js
View file

@ -6,12 +6,9 @@ Quill.register('modules/mention', Mention, true);
frappe.ui.form.ControlComment = frappe.ui.form.ControlTextEditor.extend({
make_wrapper() {
this.comment_wrapper = !this.no_wrapper ? $(`
<div class="comment-input-wrapper">
<div class="comment-input-header">
<span class="small text-muted">${__("Add a comment")}</span>
<button class="btn btn-default btn-comment btn-xs pull-right">
${__("Comment")}
</button>
<div class="comment-input-wrapper">
<div class="comment-input-header">
<span>${__("Add a comment")}</span>
</div>
<div class="comment-input-container">
<div class="frappe-control"></div>
@ -19,6 +16,9 @@ frappe.ui.form.ControlComment = frappe.ui.form.ControlTextEditor.extend({
${__("Ctrl+Enter to add comment")}
</div>
</div>
<button class="btn btn-default btn-comment btn-xs">
${__("Comment")}
</button>
</div>
`) : $('<div class="frappe-control"></div>');

41
frappe/public/js/frappe/form/footer/footer.js
View file

@ -2,13 +2,15 @@
// MIT License. See license.txt
import './timeline.js';
import './new_timeline.js';
frappe.ui.form.Footer = Class.extend({
init: function(opts) {
var me = this;
$.extend(this, opts);
this.make();
this.make_comments();
this.make_comment_box();
this.make_timeline();
// render-complete
$(this.frm.wrapper).on("render_complete", function() {
me.refresh();
@ -20,17 +22,42 @@ frappe.ui.form.Footer = Class.extend({
.appendTo(this.parent);
this.wrapper.find(".btn-save").click(function() {
me.frm.save('Save', null, this);
})
});
},
make_comments: function() {
this.frm.timeline = new frappe.ui.form.Timeline({
parent: this.wrapper.find(".form-comments"),
make_comment_box: function() {
this.frm.comment_box = frappe.ui.form.make_control({
parent: this.wrapper.find(".comment-box"),
render_input: true,
only_input: true,
mentions: this.get_names_for_mentions(),
df: {
fieldtype: 'Comment',
fieldname: 'comment'
},
});
},
get_names_for_mentions() {
let names_for_mentions = Object.keys(frappe.boot.user_info)
.filter(user => {
return !["Administrator", "Guest"].includes(user)
&& frappe.boot.user_info[user].allowed_in_mentions;
})
.map(user => {
return {
id: frappe.boot.user_info[user].name,
value: frappe.boot.user_info[user].fullname,
};
});
return names_for_mentions;
},
make_timeline() {
this.frm.timeline = new frappe.ui.form.NewTimeline({
parent: this.wrapper.find(".timeline"),
frm: this.frm
});
},
refresh: function() {
if(this.frm.doc.__islocal) {
if (this.frm.doc.__islocal) {
this.parent.addClass("hide");
} else {
this.parent.removeClass("hide");

3
frappe/public/js/frappe/form/templates/form_footer.html
View file

@ -1,6 +1,7 @@
<div class="form-footer">
<div class="after-save">
<div class="form-comments"></div>
<div class="comment-box"></div>
<div class="timeline"></div>
</div>
<div class="pull-right scroll-to-top">
<a onclick="frappe.utils.scroll_to(0)"><i class="fa fa-chevron-up text-muted"></i></a>

8
frappe/public/js/frappe/form/templates/timeline_item.html
View file

@ -60,7 +60,7 @@
{% } %}
</span>
{% if(in_list(["Communication", "Feedback"], data.communication_type)) { %}
{% if (frappe.model.can_read(\'Communication\')) { %}
{% if (frappe.model.can_read("Communication")) { %}
<a href="#Form/Communication/{%= data.name %}"
class="text-muted">
{% } %}
@ -83,13 +83,13 @@
{%= __(data.delivery_status) %}</span></span>
{% } else { %}
{% if (frappe.model.can_read(\'Communication\')) { %}
{% if (frappe.model.can_read("Communication")) { %}
<span class="text-muted n-dash">&ndash;</span>
{%= __("Details") %}
{% } %}
{% } %}
{% if (frappe.model.can_read(\'Communication\')) { %}
{% if (frappe.model.can_read("Communication")) { %}
</a>
{% } %}
@ -106,7 +106,7 @@
<span class="text-muted commented-on-small {% if (data.futur_date) { %}timeline-futur{% } %}">
&ndash; {%= data.comment_on_small %}</span>
<span class="comment-likes hidden-xs"
data-liked-by=\'{{ JSON.stringify(data._liked_by) }}\'>
data-liked-by="{{ JSON.stringify(data._liked_by) }}">
<i class="octicon octicon-heart like-action
{% if (!data.liked_by_user) { %}
text-extra-muted not-liked

1
frappe/public/less/quill.less
View file

@ -55,7 +55,6 @@
.ql-bubble .ql-editor {
min-height: 100px;
max-height: 300px;
border: 1px solid @light-border-color;
border-radius: 4px;
}

39
frappe/public/scss/dark.scss Normal file
View file

@ -0,0 +1,39 @@
[data-theme="dark"] {
--gray-50: #{$gray-50};
--gray-100: #F7FAFC;
--gray-200: #EDF2F7;
--gray-300: #E2E8F0;
--gray-400: #CBD5E0;
--gray-500: #A0AEC0;
--gray-600: #718096;
--gray-700: #4A5568;
--gray-800: #2D3748;
--gray-900: #1A202C;
// Type Colors
--text-muted: var(--gray-300);
--text-light: var(--gray-400);
--text-color: var(--gray-50);
--heading-color: var(--gray-50);
// SVG Colors
--icon-fill: transparent;
--icon-stroke: var(--gray-500);
// Layout Colors
--bg-color: var(--gray-900);
--fg-color: var(--gray-800);
--fg-hover-color: var(--gray-700);
--card-bg: var(--gray-800);
--control-bg: var(--gray-700);
--modal-bg: var(--gray-700);
--toast-bg: var(--modal-bg);
--popover-bg: var(--bg-color);
--sidebar-select-color: var(--gray-800);
--shadow-inset: var(--fg-color);
--border-color: var(--gray-700);
--dark-border-color: var(--gray-600);
--highlight-color: var(--gray-700);
}

25
frappe/public/scss/form.scss
View file

@ -21,12 +21,10 @@
}
.section-head {
@extend .head-title;
width: 100%;
padding: var(--padding-md);
margin: 0;
font-size: var(--text-lg);
font-weight: 500;
color: var(--heading-color);
cursor: pointer;
.collapse-indicator {
@ -78,4 +76,25 @@
font-weight: 400;
background-color: $control-bg;
padding: var(--padding-xs) var(--padding-sm);
}
.comment-box {
@include card();
padding: 25px var(--padding-xl);
.comment-input-header {
@extend .head-title;
margin-bottom: var(--margin-sm);
}
.comment-input-container {
.frappe-control {
margin-bottom: var(--margin-xs);
}
.ql-editor {
background-color: var(--gray-200);
}
}
.btn-comment {
margin-top: var(--margin-md);
}
}

8
frappe/public/scss/global.scss
View file

@ -136,7 +136,7 @@ img {
}
.btn-primary {
background: $brand-gradient;
background-color: var(--primary-color);
}
@ -297,4 +297,10 @@ input[type="checkbox"] {
.frappe-card {
@include card();
}
.head-title {
font-size: var(--text-lg);
font-weight: 500;
color: var(--heading-color);
}

2
frappe/public/scss/timeline.scss
View file

@ -10,7 +10,7 @@ $threshold: 50px;
top: 0;
height: 100%;
position: absolute;
border-left: 1px solid var(--gray-300);
border-left: 1px solid var(--dark-border-color);
}
.timeline-item {

62
frappe/public/scss/variables.scss
View file

@ -10,6 +10,7 @@ $gray-100: #F4F5F6;
$gray-50 : #F9FAFA;
$primary: #2490EF;
$danger: #E24C4C;
$black: #000;
$white: #fff;
$light: $gray-50 !default;
@ -163,6 +164,7 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
// Layout Colors
--bg-color: var(--gray-50);
--fg-color: white;
--fg-hover-color: var(--gray-100);
--card-bg: var(--fg-color);
--control-bg: var(--gray-100);
--modal-bg: white;
@ -173,6 +175,7 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
--shadow-inset: var(--gray-100);
--border-color: var(--gray-100);
--dark-border-color: var(--gray-300);
--highlight-color: var(--gray-50);
// Border Sizes
@ -180,6 +183,8 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
--border-radius: 6px;
--border-radius-md: 8px;
--border-radius-lg: 12px;
--primary-color: #{$primary};
}
html, body {
@ -203,17 +208,27 @@ $container-max-widths: (
$theme-colors: (
"primary": $primary,
"danger": #ff4136
"danger": $danger
);
$brand-gradient: linear-gradient(180deg, #2C9AF1 0%, var(--blue-500) 100%);
$navbar-height: 60px;
$page-head-height: 68px;
$body-color: $gray-700 !default;
$body-color: var(--text-light);
$input-placeholder-color: var(--text-light);
$component-active-color: var(--fg-color);
$modal-content-bg: var(--modal-bg);
// dropdown
$dropdown-bg: var(--fg-color);
$dropdown-border-color: var(--dark-border-color);
$dropdown-link-color: var(--text-color);
$dropdown-link-hover-color: var(--text-color);
$dropdown-link-hover-bg: var(--fg-hover-color);
$dropdown-link-disabled-color: var(--gray-600);
$dropdown-header-color: var(--gray-600);
// button
$btn-padding-y-lg: 1rem !default;
$btn-padding-x-lg: 2.5rem !default;
$btn-font-size-lg: 1.125rem !default;
@ -233,44 +248,6 @@ $dropdown-border-radius: 0.375rem !default;
$dropdown-item-padding-y: 0.5rem !default;
$dropdown-item-padding-x: 0.5rem !default;
[data-theme="dark"] {
--gray-50: #{$gray-50};
--gray-100: #F7FAFC;
--gray-200: #EDF2F7;
--gray-300: #E2E8F0;
--gray-400: #CBD5E0;
--gray-500: #A0AEC0;
--gray-600: #718096;
--gray-700: #4A5568;
--gray-800: #2D3748;
--gray-900: #1A202C;
// Type Colors
--text-muted: var(--gray-300);
--text-light: var(--gray-400);
--text-color: var(--gray-50);
--heading-color: var(--gray-50);
// SVG Colors
--icon-fill: transparent;
--icon-stroke: var(--gray-500);
// Layout Colors
--bg-color: var(--gray-900);
--fg-color: var(--gray-800);
--card-bg: var(--gray-800);
--control-bg: var(--gray-700);
--modal-bg: var(--gray-700);
--toast-bg: var(--modal-bg);
--popover-bg: var(--bg-color);
--sidebar-select-color: var(--gray-800);
--shadow-inset: var(--fg-color);
--border-color: var(--gray-600);
--highlight-color: var(--gray-700);
}
$spacer: 14px;
$grid-breakpoints: (
xs: 0,
@ -281,6 +258,7 @@ $grid-breakpoints: (
2xl: 1440px
) !default;
@import 'dark';
@import 'typography';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';