rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve assignment styles part of #561

Browse source
This commit is contained in:
Jonathan Kingston 2017-06-19 14:33:52 +01:00
parent 13e4b4e7f7
commit 4e0180d521
3 changed files with 28 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
webextension/css/popup.css
View file

@ -762,25 +762,34 @@ span ~ .panel-header-text {
#edit-sites-assigned h3 { #edit-sites-assigned h3 {
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
padding-block-end: 5px; padding-block-end: 6px;
padding-block-start: 6px;
padding-inline-end: 16px; padding-inline-end: 16px;
padding-inline-start: 16px; padding-inline-start: 16px;
} }
#edit-sites-assigned table td { .assigned-sites-list > div {
display: flex; display: flex;
padding-inline-end: 16px; padding-block-end: 6px;
padding-inline-start: 16px; padding-block-start: 6px;
} }
#edit-sites-assigned .delete-assignment { .assigned-sites-list > div > .icon {
margin-inline-end: 10px;
}
.assigned-sites-list > div > .delete-assignment {
display: none; display: none;
} }
#edit-sites-assigned tr:hover > td > .delete-assignment { .assigned-sites-list > div:hover > .delete-assignment {
display: block; display: block;
} }
.assigned-sites-list > div > .hostname {
flex: 1;
}
.radio-choice > .radio-container { .radio-choice > .radio-container {
align-items: center; align-items: center;
block-size: 29px; block-size: 29px;

19
webextension/js/popup.js
View file

@ -783,7 +783,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
const assignmentKeys = Object.keys(assignments); const assignmentKeys = Object.keys(assignments);
assignmentPanel.hidden = !(assignmentKeys.length > 0); assignmentPanel.hidden = !(assignmentKeys.length > 0);
if (assignments) { if (assignments) {
const tableElement = assignmentPanel.querySelector("table > tbody"); const tableElement = assignmentPanel.querySelector(".assigned-sites-list");
/* Remove previous assignment list, /* Remove previous assignment list,
after removing one we rerender the list */ after removing one we rerender the list */
while (tableElement.firstChild) { while (tableElement.firstChild) {
@ -791,18 +791,19 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
} }
assignmentKeys.forEach((siteKey) => { assignmentKeys.forEach((siteKey) => {
const site = assignments[siteKey]; const site = assignments[siteKey];
const trElement = document.createElement("tr"); const trElement = document.createElement("div");
/* As we don't have the full or correct path the best we can assume is the path is HTTPS and then replace with a broken icon later if it doesn't load. /* As we don't have the full or correct path the best we can assume is the path is HTTPS and then replace with a broken icon later if it doesn't load.
This is pending a better solution for favicons from web extensions */ This is pending a better solution for favicons from web extensions */
const assumedUrl = `https://${site.hostname}`; const assumedUrl = `https://${site.hostname}`;
trElement.innerHTML = escaped` trElement.innerHTML = escaped`
<td><img class="icon" src="${assumedUrl}/favicon.ico"></td> <img class="icon" src="${assumedUrl}/favicon.ico">
<td title="${site.hostname}" class="truncate-text">${site.hostname} <div title="${site.hostname}" class="truncate-text hostname">
<img ${site.hostname}
class="pop-button-image delete-assignment" </div>
src="/img/container-delete.svg" <img
/> class="pop-button-image delete-assignment"
</td>`; src="/img/container-delete.svg"
/>`;
const deleteButton = trElement.querySelector(".delete-assignment"); const deleteButton = trElement.querySelector(".delete-assignment");
Logic.addEnterHandler(deleteButton, () => { Logic.addEnterHandler(deleteButton, () => {
const userContextId = Logic.currentUserContextId(); const userContextId = Logic.currentUserContextId();

12
webextension/popup.html
View file

@ -127,15 +127,9 @@
</fieldset> </fieldset>
</form> </form>
<div id="edit-sites-assigned" class="scrollable" hidden> <div id="edit-sites-assigned" class="scrollable" hidden>
<table id="container-assignement-table" class="container-info-list"> <h3>Sites assigned to this container</h3>
<thead> <div class="assigned-sites-list">
<th colspan="3"> </div>
<h3>Sites assigned to this container</h3>
</th>
</thead>
<tbody>
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>