stryan/matrix.to
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

render back button in client list as left chevron

Browse Source
This commit is contained in:
Bruno Windels 2020-12-04 17:16:44 +01:00
parent 920a95296c
commit f538be6748
3 changed files with 33 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
css/client.css
View File

@ -2,6 +2,25 @@
padding: 16px 0;
}
.ClientListView > h2 {
display: flex;
align-items: center;
}
.ClientListView > h2 .back {
background: url('../images/chevron-left.svg');
background-color: none;
background-size: 40%;
background-repeat: no-repeat;
background-position: center;
border: none;
width: 24px;
height: 24px;
padding: 16px;
cursor: pointer;
margin-right: 8px;
}
.ClientView {
border: 1px solid #E6E6E6;
border-radius: 8px;
@ -29,6 +48,7 @@
height: 60px;
overflow: hidden;
display: block;
margin-left: 8px;
}
.ClientView .actions a.badge {

10
images/chevron-left.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="9" height="17" viewBox="0 0 9 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.20723 2.70711C8.59775 3.09763 8.59878 3.73182 8.20952 4.1236L3.27581 9.08934L8.22556 14.0391C8.61608 14.4296 8.61711 15.0638 8.22785 15.4556C7.83859 15.8474 7.20645 15.8484 6.81593 15.4579L1.15907 9.80101C0.768549 9.41049 0.767523 8.7763 1.15678 8.38452L6.79531 2.70939C7.18457 2.31761 7.8167 2.31658 8.20723 2.70711Z" fill="#333333"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="8" height="17" fill="white" transform="translate(8.5 17) rotate(-180)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 657 B

5
src/open/ClientListView.js
View File

@ -62,10 +62,11 @@ class AllClientsView extends TemplateView {
class ContinueWithClientView extends TemplateView {
render(t, vm) {
const backTitle = "Back to all clients";
return t.div({className: "ClientListView"}, [
t.h2([
`Continue with ${vm.clientViewModel.name} `,
t.button({onClick: () => vm.showAll()}, "Back")
t.button({className: "back", ["aria-label"]: backTitle, title: backTitle, onClick: () => vm.showAll()}),
t.span(`Continue with ${vm.clientViewModel.name}`)
]),
t.div({className: "list"}, t.view(new ClientView(vm.clientViewModel)))
]);