style filter field and grid button

This commit is contained in:
Bruno Windels 2020-10-07 17:59:14 +02:00
parent 61b5369f2f
commit ddda03d82c
7 changed files with 125 additions and 26 deletions

View file

@ -20,3 +20,13 @@ limitations under the License.
width: 100%;
box-sizing: border-box;
}
.FilterField {
display: flex;
}
.FilterField input {
display: block;
flex: 1;
min-width: 0;
}

View file

@ -19,15 +19,12 @@ limitations under the License.
flex-direction: column;
}
.LeftPanel .filter {
.LeftPanel .utilities {
display: flex;
}
.LeftPanel .filter input {
display: block;
.LeftPanel .utilities .FilterField {
flex: 1;
box-sizing: border-box;
min-width: 0;
}
.LeftPanel ul {

View file

@ -0,0 +1,4 @@
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.33313 1.33313L6.66646 6.66646" stroke="#8D99A5" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6.66699 1.33313L1.33366 6.66646" stroke="#8D99A5" stroke-width="1.5" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 307 B

View file

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 0.75H12C13.7949 0.75 15.25 2.20507 15.25 4V12C15.25 13.7949 13.7949 15.25 12 15.25H4C2.20507 15.25 0.75 13.7949 0.75 12V4C0.75 2.20507 2.20507 0.75 4 0.75Z" stroke="#8D99A5" stroke-width="1.5"/>
<path d="M0 12H16V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V12Z" fill="#8D99A5"/>
<path d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V5H0V4Z" fill="#8D99A5"/>
</svg>

After

Width:  |  Height:  |  Size: 501 B

View file

@ -0,0 +1,6 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="9.59998" width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
<rect x="9.59998" y="9.59998" width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
<rect y="9.59998" width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
<rect width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
</svg>

After

Width:  |  Height:  |  Size: 379 B

View file

@ -117,6 +117,50 @@ button.styled {
font-weight: 500;
}
.FilterField {
background-color: #e1e3e6;
border-radius: 16px;
height: 32px;
align-items: center;
padding: 0 8px;
box-sizing: border-box;
}
.FilterField :not(:first-child) {
margin-left: 8px;
}
.FilterField:focus-within {
border: 1px #e1e3e6 solid;
background-color: white;
}
/*.FilterField:not(:focus-within) button {
display: none;
}*/
.FilterField input {
font-family: "Inter";
font-size: 1.3rem;
font-weight: 500;
line-height: 1.573rem;
outline: none;
border: none;
background-color: transparent;
height: 100%;
}
.FilterField button {
width: 16px;
height: 16px;
background-position: center;
background-color: #e1e3e6;
background-repeat: no-repeat;
background-image: url('icons/clear.svg');
border: none;
border-radius: 100%;
}
.PreSessionScreen {
padding: 30px;
}

View file

@ -18,34 +18,67 @@ import {ListView} from "../../general/ListView.js";
import {TemplateView} from "../../general/TemplateView.js";
import {RoomTileView} from "./RoomTileView.js";
export class LeftPanelView extends TemplateView {
render(t, vm) {
class FilterField extends TemplateView {
render(t, options) {
const clear = () => {
filterInput.value = "";
filterInput.blur();
clearButton.blur();
options.clear();
};
const filterInput = t.input({
type: "text",
placeholder: vm.i18n`Filter rooms…`,
"aria-label": vm.i18n`Filter rooms by name`,
autocomplete: true,
name: "room-filter",
onInput: event => vm.setFilter(event.target.value),
placeholder: options?.label,
"aria-label": options?.label,
autocomplete: options?.autocomplete,
name: options?.name,
onInput: event => options.set(event.target.value),
onKeydown: event => {
if (event.key === "Escape" || event.key === "Esc") {
filterInput.value = "";
vm.clearFilter();
}
clear();
}
},
onFocus: () => filterInput.select()
});
return t.div({className: "LeftPanel"}, [
t.div({className: "filter"}, [
filterInput,
t.button({onClick: () => {
filterInput.value = "";
vm.clearFilter();
}}, vm.i18n`Clear`),
const clearButton = t.button({
onClick: clear,
title: options.i18n`Clear`,
"aria-label": options.i18n`Clear`
});
return t.div({className: "FilterField"}, [filterInput, clearButton]);
}
}
export class LeftPanelView extends TemplateView {
render(t, vm) {
const gridButtonLabel = vm => {
return vm.gridEnabled ?
vm.i18n`Show single room` :
vm.i18n`Enable grid layout`;
};
const utilitiesRow = t.div({className: "utilities"}, [
t.view(new FilterField({
i18n: vm.i18n,
label: vm.i18n`Filter rooms…`,
name: "room-filter",
autocomplete: true,
set: query => vm.setFilter(query),
clear: () => vm.clearFilter()
})),
t.button({
onClick: () => vm.toggleGrid(),
className: "grid"
}, vm => vm.gridEnabled ? "Single" : "Grid")
]),
className: {
utility: true,
grid: true,
on: vm => vm.gridEnabled
},
title: gridButtonLabel,
"aria-label": gridButtonLabel
})
]);
return t.div({className: "LeftPanel"}, [
utilitiesRow,
t.view(new ListView(
{
className: "RoomList",