Merge branch 'develop' of https://github.com/frappe/frappe into redesign-fixes

cypress/integration/control_rating.js

@@ -18,7 +18,7 @@ context('Control Rating', () => {
 		get_dialog_with_rating().as('dialog');
 
 		cy.get('div.rating')
-			.children('i.fa')
+			.children('svg')
 			.first()
 			.click()
 			.should('have.class', 'star-click');
@@ -33,11 +33,11 @@ context('Control Rating', () => {
 		get_dialog_with_rating();
 
 		cy.get('div.rating')
-			.children('i.fa')
+			.children('svg')
 			.first()
 			.invoke('trigger', 'mouseenter')
 			.should('have.class', 'star-hover')
 			.invoke('trigger', 'mouseleave')
 			.should('not.have.class', 'star-hover');
 	});
-});
+});

frappe/public/build.json

@@ -36,7 +36,6 @@
 		"public/js/frappe/model/perm.js",
 
 		"website/js/website.js",
-		"public/js/frappe/utils/rating_icons.html",
 		"public/js/frappe/socketio_client.js"
 	],
 	"js/bootstrap-4-web.min.js": "website/js/bootstrap-4.js",
@@ -62,7 +61,6 @@
 	],
 	"js/dialog.min.js": [
 		"public/js/frappe/dom.js",
-
 		"public/js/frappe/form/formatters.js",
 		"public/js/frappe/form/layout.js",
 		"public/js/frappe/ui/field_group.js",
@@ -108,13 +106,13 @@
 		"node_modules/moment-timezone/builds/moment-timezone-with-data.min.js",
 		"public/js/lib/socket.io.min.js",
 		"public/js/lib/jSignature.min.js",
-		"public/js/frappe/translate.js",
 		"public/js/lib/leaflet/leaflet.js",
 		"public/js/lib/leaflet/leaflet.draw.js",
 		"public/js/lib/leaflet/L.Control.Locate.js",
 		"public/js/lib/leaflet/easy-button.js"
 	],
 	"js/desk.min.js": [
+		"public/js/frappe/translate.js",
 		"public/js/frappe/class.js",
 		"public/js/frappe/polyfill.js",
 		"public/js/frappe/provide.js",
@@ -212,7 +210,6 @@
 		"public/js/frappe/query_string.js",
 
 		"public/js/frappe/ui/comment.js",
-		"public/js/frappe/utils/rating_icons.html",
 
 		"public/js/frappe/chat.js",
 		"public/js/frappe/utils/energy_point_utils.js",

frappe/public/icons/timeless/symbol-defs.svg

@@ -684,4 +684,7 @@
 		<path d="M10 6.00223L1 5.99973" stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"/>
 		<path d="M7.70015 3.00244L10.7001 6.00244L7.70015 9.00244" stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"/>
 	</symbol>
+	<symbol viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" id="icon-star">
+		<path d="M11.5516 2.90849C11.735 2.53687 12.265 2.53687 12.4484 2.90849L14.8226 7.71919C14.8954 7.86677 15.0362 7.96905 15.1991 7.99271L20.508 8.76415C20.9181 8.82374 21.0818 9.32772 20.7851 9.61699L16.9435 13.3616C16.8257 13.4765 16.7719 13.642 16.7997 13.8042L17.7066 19.0916C17.7766 19.5001 17.3479 19.8116 16.9811 19.6187L12.2327 17.1223C12.087 17.0457 11.913 17.0457 11.7673 17.1223L7.01888 19.6187C6.65207 19.8116 6.22335 19.5001 6.29341 19.0916L7.20028 13.8042C7.2281 13.642 7.17433 13.4765 7.05648 13.3616L3.21491 9.61699C2.91815 9.32772 3.08191 8.82374 3.49202 8.76415L8.80094 7.99271C8.9638 7.96905 9.10458 7.86677 9.17741 7.71919L11.5516 2.90849Z" fill="var(--star-fill)" stroke="var(--star-fill)"/>
+	</symbol>
 </svg>

frappe/public/js/frappe/form/controls/rating.js

@@ -1,22 +1,24 @@
 frappe.ui.form.ControlRating  = frappe.ui.form.ControlInt.extend({
 	make_input() {
 		this._super();
+		let stars = '';
+		[1, 2, 3, 4, 5].forEach(i => {
+			stars += `<svg class="icon icon-md" data-rating=${i}>
+				<use href="#icon-star"></use>
+			</svg>`;
+		});
 		const star_template = `
 			<div class="rating">
-				<i class="fa fa-fw fa-star" data-rating=1></i>
-				<i class="fa fa-fw fa-star" data-rating=2></i>
-				<i class="fa fa-fw fa-star" data-rating=3></i>
-				<i class="fa fa-fw fa-star" data-rating=4></i>
-				<i class="fa fa-fw fa-star" data-rating=5></i>
+				${stars}
 			</div>
 		`;
 
 		$(this.input_area).html(star_template);
 
-		$(this.input_area).find('i').hover((ev) => {
+		$(this.input_area).find('svg').hover((ev) => {
 			const el = $(ev.currentTarget);
 			let star_value = el.data('rating');
-			el.parent().children('i.fa').each( function(e) {
+			el.parent().children('svg').each( function(e) {
 				if (e < star_value) {
 					$(this).addClass('star-hover');
 				} else {
@@ -25,16 +27,16 @@ frappe.ui.form.ControlRating  = frappe.ui.form.ControlInt.extend({
 			});
 		}, (ev) => {
 			const el = $(ev.currentTarget);
-			el.parent().children('i.fa').each( function() {
+			el.parent().children('svg').each( function() {
 				$(this).removeClass('star-hover');
 			});
 		});
 
-		$(this.input_area).find('i').click((ev) => {
+		$(this.input_area).find('svg').click((ev) => {
 			const el = $(ev.currentTarget);
 			let star_value = el.data('rating');
-			el.parent().children('i.fa').each( function(e) {
-				if (e < star_value){
+			el.parent().children('svg').each( function(e) {
+				if (e < star_value) {
 					$(this).addClass('star-click');
 				} else {
 					$(this).removeClass('star-click');
@@ -51,7 +53,7 @@ frappe.ui.form.ControlRating  = frappe.ui.form.ControlInt.extend({
 	},
 	set_formatted_input(value) {
 		let el = $(this.input_area).find('i');
-		el.children('i.fa').prevObject.each( function(e) {
+		el.children('svg').prevObject.each( function(e) {
 			if (e < value) {
 				$(this).addClass('star-click');
 			} else {
@@ -59,4 +61,4 @@ frappe.ui.form.ControlRating  = frappe.ui.form.ControlInt.extend({
 			}
 		});
 	}
-});
+});

frappe/public/js/frappe/form/grid.js

@@ -268,7 +268,7 @@ export default class Grid {
 	}
 
 	refresh(force) {
-		if (this.frm.setting_dependency) return;
+		if (this.frm && this.frm.setting_dependency) return;
 
 		this.data = this.get_data();
 

frappe/public/js/frappe/utils/rating_icons.html

@@ -1,6 +0,0 @@
-{% if show_label %}
-	{{ __("Rating: ") }}
-{% endif %}
-{% for(var i=1, l=6; i<l; i++) { %}
-	<i class="fa fa-fw {{ i<=rating? "fa-star": "fa-star-o" }} star-icon" data-idx=1></i>
-{% } %}

frappe/public/js/frappe/utils/ratings.html

@@ -1,8 +0,0 @@
-<div>
-{% if label && data.show_label %}
-	{{ __("{0}: ", label) }}
-{% endif %}
-{% for(var i=1, l=6; i<l; i++) { %}
-	<i class="fa fa-fw {{ i<=rating? "fa-star": "fa-star-o" }} star-icon" data-idx=1></i>
-{% } %}
-</div>

frappe/public/less/controls.less

@@ -43,18 +43,6 @@
 	margin-bottom: 5px;
 }
 
-.rating {
-	i {
-		color: @text-extra-muted;
-	}
-	.star-hover {
-		color: @text-muted;
-	}
-	.star-click {
-		color: @text-light;
-	}
-}
-
 .barcode-scanner {
 	position: relative;
 
@@ -141,4 +129,4 @@
 		margin-bottom: 3px;
 		margin-right: 12px;
 	}
-}
+}

frappe/public/scss/desk/controls.scss

@@ -209,4 +209,15 @@ textarea.form-control {
 
 .link-field.ui-front {
 	z-index: inherit;
-}
+}
+
+.rating {
+	// rating
+	--star-fill: var(--gray-300);
+	.star-hover {
+		--star-fill: var(--yellow-100);
+	}
+	.star-click {
+		--star-fill: var(--yellow-300);
+	}
+}

frappe/public/scss/desk/dark.scss

@@ -131,4 +131,13 @@
 			fill: var(--gray-700);
 		}
 	}
+
+	.rating {
+		// rating
+		--star-fill: var(--gray-500);
+		.star-hover {
+			--star-fill: var(--gray-400);
+		}
+	}
+
 }