Skip to content

GitLab

T
tangled
Commit 281b72df authored by Eriksson Monteiro's avatar Eriksson Monteiro
Browse files
Options

update millix bar: fix dark mode

parent e8626006
Hide whitespace changes
Inline Side-by-side
Showing with 44 additions and 133 deletions
chrome/browser/resources/millix/millix_bar.css
View file @ 281b72df
......@@ -13,7 +13,8 @@ a {
text-decoration: none;
}
a:hover {
.theme_dark a {
color: #dadada;
}
.badge {
......@@ -40,6 +41,7 @@ a:hover {
width: 100%;
}
.theme_dark .advertisement_bar_container,
.advertisement_bar_container.status_warning,
.advertisement_bar_container.status_danger {
background-color: #171827;
......@@ -140,6 +142,10 @@ a:hover {
padding: 0 1rem;
}
input:focus {
outline: none;
}
svg {
height: 1rem;
width: 1rem;
......@@ -216,7 +222,6 @@ svg {
border-color: #9400ce;
}
.btn-outline-primary {
color: #a9a9a9;
border-color: #9400ce;
......@@ -228,6 +233,15 @@ svg {
background-color: #9400ce;
}
.btn-disabled,
.btn-disabled:hover,
.btn-disabled:focus,
.btn-disabled:active {
background-color: rgba(205, 207, 214, 0.1);
border-color: rgba(205, 207, 214, 0.1);
color: #a9a9a9;
}
.btn-xs {
border-radius: 0.3rem;
font-size: 1rem;
......@@ -260,111 +274,17 @@ svg {
flex-direction: column;
}
.advertisement_bar_item:hover {
cursor: pointer;
background-color: rgba(210, 210, 210, 0.1);
border-color: #eee;
color: #333;
}
/* -------------------------------------------------------- reviewed above ---------------------------------------------------------------------- */
.noselect {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
supported by Chrome and Opera */
}
.btn:focus, .btn:active:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
.theme_dark .advertisement_bar_item .text {
color: #dadada;
}
.btn:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .07);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .07);
}
/* default
---------------------------- */
.btn-default:hover {
color: #333;
.advertisement_bar_item:hover {
background-color: rgba(210, 210, 210, 0.1);
border-color: #eee;
}
.dark .btn-default:hover {
background-color: transparent;
border-color: #555;
}
.btn-default:active {
color: #333;
background-color: rgb(230 230 230 / 10%);
}
.dark .btn-default:active {
background-color: transparent;
border-color: #666;
}
.btn-unlock-text {
font-size: 14px;
line-height: 27px;
color: #656565;
}
.dark .btn-unlock-text {
color: #d5d5d5;
}
.btn-disabled:hover, .btn-disabled:focus, .btn-disabled:active {
background-color: transparent;
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
outline-offset: 0;
cursor: default;
}
/**
dark mode
*/
.dark .container {
color: rgba(241, 243, 244, 1);
background-color: #323639;
}
.dark .btn {
color: rgba(241, 243, 244, 1);
background-color: transparent;
cursor: pointer;
}
.dark a {
color: rgba(241, 243, 244, 1);
}
/* -------------------------------------------------------- reviewed above ---------------------------------------------------------------------- */
input:focus {
outline: none;
}
.loader {
margin-top: 5px;
......@@ -379,18 +299,6 @@ input:focus {
}
.dark .btn-unlock, .btn-unlock {
line-height: 30px;
color: #b5b5b5;
font-size: 13px;
margin-left: 0px !important;
width: 111px;
padding-left: 6px;
padding-right: 6px;
margin-top: 8px;
max-height: 26px;
}
/* Safari */
@-webkit-keyframes spin {
......
chrome/browser/resources/millix/millix_bar.html
View file @ 281b72df
......@@ -66,7 +66,7 @@
class="fa-primary"/>
</svg>
<span>restart node</span>
<span class="label">restart node</span>
</div>
<div id="wallet" class="advertisement_bar_item hidden">
......
chrome/browser/resources/millix/millix_bar.js
View file @ 281b72df
......@@ -40,10 +40,10 @@ cr.define('millix_bar', function() {
function refreshThemeStyles(data) {
if (data.is_dark_theme) {
document.body.classList.add('dark');
document.body.classList.add('theme_dark');
}
else {
document.body.classList.remove('dark');
document.body.classList.remove('theme_dark');
}
isDarkTheme = data.is_dark_theme;
......@@ -120,7 +120,6 @@ cr.define('millix_bar', function() {
}
}
$headline.addClass('placeholder');
$targetPhrase.addClass('placeholder');
......@@ -280,11 +279,14 @@ cr.define('millix_bar', function() {
$('#message_container').addClass('hidden');
$('.advertisement_bar_container').removeClass('status_warning status_danger');
if (status === 'danger') {
toggle_status_area(false);
$('.advertisement_bar_container').addClass('status_danger');
$('#advertisement_container').addClass('hidden');
$('#message_container').removeClass('hidden');
}
else if (status === 'warning') {
toggle_status_area(false);
$('.advertisement_bar_container').addClass('status_warning');
$('#advertisement_container').addClass('hidden');
$('#message_container').removeClass('hidden');
......@@ -310,12 +312,14 @@ cr.define('millix_bar', function() {
}
function doNodeRestart() {
clearTimeout(reloadTimeout);
$('#btn-restart-label').text('restarting');
$('.wallet_restart_icon_power').addClass('hidden');
$('.wallet_restart_icon_loader').removeClass('hidden');
$('#wallet_restart > .btn').addClass('btn-disabled');
chrome.send('restartMillixNode');
if (!$('#wallet_restart').hasClass('btn-disabled')) {
clearTimeout(reloadTimeout);
$('.wallet_restart_icon_power').addClass('hidden');
$('.wallet_restart_icon_loader').removeClass('hidden');
$('#wallet_restart').addClass('btn-disabled');
$('#wallet_restart .label').text('restarting');
chrome.send('restartMillixNode');
}
}
function restartWallet() {
......@@ -327,7 +331,7 @@ cr.define('millix_bar', function() {
let counter = 10;
const updateRestartTimeout = () => {
$('#btn-restart-label').text(`restart node (${counter}s)`);
$('#wallet_restart .label').text(`restart node (${counter}s)`);
counter--;
if (counter == 0) {
doNodeRestart();
......@@ -348,8 +352,7 @@ cr.define('millix_bar', function() {
$('.wallet_restart_icon_power').removeClass('hidden');
$('.wallet_restart_icon_loader').addClass('hidden');
$('#wallet_restart > .btn').removeClass('btn-disabled');
$('#wallet_restart').removeClass('hidden');
$('#wallet_restart').removeClass('btn-disabled').removeClass('hidden');
set_advertisement_bar_container_status('danger');
}
......@@ -452,8 +455,8 @@ cr.define('millix_bar', function() {
audioDeposit.play();
}
function expandView(expanded) {
if (expanded) {
function toggle_status_area(show) {
if (show) {
$('#btn_expand_status_area').addClass('open');
$('.expandable_view').removeClass('hidden');
$('#advertisement_container').addClass('hidden');
......@@ -514,7 +517,7 @@ cr.define('millix_bar', function() {
onLastTransactionTimestampUpdate,
onTotalAdvertisementPaymentUpdate,
refreshThemeStyles,
expandView,
toggle_status_area,
onTransaction,
showNewAdvertisement,
onVisibilityChange,
......@@ -590,10 +593,10 @@ $(document).ready(() => {
$('#btn_expand_status_area').click(function() {
const $this = $(this);
if ($this.hasClass('open')) {
millix_bar.expandView(false);
millix_bar.toggle_status_area(false);
}
else {
millix_bar.expandView(true);
millix_bar.toggle_status_area(true);
}
});
});
chrome/browser/resources/millix/millix_ws.js
View file @ 281b72df
......@@ -325,9 +325,9 @@ function check_latest_version() {
API.getLatestMillixVersion()
.then(response => {
send_window_parent_post_message('available_version', response);
check_latest_version_timeout_id = setTimeout(() => apiCheck(), 300);
check_latest_version_timeout_id = setTimeout(() => check_latest_version(), 30000);
})
.catch(() => check_latest_version_timeout_id = setTimeout(() => apiCheck(), 10));
.catch(() => check_latest_version_timeout_id = setTimeout(() => check_latest_version(), 10000));
}
let apiCheckHandlerID = null;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment