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

made the delete button shows once selected, hides otherwise

Browse source
This commit is contained in:
joey 2020-03-09 18:35:32 -04:00
parent 2c3c95965d
commit 4a1f9ada67
3 changed files with 21 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/css/popup.css
View file

@ -668,8 +668,12 @@ span ~ .panel-header-text {
fill: #0094fb; fill: #0094fb;
} }
.container-panel-row:hover {
background-color: #ebebeb !important;
}
.highlight { .highlight {
background-color: #979797 !important; background-color: #0094fb3f !important;
} }
/* Panel Footer */ /* Panel Footer */
@ -798,17 +802,6 @@ span ~ .panel-header-text {
padding-inline-start: 30%; padding-inline-start: 30%;
} }
.edit-container-delete-button {
align-items: center;
/*background: var(--primary-action-color);*/
block-size: 100%;
color: black;
display: inline-block;
justify-content: center;
padding-block-start: 6px;
padding-inline-start: 40%;
}
.edit-containers-panel-footer { .edit-containers-panel-footer {
background: var(--primary-action-color); background: var(--primary-action-color);
} }

17
src/js/popup.js
View file

@ -998,6 +998,16 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
} }
}, },
updateDeleteButton(selectedContainers) {
const deleteButton = document.querySelector("div.panel-footer.panel-footer-secondary");
console.log(deleteButton);
if (selectedContainers.length === 0) {
deleteButton.classList.add("hide");
} else {
deleteButton.classList.remove("hide");
}
},
// This method is called when the object is registered. // This method is called when the object is registered.
initialize() { initialize() {
Logic.addEnterHandler(document.querySelector("#exit-edit-mode-link"), () => { Logic.addEnterHandler(document.querySelector("#exit-edit-mode-link"), () => {
@ -1024,6 +1034,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
// This method is called when the panel is shown. // This method is called when the panel is shown.
prepare() { prepare() {
Logic.resetSelectedIdentities(); Logic.resetSelectedIdentities();
this.updateDeleteButton(Logic.currentSelectedIdentities());
const fragment = document.createDocumentFragment(); const fragment = document.createDocumentFragment();
Logic.identities().forEach(identity => { Logic.identities().forEach(identity => {
const tr = document.createElement("tr"); const tr = document.createElement("tr");
@ -1073,9 +1084,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
let start = identities.indexOf(this.lastSelected); let start = identities.indexOf(this.lastSelected);
let end = Logic.identities().indexOf(identity); let end = Logic.identities().indexOf(identity);
if (start > end) { if (start > end) {
const tmp = start; start = [end, end=start][0];
start = end;
end = tmp;
} }
const panels = document.querySelectorAll(".unstriped .container-panel-row"); const panels = document.querySelectorAll(".unstriped .container-panel-row");
@ -1095,6 +1104,8 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
this.lastSelected = identity; this.lastSelected = identity;
this.updateDeleteButton(currentSelectedIdentity);
console.log(Logic.currentSelectedIdentities()); console.log(Logic.currentSelectedIdentities());
} }
}); });

4
src/popup.html
View file

@ -179,8 +179,8 @@
<tbody id="edit-identities-list"></tbody> <tbody id="edit-identities-list"></tbody>
</table> </table>
</div> </div>
<div class="panel-footer panel-footer-secondary"> <div class="panel-footer panel-footer-secondary hide">
<a href="#" id="delete-link" class="edit-container-delete-button">Delete</a> <a href="#" id="delete-link" class="button secondary">Delete</a>
</div> </div>
<div class="panel-footer edit-containers-panel-footer"> <div class="panel-footer edit-containers-panel-footer">
<a href="#" id="exit-edit-mode-link" class="exit-edit-mode-link edit-containers-exit-text"> <a href="#" id="exit-edit-mode-link" class="exit-edit-mode-link edit-containers-exit-text">