comparison client/src/components/Pdftool.vue @ 2387:f185503ef35a

client: unified box's header styles by creating a reusable component The clients html/css and resulting look and feel of the app is partially very inconsistent. By moving code to more small and reusable components consistency will hopefully be increased.
author Markus Kottlaender <markus@intevation.de>
date Mon, 25 Feb 2019 15:02:34 +0100
parents 6efd7ecd3a7d
children bb5286acfee2
comparison
equal deleted inserted replaced
2386:24e3e86b8cb6 2387:f185503ef35a
4 'box ui-element rounded bg-white text-nowrap', 4 'box ui-element rounded bg-white text-nowrap',
5 { expanded: showPdfTool } 5 { expanded: showPdfTool }
6 ]" 6 ]"
7 > 7 >
8 <div style="width: 18rem"> 8 <div style="width: 18rem">
9 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> 9 <UIBoxHeader
10 <font-awesome-icon icon="file-pdf" class="mr-2"></font-awesome-icon> 10 icon="file-pdf"
11 <translate>Generate PDF</translate> 11 title="Generate PDF"
12 <font-awesome-icon 12 :closeCallback="close"
13 icon="times" 13 />
14 class="ml-auto text-muted pointer"
15 @click="$store.commit('application/showPdfTool', false)"
16 ></font-awesome-icon>
17 </h6>
18 <div class="p-3 text-left"> 14 <div class="p-3 text-left">
19 <select 15 <select
20 @change="applyTemplateToForm" 16 @change="applyTemplateToForm"
21 v-model="form.template" 17 v-model="form.template"
22 class="form-control d-block mb-2 w-100 font-weight-bold" 18 class="form-control d-block mb-2 w-100 font-weight-bold"
197 193
198 return filename; 194 return filename;
199 } 195 }
200 }, 196 },
201 methods: { 197 methods: {
198 close() {
199 this.$store.commit("application/showPdfTool", false);
200 },
202 // When a template is chosen from the dropdown, its propoerties are 201 // When a template is chosen from the dropdown, its propoerties are
203 // applied to the rest of the form. 202 // applied to the rest of the form.
204 applyTemplateToForm() { 203 applyTemplateToForm() {
205 if (this.form.template) { 204 if (this.form.template) {
206 HTTP.get("/templates/print/" + this.form.template.name, { 205 HTTP.get("/templates/print/" + this.form.template.name, {