Mercurial > gemma
diff client/src/components/systemconfiguration/PDFTemplates.vue @ 3597:d1bbfb9635ca
client: configuration: unified styles of different config components
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 04 Jun 2019 16:54:45 +0200 |
parents | 63322cd63a57 |
children | f96def15847e |
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/PDFTemplates.vue Tue Jun 04 16:50:17 2019 +0200 +++ b/client/src/components/systemconfiguration/PDFTemplates.vue Tue Jun 04 16:54:45 2019 +0200 @@ -1,82 +1,75 @@ <template> - <div class="d-flex flex-column"> - <div class="d-flex flex-row justify-content-between"> - <h5><translate>PDF-Templates</translate></h5> - <input - @change="uploadTemplate" - id="uploadTemplate" - ref="uploadTemplate" - type="file" - style="visibility:hidden" - /> - </div> - <div class="mt-1 border-bottom pb-4"> - <UITableHeader - :columns="[ - { id: 'name', title: `${nameLabel}`, class: 'col-3' }, - { id: 'time', title: `${dateLabel}`, class: 'col-3' }, - { id: 'type', title: `${typeLabel}`, class: 'col-2' }, - { id: 'country', title: `${countryLabel}`, class: 'col-2' } - ]" - /> - <UITableBody :data="templates | sortTable(sortColumn, sortDirection)"> - <template v-slot:row="{ item: template }"> - <div class="py-1 col-3">{{ template.name }}</div> - <div class="py-1 col-3">{{ template.time }}</div> - <div class="py-1 col-2">{{ template.type }}</div> - <div class="py-1 col-2" v-if="template.country"> - {{ template.country }} - </div> - <div class="py-1 col-2" v-else><i>global</i></div> - <div class="col py-1 text-right"> - <button - class="btn btn-xs btn-info mr-1" - ref="downloadTemplate" - @click="downloadTemplate(template)" - > - <font-awesome-icon icon="download" fixed-width /> - </button> - <button - class="btn btn-xs btn-dark" - @click="deleteTemplate(template)" - > - <font-awesome-icon icon="trash" fixed-width /> - </button> - </div> - </template> - </UITableBody> - <div class="mt-2"> - <button - class="btn btn-info btn-sm mr-2" - @click=" - type = 'map'; - $refs.uploadTemplate.click(); - " - > - <font-awesome-icon - icon="spinner" - class="fa-spin fa-fw" - v-if="uploading" - /> - <font-awesome-icon icon="upload" class="fa-fw" v-else /> - <translate>Upload new map template</translate> - </button> - <button - class="btn btn-info btn-sm" - @click=" - type = 'diagram'; - $refs.uploadTemplate.click(); - " - > - <font-awesome-icon - icon="spinner" - class="fa-spin fa-fw" - v-if="uploading" - /> - <font-awesome-icon icon="upload" class="fa-fw" v-else /> - <translate>Upload new diagram template</translate> - </button> - </div> + <div class="d-flex flex-column pb-4 border-bottom"> + <h5 class="py-2 px-3 m-0"><translate>PDF-Templates</translate></h5> + <input + @change="uploadTemplate" + id="uploadTemplate" + ref="uploadTemplate" + type="file" + style="visibility: hidden; position: absolute;" + /> + <UITableHeader + :columns="[ + { id: 'name', title: `${nameLabel}`, class: 'col-3' }, + { id: 'time', title: `${dateLabel}`, class: 'col-3' }, + { id: 'type', title: `${typeLabel}`, class: 'col-2' }, + { id: 'country', title: `${countryLabel}`, class: 'col-2' } + ]" + /> + <UITableBody :data="templates | sortTable(sortColumn, sortDirection)"> + <template v-slot:row="{ item: template }"> + <div class="py-1 col-3">{{ template.name }}</div> + <div class="py-1 col-3">{{ template.time }}</div> + <div class="py-1 col-2">{{ template.type }}</div> + <div class="py-1 col-2" v-if="template.country"> + {{ template.country }} + </div> + <div class="py-1 col-2" v-else><i>global</i></div> + <div class="col py-1 text-right"> + <button + class="btn btn-xs btn-info mr-1" + ref="downloadTemplate" + @click="downloadTemplate(template)" + > + <font-awesome-icon icon="download" fixed-width /> + </button> + <button class="btn btn-xs btn-dark" @click="deleteTemplate(template)"> + <font-awesome-icon icon="trash" fixed-width /> + </button> + </div> + </template> + </UITableBody> + <div class="px-2 mt-2"> + <button + class="btn btn-info btn-sm mr-2" + @click=" + type = 'map'; + $refs.uploadTemplate.click(); + " + > + <font-awesome-icon + icon="spinner" + class="fa-spin fa-fw" + v-if="uploading" + /> + <font-awesome-icon icon="upload" class="fa-fw" v-else /> + <translate>Upload new map template</translate> + </button> + <button + class="btn btn-info btn-sm" + @click=" + type = 'diagram'; + $refs.uploadTemplate.click(); + " + > + <font-awesome-icon + icon="spinner" + class="fa-spin fa-fw" + v-if="uploading" + /> + <font-awesome-icon icon="upload" class="fa-fw" v-else /> + <translate>Upload new diagram template</translate> + </button> </div> </div> </template>