menus mimic dialogs

I think it's better in general, and also eliminates the glitchiness of expandable menus in FF, not to mention possible scroll issues on long style lists with overflow, plus the fact that we could add many menu items in the future without the menu looking ridiculous.
This commit is contained in:
narcolepticinsomniac 2019-06-11 10:49:07 -04:00 committed by GitHub
parent 514fa3204f
commit 853ed217f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,4 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<!DOCTYPE html>
<html id="stylus"> <html id="stylus">
<head> <head>
@ -47,33 +48,32 @@
</a> </a>
</div> </div>
</div> </div>
<div class="menu"> <div class="menu" tabindex="-1">
<label class="menu-item exclude-by-domain button"> <div class="menu-items-wrapper">
<div class="menu-icon"> <b class="menu-title"></b>
<div class="checkbox-container"> <label class="menu-item exclude-by-domain button">
<input type="checkbox" class="exclude-by-domain-checkbox"> <div class="menu-icon">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <div class="checkbox-container">
<input type="checkbox" class="exclude-by-domain-checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</div>
</div> </div>
</div> <span i18n-text="excludeStyleByDomainLabel"></span>
<span i18n-text="excludeStyleByDomainLabel"></span> </label>
</label> <label class="menu-item exclude-by-url button">
<label class="menu-item exclude-by-url button"> <div class="menu-icon">
<div class="menu-icon"> <div class="checkbox-container">
<div class="checkbox-container"> <input type="checkbox" class="exclude-by-url-checkbox">
<input type="checkbox" class="exclude-by-url-checkbox"> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> </div>
</div> </div>
<span i18n-text="excludeStyleByUrlLabel"></span>
</label>
<div class="menu-buttons-wrapper">
<button class="delete" i18n-text="deleteStyleLabel"></button>
<button class="menu-close" i18n-text="confirmClose"></button>
</div> </div>
<span i18n-text="excludeStyleByUrlLabel"></span> </div>
</label>
<a href="#" class="menu-item delete">
<div class="menu-icon">
<svg class="svg-icon remove" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
</svg>
</div>
<span i18n-text="deleteStyleLabel"></span>
</a>
</div> </div>
</div> </div>
</template> </template>