diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 3c5964f3..59b6436b 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -315,6 +315,12 @@ "message": "Enable", "description": "Label for the button to enable a style" }, + "excludeStyleByDomainLabel": { + "message": "Exclude the current domain" + }, + "excludeStyleByUrlLabel": { + "message": "Exclude the current URL" + }, "exportLabel": { "message": "Export", "description": "Label for the button to export a style ('edit' page) or all styles ('manage' page)" diff --git a/popup.html b/popup.html index baf48db3..72317782 100644 --- a/popup.html +++ b/popup.html @@ -39,12 +39,45 @@ - + + + + + + diff --git a/popup/popup.css b/popup/popup.css index 9eca352a..44f50348 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -286,6 +286,50 @@ html[style*="border"] .entry:nth-child(11):before { color: darkred; } +/* entry menu */ +.entry .menu { + position: absolute; + display: flex; + flex-direction: column; + top: 100%; + width: 100%; + z-index: 1; + box-sizing: border-box; + background-color: white; +} +.entry .menu-item { + display: flex; + border: none; + align-items: center; + padding: 0 0 0 20px; + cursor: pointer; + height: 25px; + background: unset; +} +.entry .menu-item:hover, +.entry .menu-item:active { + background-color: hsl(0, 0%, 95%); + transition: background-color .25s; +} +.entry:not(.menu-active) .menu { + display: none; +} +.entry .menu-icon { + width: 26px; +} +.entry .menu-icon > * { + display: block; + margin: 0 auto; +} + +/* checkbox */ +.checkbox-container { + position: relative; + display: inline-block; + width: 12px; + height: 12px; +} + .regexp-problem-indicator { background-color: #d00; width: 14px; diff --git a/popup/popup.js b/popup/popup.js index ccc3acbc..22cc952d 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -309,6 +309,8 @@ function createStyleElement(style) { indicator.appendChild(document.createTextNode('!')); indicator.onclick = handleEvent.indicator; $('.main-controls', entry).appendChild(indicator); + + $('.menu-button', entry).onclick = handleEvent.toggleMenu; } style = Object.assign(entry.styleMeta, style); @@ -356,6 +358,20 @@ Object.assign(handleEvent, { .then(sortStylesInPlace); }, + toggleMenu(event) { + const entry = handleEvent.getClickedStyleElement(event); + entry.classList.toggle('menu-active'); + if (entry.classList.contains('menu-active')) { + document.addEventListener('click', function handler(e) { + if ($('.menu', entry).contains(e.target)) { + return; + } + entry.classList.toggle('menu-active'); + document.removeEventListener('click', handler); + }); + } + }, + delete(event) { const entry = handleEvent.getClickedStyleElement(event); const id = entry.styleId;