change looks of gap tile as it's auto-loaded now

This commit is contained in:
Bruno Windels 2020-08-17 15:22:39 +02:00
parent 56efd7eee0
commit 2cfd38379f
2 changed files with 18 additions and 5 deletions

View file

@ -67,3 +67,18 @@ limitations under the License.
display: flex; display: flex;
align-items: center; align-items: center;
} }
.GapView {
visibility: hidden;
display: flex;
padding: 10px 20px;
}
.GapView.isLoading {
visibility: visible;
}
.GapView > div {
flex: 1;
margin-left: 10px;
}

View file

@ -15,6 +15,7 @@ limitations under the License.
*/ */
import {TemplateView} from "../../../general/TemplateView.js"; import {TemplateView} from "../../../general/TemplateView.js";
import {spinner} from "../../../common.js";
export class GapView extends TemplateView { export class GapView extends TemplateView {
render(t, vm) { render(t, vm) {
@ -22,12 +23,9 @@ export class GapView extends TemplateView {
GapView: true, GapView: true,
isLoading: vm => vm.isLoading isLoading: vm => vm.isLoading
}; };
const label = (vm.isUp ? "🠝" : "🠟") + " fill gap"; //no binding
return t.li({className}, [ return t.li({className}, [
t.button({ spinner(t),
onClick: () => vm.fill(), t.div(vm.i18n`Loading more messages …`),
disabled: vm => vm.isLoading
}, label),
t.if(vm => vm.error, t.createTemplate(t => t.strong(vm => vm.error))) t.if(vm => vm.error, t.createTemplate(t => t.strong(vm => vm.error)))
]); ]);
} }