keeweb
/
keeweb
mirror of https://github.com/keeweb/keeweb.git
1
0
Fork 0
Code Issues Releases Wiki Activity

fixed layout issues on the import screen

This commit is contained in:
antelle 2019-09-28 10:18:00 +02:00
parent 17dedb6b8e
commit 85b89a2d80
4 changed files with 59 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/scripts/framework/views/scrollable.js
View File

@ -43,8 +43,8 @@ const Scrollable = {
requestAnimationFrame(() => {
if (this.scroll) {
this.scroll.update();
const barHeight = this.scrollerBar.height();
const wrapperHeight = this.scrollerBarWrapper.height();
const barHeight = Math.round(this.scrollerBar.height());
const wrapperHeight = Math.round(this.scrollerBarWrapper.height());
this.scrollerBarWrapper.toggleClass('invisible', barHeight >= wrapperHeight);
}
});

15
app/scripts/views/import-csv-view.js
View File

@ -33,9 +33,9 @@ class ImportCsvView extends View {
super(model, options);
this.appModel = options.appModel;
this.fileName = options.fileName;
this.initScroll();
this.guessFieldMapping();
this.fillGroups();
this.initScroll();
}
render() {
@ -47,10 +47,19 @@ class ImportCsvView extends View {
});
this.createScroll({
root: this.$el.find('.import-csv__body')[0],
scroller: this.$el.find('.scroller')[0],
bar: this.$el.find('.scroller__bar')[0]
scroller: this.$el.find('.import-csv__body > .scroller')[0],
bar: this.$el.find('.import-csv__body > .scroller__bar-wrapper > .scroller__bar')[0]
});
this.pageResized();
if (!this.scroll._update) {
this.scroll._update = this.scroll.update;
this.scroll.update = this.scrollUpdate.bind(this);
}
}
scrollUpdate() {
this.scroller.css({ width: 'auto', minWidth: 'auto', maxWidth: 'auto' });
this.scroll._update();
}
returnToApp() {

10
app/styles/areas/_import-csv.scss
View File

@ -20,11 +20,15 @@
}
}
&__table-wrap {
overflow-x: auto;
width: calc(100vw - #{$base-padding-h * 3});
max-width: calc(100vw - #{$base-padding-h * 3});
@include scrollbar-on-hover;
}
&__table {
border-collapse: collapse;
width: calc(100vw - #{$base-padding-h * 2});
max-width: calc(100vw - #{$base-padding-h * 2});
overflow: hidden;
td, th {
text-align: left;
padding: $base-padding;

72
app/templates/import-csv.hbs
View File

@ -7,41 +7,45 @@
</div>
<div class="import-csv__body">
<div class="scroller">
<table class="import-csv__table">
<thead>
<tr>
{{#each headers as |header|}}
<th>{{header}}</th>
{{/each}}
</tr>
<tr>
{{#each fieldMapping as |mapped|}}
<th>
<select data-col="{{@index}}" class="import-csv__field-select">
<option value="" {{#ifeq mapped.type 'ignore'}}selected{{/ifeq}}>({{res 'importIgnoreField'}})</option>
<option value="Title" {{#ifeq mapped.field 'Title'}}selected{{/ifeq}}>{{Res 'title'}}</option>
<option value="UserName" {{#ifeq mapped.field 'UserName'}}selected{{/ifeq}}>{{Res 'user'}}</option>
<option value="Password" {{#ifeq mapped.field 'Password'}}selected{{/ifeq}}>{{Res 'password'}}</option>
<option value="URL" {{#ifeq mapped.field 'URL'}}selected{{/ifeq}}>{{Res 'website'}}</option>
<option value="Notes" {{#ifeq mapped.field 'Notes'}}selected{{/ifeq}}>{{Res 'notes'}}</option>
{{#ifeq mapped.type 'custom'}}
<option value="{{mapped.field}}" selected>{{mapped.field}}</option>
{{/ifeq}}
</select>
</th>
{{/each}}
</tr>
</thead>
<tbody>
{{#each rows as |row|}}
<tr>
{{#each row as |field|}}
<td>{{field}}</td>
<div class="import-csv__table-wrap">
<div class="scroller">
<table class="import-csv__table">
<thead>
<tr>
{{#each headers as |header|}}
<th>{{header}}</th>
{{/each}}
</tr>
<tr>
{{#each fieldMapping as |mapped|}}
<th>
<select data-col="{{@index}}" class="import-csv__field-select">
<option value="" {{#ifeq mapped.type 'ignore'}}selected{{/ifeq}}>({{res 'importIgnoreField'}})</option>
<option value="Title" {{#ifeq mapped.field 'Title'}}selected{{/ifeq}}>{{Res 'title'}}</option>
<option value="UserName" {{#ifeq mapped.field 'UserName'}}selected{{/ifeq}}>{{Res 'user'}}</option>
<option value="Password" {{#ifeq mapped.field 'Password'}}selected{{/ifeq}}>{{Res 'password'}}</option>
<option value="URL" {{#ifeq mapped.field 'URL'}}selected{{/ifeq}}>{{Res 'website'}}</option>
<option value="Notes" {{#ifeq mapped.field 'Notes'}}selected{{/ifeq}}>{{Res 'notes'}}</option>
{{#ifeq mapped.type 'custom'}}
<option value="{{mapped.field}}" selected>{{mapped.field}}</option>
{{/ifeq}}
</select>
</th>
{{/each}}
</tr>
</thead>
<tbody>
{{#each rows as |row|}}
<tr>
{{#each row as |field|}}
<td>{{field}}</td>
{{/each}}
</tr>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
</tbody>
</table>
</div>
</div>
</div>
<div class="scroller__bar-wrapper"><div class="scroller__bar"></div></div>
</div>