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

WIP edit-containers restyle

Browse source
This commit is contained in:
Jonathan Kingston 2017-06-19 11:46:41 +01:00
parent 6533c74d0a
commit 2278498b06
3 changed files with 21 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
webextension/css/popup.css
View file

@ -776,34 +776,37 @@ span ~ .panel-header-text {
display: block;
}
.column-panel-content form span {
.radio-choice > .radio-container {
align-items: center;
block-size: 44px;
block-size: 29px;
display: flex;
flex: 0 0 25%;
justify-content: center;
flex: 0 0 calc(100% / 8);
}
.edit-container-panel label {
.radio-choice > .radio-container > label {
background-image: var(--identity-icon);
background-size: 26px 26px;
block-size: 34px;
background-size: 16px;
block-size: 22px;
fill: var(--identity-icon-color);
filter: url('/img/filters.svg#fill');
flex: 0 0 34px;
flex: 0 0 22px;
margin-inline-start: 2px;
position: relative;
}
.edit-container-panel label::before {
.radio-choice > .radio-container > label::before {
block-size: 0;
inline-size: 0;
opacity: 0 !important;
}
.edit-container-panel [type="radio"] {
.radio-choice > .radio-container > [type="radio"] {
display: inline;
-moz-appearance: none;
opacity: 0;
}
.edit-container-panel [type="radio"]:checked + label {
.radio-choice > .radio-container > [type="radio"]:checked + label {
outline: 2px solid grey;
-moz-outline-radius: 50px;
}
@ -842,5 +845,5 @@ span ~ .panel-header-text {
.edit-container-panel legend {
flex: 1 0;
font-size: 14px !important;
padding-block-end: 5px;
padding-block-end: 6px;
}

6
webextension/js/popup.js
View file

@ -830,7 +830,8 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
const colors = ["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple" ];
const colorRadioFieldset = document.getElementById("edit-container-panel-choose-color");
colors.forEach((containerColor) => {
const templateInstance = document.createElement("span");
const templateInstance = document.createElement("div");
templateInstance.classList.add("radio-container");
// eslint-disable-next-line no-unsanitized/property
templateInstance.innerHTML = colorRadioTemplate(containerColor);
colorRadioFieldset.appendChild(templateInstance);
@ -843,7 +844,8 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
const icons = ["fingerprint", "briefcase", "dollar", "cart", "vacation", "gift", "food", "fruit", "pet", "tree", "chill", "circle"];
const iconRadioFieldset = document.getElementById("edit-container-panel-choose-icon");
icons.forEach((containerIcon) => {
const templateInstance = document.createElement("span");
const templateInstance = document.createElement("div");
templateInstance.classList.add("radio-container");
// eslint-disable-next-line no-unsanitized/property
templateInstance.innerHTML = iconRadioTemplate(containerIcon);
iconRadioFieldset.appendChild(templateInstance);

4
webextension/popup.html
View file

@ -119,10 +119,10 @@
<legend>Name</legend>
<input type="text" name="container-name" id="edit-container-panel-name-input" maxlength="25"/>
</fieldset>
<fieldset id="edit-container-panel-choose-color">
<fieldset id="edit-container-panel-choose-color" class="radio-choice">
<legend>Choose a color</legend>
</fieldset>
<fieldset id="edit-container-panel-choose-icon">
<fieldset id="edit-container-panel-choose-icon" class="radio-choice">
<legend>Choose an icon</legend>
</fieldset>
</form>