Merge pull request #12537 from surajshetty3416/fix-dark-mode

This commit is contained in:
Suraj Shetty 2021-03-07 19:45:11 +05:30 committed by GitHub
commit ae360132bc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 76 additions and 96 deletions

View file

@ -7,7 +7,7 @@ addons:
- test_site_producer
mariadb: 10.3
postgresql: 9.5
chrome: stable
firefox: latest
services:
- xvfb

View file

@ -578,7 +578,7 @@ def run_ui_tests(context, app, headless=False):
frappe.commands.popen("yarn add cypress@^6 cypress-file-upload@^5 --no-lockfile")
# run for headless mode
run_or_open = 'run --browser chrome --record --key 4a48f41c-11b3-425b-aa88-c58048fa69eb' if headless else 'open'
run_or_open = 'run --browser firefox --record --key 4a48f41c-11b3-425b-aa88-c58048fa69eb' if headless else 'open'
command = '{site_env} {password_env} {cypress} {run_or_open}'
formatted_command = command.format(site_env=site_env, password_env=password_env, cypress=cypress_path, run_or_open=run_or_open)

View file

@ -14,7 +14,7 @@ frappe.ui.ThemeSwitcher = class ThemeSwitcher {
}
refresh() {
this.current_theme = document.body.dataset.theme;
this.current_theme = document.documentElement.getAttribute("data-theme") || "light";
this.fetch_themes().then(() => {
this.render();
});
@ -45,7 +45,6 @@ frappe.ui.ThemeSwitcher = class ThemeSwitcher {
});
}
get_preview_html(theme) {
const preview = $(`<div class="${this.current_theme == theme.name ? "selected" : "" }">
<div data-theme=${theme.name}>
@ -69,15 +68,9 @@ frappe.ui.ThemeSwitcher = class ThemeSwitcher {
</div>
</div>`);
// preview.on('mouseover', () => {
// this.toggle_theme(theme.name, true)
// })
// preview.on('mouseleave', () => {
// this.toggle_theme(this.current_theme, true)
// })
preview.on('click', () => {
if (this.current_theme === theme.name) return;
this.themes.forEach((th) => {
th.$html.removeClass("selected");
});
@ -89,19 +82,15 @@ frappe.ui.ThemeSwitcher = class ThemeSwitcher {
return preview;
}
toggle_theme(theme, preview=false) {
if (!preview) {
document.body.dataset.theme = theme.toLowerCase();
frappe.show_alert("Theme Changed", 3);
toggle_theme(theme) {
this.current_theme = theme.toLowerCase();
document.documentElement.setAttribute("data-theme", this.current_theme);
frappe.show_alert("Theme Changed", 3);
frappe.call('frappe.core.doctype.user.user.switch_theme', {
theme: toTitle(theme)
});
} else {
document.body.dataset.theme = theme.toLowerCase();
}
frappe.xcall("frappe.core.doctype.user.user.switch_theme", {
theme: toTitle(theme)
});
}
show() {
this.dialog.show();
}
@ -109,4 +98,4 @@ frappe.ui.ThemeSwitcher = class ThemeSwitcher {
hide() {
this.dialog.hide();
}
};
};

View file

@ -8,7 +8,6 @@
--checkbox-right-margin: 8px;
.label-area {
line-height: 1;
font-size: var(--text-sm);
}

View file

@ -3,19 +3,6 @@ html {
background-color: var(--bg-color);
}
// transition
* {
transition: background-color 0.5s, background 0.5s;
}
a,
.badge {
transition: 0.2s;
}
.btn {
transition: background-color 0.2s, background 0.2s;
}
body {

View file

@ -1,5 +1,4 @@
@import "variables";
@import "css_variables";
@import "../common/mixins.scss";
@import "../common/global.scss";
@import "../common/icons.scss";

View file

@ -95,6 +95,10 @@ $btn-active-box-shadow: var(--shadow-inset);
$mark-bg: #FDF9AF;
$mark-padding: 0;
// transitions
$btn-transition: none;
$input-transition: none;
// popover
$enable-shadows: true;
$popover-border-radius: var(--border-radius);

View file

@ -1,6 +1,5 @@
@import '~quill/dist/quill.core';
@import 'variables';
@import 'css_variables';
@import '~bootstrap/scss/bootstrap';
@import "../common/mixins";
@import "../common/global";

View file

@ -131,5 +131,6 @@ $spacers: (
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import 'css_variables';
$code-color: $purple;

View file

@ -1,65 +1,67 @@
<!DOCTYPE html>
<head>
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#0089FF">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#0089FF">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#0089FF">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="mobile-web-app-capable" content="yes">
<title>Frappe</title>
<link rel="shortcut icon"
href="{{ favicon or "/assets/frappe/images/frappe-favicon.svg" }}" type="image/x-icon">
<link rel="icon"
href="{{ favicon or "/assets/frappe/images/frappe-favicon.svg" }}" type="image/x-icon">
{% for include in include_css -%}
<link type="text/css" rel="stylesheet" href="{{ include }}?ver={{ build_version }}">
{%- endfor -%}
</head>
<body data-theme="{{ desk_theme.lower() }}">
{% include "public/icons/timeless/symbol-defs.svg" %}
<div class="centered splash">
<img src="{{ splash_image or "/assets/frappe/images/frappe-framework-logo.png" }}"
style="max-width: 100px; max-height: 100px;">
</div>
<div class="main-section">
<header></header>
<div id="body"></div>
<footer></footer>
</div>
<html data-theme="{{ desk_theme.lower() }}">
<head>
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#0089FF">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#0089FF">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#0089FF">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="mobile-web-app-capable" content="yes">
<title>Frappe</title>
<link rel="shortcut icon"
href="{{ favicon or "/assets/frappe/images/frappe-favicon.svg" }}" type="image/x-icon">
<link rel="icon"
href="{{ favicon or "/assets/frappe/images/frappe-favicon.svg" }}" type="image/x-icon">
{% for include in include_css -%}
<link type="text/css" rel="stylesheet" href="{{ include }}?ver={{ build_version }}">
{%- endfor -%}
</head>
<body>
{% include "public/icons/timeless/symbol-defs.svg" %}
<div class="centered splash">
<img src="{{ splash_image or "/assets/frappe/images/frappe-framework-logo.png" }}"
style="max-width: 100px; max-height: 100px;">
</div>
<div class="main-section">
<header></header>
<div id="body"></div>
<footer></footer>
</div>
<script type="text/javascript" src="/assets/frappe/js/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/assets/frappe/js/lib/jquery/jquery.min.js"></script>
<script type="text/javascript">
window._version_number = "{{ build_version }}";
// browser support
window.app = true;
window.dev_server = {{ dev_server }};
<script type="text/javascript">
window._version_number = "{{ build_version }}";
// browser support
window.app = true;
window.dev_server = {{ dev_server }};
if(!window.frappe) window.frappe = {};
if(!window.frappe) window.frappe = {};
frappe.boot = {{ boot }};
frappe.boot = {{ boot }};
frappe.csrf_token = "{{ csrf_token }}";
frappe.csrf_token = "{{ csrf_token }}";
</script>
</script>
{% for include in include_js %}
<script type="text/javascript" src="{{ include }}?ver={{ build_version }}"></script>
{% endfor %}
{% include "templates/includes/app_analytics/google_analytics.html" %}
{% include "templates/includes/app_analytics/mixpanel_analytics.html" %}
{% for include in include_js %}
<script type="text/javascript" src="{{ include }}?ver={{ build_version }}"></script>
{% endfor %}
{% include "templates/includes/app_analytics/google_analytics.html" %}
{% include "templates/includes/app_analytics/mixpanel_analytics.html" %}
{% for sound in (sounds or []) %}
<audio preload="auto" id="sound-{{ sound.name }}" volume={{ sound.volume or 1 }}>
<source src="{{ sound.src }}"></source>
</audio>
{% endfor %}
</body>
{% for sound in (sounds or []) %}
<audio preload="auto" id="sound-{{ sound.name }}" volume={{ sound.volume or 1 }}>
<source src="{{ sound.src }}"></source>
</audio>
{% endfor %}
</body>
</html>