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; display: block;
} }
.column-panel-content form span { .radio-choice > .radio-container {
align-items: center; align-items: center;
block-size: 44px; block-size: 29px;
display: flex; display: flex;
flex: 0 0 25%; flex: 0 0 calc(100% / 8);
justify-content: center;
} }
.edit-container-panel label { .radio-choice > .radio-container > label {
background-image: var(--identity-icon); background-image: var(--identity-icon);
background-size: 26px 26px; background-size: 16px;
block-size: 34px; block-size: 22px;
fill: var(--identity-icon-color); fill: var(--identity-icon-color);
filter: url('/img/filters.svg#fill'); filter: url('/img/filters.svg#fill');
flex: 0 0 34px; flex: 0 0 22px;
margin-inline-start: 2px;
position: relative; position: relative;
} }
.edit-container-panel label::before { .radio-choice > .radio-container > label::before {
block-size: 0;
inline-size: 0;
opacity: 0 !important; opacity: 0 !important;
} }
.edit-container-panel [type="radio"] { .radio-choice > .radio-container > [type="radio"] {
display: inline; display: inline;
-moz-appearance: none;
opacity: 0; opacity: 0;
} }
.edit-container-panel [type="radio"]:checked + label { .radio-choice > .radio-container > [type="radio"]:checked + label {
outline: 2px solid grey; outline: 2px solid grey;
-moz-outline-radius: 50px; -moz-outline-radius: 50px;
} }
@ -842,5 +845,5 @@ span ~ .panel-header-text {
.edit-container-panel legend { .edit-container-panel legend {
flex: 1 0; flex: 1 0;
font-size: 14px !important; 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 colors = ["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple" ];
const colorRadioFieldset = document.getElementById("edit-container-panel-choose-color"); const colorRadioFieldset = document.getElementById("edit-container-panel-choose-color");
colors.forEach((containerColor) => { 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 // eslint-disable-next-line no-unsanitized/property
templateInstance.innerHTML = colorRadioTemplate(containerColor); templateInstance.innerHTML = colorRadioTemplate(containerColor);
colorRadioFieldset.appendChild(templateInstance); 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 icons = ["fingerprint", "briefcase", "dollar", "cart", "vacation", "gift", "food", "fruit", "pet", "tree", "chill", "circle"];
const iconRadioFieldset = document.getElementById("edit-container-panel-choose-icon"); const iconRadioFieldset = document.getElementById("edit-container-panel-choose-icon");
icons.forEach((containerIcon) => { 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 // eslint-disable-next-line no-unsanitized/property
templateInstance.innerHTML = iconRadioTemplate(containerIcon); templateInstance.innerHTML = iconRadioTemplate(containerIcon);
iconRadioFieldset.appendChild(templateInstance); iconRadioFieldset.appendChild(templateInstance);

4
webextension/popup.html
View file

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