More fine-tuning of element picker visual/behavior

- Group "Pick" and "Preview"
- Set minimal button width
- Auto-minimize when picking instead of fully hiding the dialog:
  this allows to quit while in picking mode
This commit is contained in:
Raymond Hill 2024-03-03 10:08:56 -05:00
parent 7f68c62f23
commit 43e0e15125
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
2 changed files with 16 additions and 14 deletions

View File

@ -22,15 +22,18 @@ html#ublock0-epicker,
overflow-y: auto;
position: fixed;
width: min(32rem, 100vw - 4px);
z-index: 100;
}
#ublock0-epicker.paused:not(.zap) aside {
#ublock0-epicker:not(.zap) aside {
display: flex;
}
#ublock0-epicker:not(.paused) aside,
#ublock0-epicker.minimized aside {
min-width: min(16rem, 100vw - 4px);
overflow: hidden;
width: min(16rem, 100vw - 4px);
}
#ublock0-epicker:not(.paused) aside > *:not(#windowbar),
#ublock0-epicker.minimized aside > *:not(#windowbar) {
display: none;
}
@ -42,6 +45,9 @@ html#ublock0-epicker,
display: flex;
justify-content: space-between;
}
#ublock0-epicker #toolbar button {
min-width: 6em;
}
#ublock0-epicker ul {
margin: 0.25em 0 0 0;
}
@ -203,15 +209,6 @@ html#ublock0-epicker,
background-color: var(--surface-2);
}
/**
https://github.com/gorhill/uBlock/issues/3449
https://github.com/uBlockOrigin/uBlock-issues/issues/55
**/
#ublock0-epicker.paused aside {
visibility: visible;
z-index: 100;
}
#ublock0-epicker svg#sea {
cursor: crosshair;
box-sizing: border-box;
@ -269,14 +266,17 @@ html#ublock0-epicker,
height: 2em;
width: 2em;
}
#ublock0-epicker:not(.paused) #windowbar #minimize {
display: none;
}
#windowbar #quit:hover,
#windowbar #minimize:hover {
background-color: var(--surface-2)
}
html.minimized #windowbar #minimize svg > path,
#ublock0-epicker.minimized #windowbar #minimize svg > path,
#windowbar #minimize svg > rect {
display: none;
}
html.minimized #windowbar #minimize svg > rect {
#ublock0-epicker.minimized #windowbar #minimize svg > rect {
display: initial;
}

View File

@ -35,8 +35,10 @@
</div>
</div>
<div id="toolbar">
<button id="pick" type="button" data-i18n="pickerPick">_<span class="hover"></span></button>
<button id="preview" type="button" data-i18n="pickerPreview">_<span class="hover"></span></button>
<div>
<button id="pick" type="button" data-i18n="pickerPick">_<span class="hover"></span></button>
<button id="preview" type="button" data-i18n="pickerPreview">_<span class="hover"></span></button>
</div>
<button id="create" type="button" class="preferred" disabled data-i18n="pickerCreate">_<span class="hover"></span></button>
</div>
</section>