Skip to content

Commit

Permalink
Merge pull request #293 from tilfinltd/feature/dark-mode
Browse files Browse the repository at this point in the history 
Visual mode
  • Loading branch information
@tilfin
tilfin committed Jun 17, 2023
2 parents 2c97bc0 + 11bdb15 commit 6f1c5d6
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 16 deletions.
32 changes: 30 additions & 2 deletions options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@
width: 100%;
padding: 10px 20px;
}
#settingPane { background-color: #fff }
#settingPane {
background-color: #fff;
color: #000;
}
#howto {
background-color: #eee;
color: #444;
Expand Down Expand Up @@ -88,6 +91,25 @@
color: #222;
font-weight: bold;
}
.success, #msgSpan, a { color: #1c1cff }
.warn { color: #de1010 }
.darkMode .success, .darkMode #msgSpan, .darkMode a { color: #2aedff }
.darkMode .warn { color: #e82828 }
.darkMode #settingPane {
background-color: #333;
color: #fff;
}
.darkMode #howto {
background-color: #444;
color: #bbb;
}
.darkMode code { color: #ddd }
.darkMode pre { border-color: #979797 }
.darkMode textarea, .darkMode input[type="text"] {
background-color: #222;
border-color: #9d9d9d;
color: #eee;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -119,6 +141,12 @@ <h1>Settings</h1>
<label for="configStorageSyncRadioButton"><input type="radio" name="configStorage" id="configStorageSyncRadioButton" value="sync">Sync</label>
<label for="configStorageLocalRadioButton"><input type="radio" name="configStorage" id="configStorageLocalRadioButton" value="local">Local</label>
</li>
<li>
Visual mode:
<label for="defaultVisualRadioButton"><input type="radio" name="visual" id="defaultVisualRadioButton" value="default">Browser default</label>
<label for="lightVisualRadioButton"><input type="radio" name="visual" id="lightVisualRadioButton" value="light">Light</label>
<label for="darkVisualRadioButton"><input type="radio" name="visual" id="darkVisualRadioButton" value="dark">Dark</label>
</li>
</ul>
</section>
<section id="api">
Expand Down Expand Up @@ -256,7 +284,7 @@ <h3>Settings</h3>
<h3>Extension API</h3>
<ul>
<li><b>Config sender extension</b> allowed by the <b>ID</b> can send your switch roles configuration to this extension.
<strong style="color:#d00">'Configuration storage' forcibly becomes 'Local' when the configuration is received from a config sender.</strong>
<strong class="warn">'Configuration storage' forcibly becomes 'Local' when the configuration is received from a config sender.</strong>
<a href="https://github.com/tilfinltd/aws-extend-switch-roles/wiki/External-API#config-sender-extension" target="_blank" rel="noopener noreferrer">See</a> how to make your config sender extension.</li>
</ul>
</section>
Expand Down
38 changes: 34 additions & 4 deletions popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,7 @@
text-decoration: none;
width: 9em;
}
a:hover {
background-color: #e8fafa;
}
a:hover { background-color: #e8fafa }
#openOptionsLink { font-weight: bold }

.mainPane {
Expand All @@ -60,6 +58,7 @@
white-space: nowrap;
vertical-align: middle;
}
#roleList li.selected { background-color: #f0f9ff }
#roleList li a {
color: #000;
font-family: Arial;
Expand Down Expand Up @@ -88,20 +87,51 @@
font-size: 12px;
margin: 12px 5px 5px 5px;
line-height: 1.66;
color: #666;
}
#supportComment p {
line-height: 1.25;
margin: .5em 0;
font-weight: bold;
}
.roleListTitle {
color: #2c2c2c;
}
.darkMode {
background-color: #2a2e33;
color: #d3d9d9;
}
.darkMode a:hover { background-color: #153247 }
.darkMode #noMain p { color: #eaeded }
.darkMode #roleList a { color: #fff }
.darkMode #roleList li.selected { background-color: #143846 }
.darkMode #roleList .suffixAccountId { color: #95a5a6 }
.darkMode .mainPane { border-color: #41474F }
.darkMode .optionMenu li { border-color: #41474F }
.darkMode .optionMenu a { color: #d5dbdb }
.darkMode #roleFilter {
background-color: #1a2029;
color: #d5dbdb;
border-color: #879596;
}
.darkMode .roleListTitle { color: #eaeded }
.darkMode #roleList::-webkit-scrollbar {
width: 10px;
}
.darkMode #roleList::-webkit-scrollbar-track {
background-color: #3b3b3b;
}
.darkMode #roleList::-webkit-scrollbar-thumb {
background-color: #616161;
}
</style>
</head>
<body>
<div style="display: flex">
<div class="mainPane" style="min-width: 280px">
<div id="main" style="display: none">
<div style="padding: 12px 6px 6px;">
<span style="color: #2c2c2c">Role List</span>
<span class="roleListTitle">Role List</span>
<input id="roleFilter" type="text" placeholder="Filter"
style="border:1px solid #bbb;border-radius:3px;font-size:13px;margin-left:0.4em;max-width:30ex;padding:.8ex">
</div>
Expand Down
30 changes: 23 additions & 7 deletions src/options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ window.onload = function() {
try {
const profiles = loadAwsConfig(rawstr);
if (configStorageArea === 'sync' && profiles.length > 200) {
updateMessage(msgSpan, 'Failed to save bacause the number of profiles exceeded maximum 200!', '#dd1111');
updateMessage(msgSpan, 'Failed to save bacause the number of profiles exceeded maximum 200!', 'warn');
return;
}

Expand All @@ -51,16 +51,16 @@ window.onload = function() {

new StorageRepository(chrome || browser, configStorageArea).set(dataSet)
.then(() => {
updateMessage(msgSpan, 'Configuration has been updated!', '#1111dd');
updateMessage(msgSpan, 'Configuration has been updated!', 'success');
setTimeout(() => {
msgSpan.firstChild.remove();
}, 2500);
})
.catch(lastError => {
updateMessage(msgSpan, lastError.message, '#dd1111');
updateMessage(msgSpan, lastError.message, 'warn');
});
} catch (e) {
updateMessage(msgSpan, `Failed to save because ${e.message}`, '#dd1111');
updateMessage(msgSpan, `Failed to save because ${e.message}`, 'warn');
}
}

Expand Down Expand Up @@ -94,7 +94,17 @@ window.onload = function() {
});
}

syncStorageRepo.get(['configSenderId', 'configStorageArea'].concat(booleanSettings))
elById('defaultVisualRadioButton').onchange = elById('lightVisualRadioButton').onchange = elById('darkVisualRadioButton').onchange = function() {
const visualMode = this.value;
syncStorageRepo.set({ visualMode });
if (visualMode === 'dark' || (visualMode === 'default' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.body.classList.add('darkMode');
} else {
document.body.classList.remove('darkMode');
}
}

syncStorageRepo.get(['configSenderId', 'configStorageArea', 'visualMode'].concat(booleanSettings))
.then(data => {
elById('configSenderIdText').value = data.configSenderId || '';
for (let key of booleanSettings) {
Expand All @@ -111,6 +121,12 @@ window.onload = function() {
break;
}

const visualMode = data.visualMode || 'default'
elById(visualMode + 'VisualRadioButton').checked = true;
if (visualMode === 'dark' || (visualMode === 'default' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.body.classList.add('darkMode');
}

new StorageRepository(chrome || browser, configStorageArea).get(['lztext'])
.then(data => {
let rawData = '';
Expand All @@ -126,9 +142,9 @@ window.onload = function() {
});
}

function updateMessage(el, msg, color) {
function updateMessage(el, msg, cls) {
const span = document.createElement('span');
span.style.color = color;
span.className = cls;
span.textContent = msg;
const child = el.firstChild;
if (child) {
Expand Down
13 changes: 10 additions & 3 deletions src/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,14 @@ window.onload = function() {
return false;
}

const storageRepo = new SyncStorageRepository(chrome || browser);
storageRepo.get(['visualMode']).then(({ visualMode }) => {
const mode = visualMode || 'default';
if (mode === 'dark' || (mode === 'default' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.body.classList.add('darkMode');
}
});

sessionMemory.get(['hasGoldenKey', 'switchCount'])
.then(({ hasGoldenKey, switchCount }) => {
if (hasGoldenKey || false) {
Expand Down Expand Up @@ -95,7 +103,6 @@ function main() {
} else {
const p = noMain.querySelector('p');
p.textContent = "You'll see the role list here when the current tab is AWS Management Console page.";
p.style.color = '#666';
noMain.style.display = 'block';
}
})
Expand Down Expand Up @@ -154,12 +161,12 @@ function setupRoleFilter() {
const profileName = anchor.dataset.search;
const hit = words.every(it => profileName.includes(it));
li.style.display = hit ? 'block' : 'none';
li.style.background = null;
li.classList.remove('selected')
if (hit && firstHitLi === null) firstHitLi = li;
});

if (firstHitLi) {
firstHitLi.style.background = '#f0f9ff';
firstHitLi.classList.add('selected');
AWSR_firstAnchor = firstHitLi.querySelector('a');
} else {
AWSR_firstAnchor = null;
Expand Down

0 comments on commit 6f1c5d6

Please sign in to comment.