Merge b7e9084d67 into aca51cc11c
This commit is contained in:
Danny Colin
GitHub
commit
f2ab7f0016
3 changed files with 90 additions and 2 deletions
|
|
@ -89,9 +89,13 @@
|
|||
--input-border-color: #8f8f9d;
|
||||
--input-border-focus-color: #0060df;
|
||||
--input-border-active-color: #054096;
|
||||
--input-destructive-border-color: rgba(226, 40, 80, 1);
|
||||
--text-color-primary: #15141a;
|
||||
--menu-bg-active-color: #cfcfd8;
|
||||
--menu-bg-hover-color: #e0e0e6;
|
||||
--messagebar-destructive-bg-color: rgba(255, 232, 232, 1);
|
||||
--messagebar-destructive-border-color: rgba(0, 0, 0, 0.08);
|
||||
--messagebar-destructive-text-color: rgba(21, 20, 26, 1);
|
||||
--panel-bg-color: #fff;
|
||||
--panel-separator-color: rgba(240, 240, 244, 1);
|
||||
--link-color: #0060df;
|
||||
|
|
@ -153,11 +157,15 @@
|
|||
--input-border-color: #8f8f9d;
|
||||
--input-border-active-color: #aaf2ff;
|
||||
--input-border-focus-color: #0df;
|
||||
--input-destructive-border-color: rgba(255, 132, 128, 1);
|
||||
--link-color: #0df;
|
||||
--link-hover-color: #80ebff;
|
||||
--text-color-primary: #fbfbfe;
|
||||
--menu-bg-active-color: #5b5b66;
|
||||
--menu-bg-hover-color: #52525e;
|
||||
--messagebar-destructive-bg-color: rgba(105, 15, 34, 1);
|
||||
--messagebar-destructive-border-color: rgba(255, 255, 255, 0.08);
|
||||
--messagebar-destructive-text-color: rgba(251, 251, 254, 1);
|
||||
--panel-bg-color: #42414d;
|
||||
--panel-separator-color: rgba(82, 82, 94, 1);
|
||||
|
||||
|
|
@ -445,6 +453,7 @@ table {
|
|||
|
||||
.button {
|
||||
background-color: var(--button-bg-color-secondary);
|
||||
border: none;
|
||||
color: var(--text-color-primary);
|
||||
}
|
||||
|
||||
|
|
@ -2409,3 +2418,37 @@ tr:hover > td > .reset-button {
|
|||
.searchbar input {
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
/* Assignment panel */
|
||||
#edit-sites-new-assignment {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
#edit-sites-add-assignment {
|
||||
block-size: 32px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-family: inherit;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#edit-sites-add-assignment-info {
|
||||
|
||||
}
|
||||
|
||||
#edit-sites-add-assignment-error {
|
||||
background-color: var(--messagebar-destructive-bg-color);
|
||||
border: 1px solid var(--messagebar-destructive-border-color);
|
||||
border-radius: 4px;
|
||||
color: var(--messagebar-destructive-text-color);
|
||||
display: none;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#edit-sites-add-assignment:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@ const Logic = {
|
|||
notificationCards.forEach(notificationCard => {
|
||||
notificationCard.textContent = text;
|
||||
notificationCard.classList.add("is-shown");
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
notificationCard.classList.remove("is-shown");
|
||||
}, 2000);
|
||||
|
|
@ -1430,6 +1430,35 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
|
|||
return Promise.resolve(null);
|
||||
},
|
||||
|
||||
async addAssignment() {
|
||||
const errorMessage = document.getElementById("edit-sites-add-assignment-error");
|
||||
const assignmentInput = document.getElementById("edit-sites-add-assignment-info");
|
||||
|
||||
let url = document.getElementById("edit-sites-add-assignment-info").value;
|
||||
|
||||
if (!URL.canParse(url)) {
|
||||
url = "http://" + url;
|
||||
}
|
||||
|
||||
if (new URL(url).protocol == "https:" || new URL(url).protocol == "http:") {
|
||||
url = new URL(url);
|
||||
} else {
|
||||
errorMessage.style.display = "block";
|
||||
assignmentInput.style.border = "2px solid var(--input-destructive-border-color)";
|
||||
}
|
||||
|
||||
const userContextId = Logic.currentUserContextId();
|
||||
await Utils.setOrRemoveAssignment(
|
||||
false, url.origin, userContextId, false
|
||||
);
|
||||
|
||||
const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
|
||||
this.showAssignedContainers(assignments);
|
||||
|
||||
errorMessage.style.display = "none";
|
||||
assignmentInput.style.border = "1px solid var(--input-border-color)";
|
||||
},
|
||||
|
||||
showAssignedContainers(assignments) {
|
||||
const closeContEl = document.querySelector("#close-container-assignment-panel");
|
||||
Utils.addEnterHandler(closeContEl, () => {
|
||||
|
|
@ -1440,6 +1469,12 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
|
|||
const assignmentPanel = document.getElementById("edit-sites-assigned");
|
||||
const assignmentKeys = Object.keys(assignments);
|
||||
assignmentPanel.hidden = !(assignmentKeys.length > 0);
|
||||
|
||||
const addAssignmentButton = document.getElementById("edit-sites-add-assignment");
|
||||
Utils.addEnterHandler(addAssignmentButton, async () => {
|
||||
this.addAssignment();
|
||||
});
|
||||
|
||||
if (assignments) {
|
||||
const tableElement = document.querySelector("#edit-sites-assigned");
|
||||
/* Remove previous assignment list,
|
||||
|
|
@ -1463,6 +1498,7 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
|
|||
<img title="${deleteSiteInfo}" class="trash-button delete-assignment" src="/img/container-delete.svg" />
|
||||
</td>`;
|
||||
trElement.getElementsByClassName("favicon")[0].appendChild(Utils.createFavIconElement(assumedUrl));
|
||||
|
||||
const deleteButton = trElement.querySelector(".trash-button");
|
||||
Utils.addEnterHandler(deleteButton, async () => {
|
||||
const userContextId = Logic.currentUserContextId();
|
||||
|
|
@ -1472,6 +1508,7 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
|
|||
delete assignments[siteKey];
|
||||
this.showAssignedContainers(assignments);
|
||||
});
|
||||
|
||||
const resetButton = trElement.querySelector(".reset-button");
|
||||
Utils.addEnterHandler(resetButton, async () => {
|
||||
const cookieStoreId = Logic.currentCookieStoreId();
|
||||
|
|
@ -1486,6 +1523,7 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
|
|||
Logic.notify({messageId: "cookiesCouldNotBeCleared", placeholders: [site.hostname]});
|
||||
}
|
||||
});
|
||||
|
||||
trElement.classList.add("menu-item", "hover-highlight", "keyboard-nav");
|
||||
tableElement.appendChild(trElement);
|
||||
});
|
||||
|
|
@ -2295,7 +2333,7 @@ Logic.registerPanel(P_CLEAR_CONTAINER_STORAGE, {
|
|||
// This method is called when the panel is shown.
|
||||
prepare() {
|
||||
const identity = Logic.currentIdentity();
|
||||
|
||||
|
||||
// Populating the panel: name, icon, and warning message
|
||||
document.getElementById("container-clear-storage-title").textContent = identity.name;
|
||||
return Promise.resolve(null);
|
||||
|
|
|
|||
|
|
@ -398,6 +398,13 @@
|
|||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="edit-sites-new-assignment">
|
||||
<input id="edit-sites-add-assignment-info" type="text">
|
||||
<p id="edit-sites-add-assignment-error">You entered an invalid site URL.</p>
|
||||
<button id="edit-sites-add-assignment" class="button controller">
|
||||
Add site
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hide panel delete-container-panel" id="delete-container-panel">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue