mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 03:25:12 +01:00
style filter field and grid button
This commit is contained in:
Bruno Windels
parent
61b5369f2f
commit
ddda03d82c
@ -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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
4
src/ui/web/css/themes/element/icons/clear.svg
Normal file
4
src/ui/web/css/themes/element/icons/clear.svg
Normal 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 |
5
src/ui/web/css/themes/element/icons/disable-grid.svg
Normal file
5
src/ui/web/css/themes/element/icons/disable-grid.svg
Normal 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 |
6
src/ui/web/css/themes/element/icons/enable-grid.svg
Normal file
6
src/ui/web/css/themes/element/icons/enable-grid.svg
Normal 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 |
@ -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;
|
||||
}
|
||||
|
||||
@ -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()
|
||||
});
|
||||
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: {
|
||||
utility: true,
|
||||
grid: true,
|
||||
on: vm => vm.gridEnabled
|
||||
},
|
||||
title: gridButtonLabel,
|
||||
"aria-label": gridButtonLabel
|
||||
})
|
||||
]);
|
||||
|
||||
return t.div({className: "LeftPanel"}, [
|
||||
t.div({className: "filter"}, [
|
||||
filterInput,
|
||||
t.button({onClick: () => {
|
||||
filterInput.value = "";
|
||||
vm.clearFilter();
|
||||
}}, vm.i18n`Clear`),
|
||||
t.button({
|
||||
onClick: () => vm.toggleGrid(),
|
||||
className: "grid"
|
||||
}, vm => vm.gridEnabled ? "Single" : "Grid")
|
||||
]),
|
||||
utilitiesRow,
|
||||
t.view(new ListView(
|
||||
{
|
||||
className: "RoomList",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user