Skip to content

Commit 3d17a37

Browse files
rluckerlucke
committed
enhance ux and ui
1 parent f3eb2a8 commit 3d17a37

File tree

2 files changed

+277
-145
lines changed

2 files changed

+277
-145
lines changed

‎vueapp/components/Studip/StudipDialog.vue‎

Lines changed: 83 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -29,26 +29,29 @@
2929
:class="{ 'studip-dialog-warning': question, 'studip-dialog-alert': alert }"
3030
class="studip-dialog-body"
3131
role="dialog"
32-
:aria-modal="'true'"
32+
aria-modal="true"
3333
:aria-labelledby="dialogTitleId"
3434
:aria-describedby="dialogDescId"
3535
ref="dialog"
3636
>
3737
<header
3838
class="studip-dialog-header"
3939
>
40-
<span :id="dialogTitleId" class="studip-dialog-title" :title="dialogTitle">
40+
<span :id="dialogTitleId"
41+
class="studip-dialog-title"
42+
:title="dialogTitle"
43+
role="heading"
44+
aria-level="2">
4145
{{ dialogTitle }}
4246
</span>
4347
<slot name="dialogHeader"></slot>
44-
<span
48+
<button
4549
:aria-label="$gettext('Diesen Dialog schließen')"
46-
class="studip-dialog-close-button"
47-
:style="dialogCloseIcon"
4850
:title="$gettext('Schließen')"
51+
class="studip-dialog-close-button"
4952
@click="closeDialog"
5053
>
51-
</span>
54+
</button>
5255
</header>
5356
<section
5457
:id="dialogDescId"
@@ -61,28 +64,37 @@
6164
<div v-if="alert">{{ alert }}</div>
6265
</section>
6366
<footer class="studip-dialog-footer" ref="footer">
64-
<button :disabled="disabled"
65-
v-if="buttonA"
66-
:title="buttonA.text"
67-
:class="[buttonA.class]"
68-
class="button"
69-
type="button"
70-
@click="confirmDialog"
71-
>
72-
{{ buttonA.text }}
73-
</button>
74-
<slot name="dialogButtons"></slot>
75-
<button
76-
v-if="buttonB"
77-
:title="buttonB.text"
78-
:class="[buttonB.class]"
79-
class="button"
80-
type="button"
81-
ref="buttonB"
82-
@click="closeDialog"
83-
>
84-
{{ buttonB.text }}
85-
</button>
67+
<div class="studip-dialog-footer-buttonset-left">
68+
<slot name="dialogButtonsBefore"></slot>
69+
</div>
70+
<div class="studip-dialog-footer-buttonset-center">
71+
<button
72+
v-if="buttonA"
73+
:title="buttonA.text"
74+
:class="[buttonA.class]"
75+
:disabled="buttonA.disabled"
76+
class="button"
77+
type="button"
78+
@click="confirmDialog"
79+
>
80+
{{ buttonA.text }}
81+
</button>
82+
<slot name="dialogButtons"></slot>
83+
<button
84+
v-if="buttonB"
85+
:title="buttonB.text"
86+
:class="[buttonB.class]"
87+
class="button"
88+
type="button"
89+
ref="buttonB"
90+
@click="closeDialog"
91+
>
92+
{{ buttonB.text }}
93+
</button>
94+
</div>
95+
<div class="studip-dialog-footer-buttonset-right">
96+
<slot name="dialogButtonsAfter"></slot>
97+
</div>
8698
</footer>
8799
</div>
88100
</vue-resizeable>
@@ -105,17 +117,34 @@ export default {
105117
VueResizeable,
106118
},
107119
props: {
108-
height: {type: String, default: '300'},
109-
width: {type: String, default: '450'},
120+
height: {
121+
type: String,
122+
default: '300'
123+
},
124+
width: {
125+
type: String,
126+
default: '450'
127+
},
110128
title: String,
111129
confirmText: String,
112130
closeText: String,
131+
confirmShow: {
132+
type: Boolean,
133+
default: true
134+
},
135+
confirmDisabled: {
136+
type: Boolean,
137+
default: false
138+
},
113139
confirmClass: String,
114140
closeClass: String,
115141
question: String,
116142
alert: String,
117143
message: String,
118-
disabled: false
144+
defaultFocus: {
145+
type: Boolean,
146+
default: true
147+
}
119148
},
120149
data() {
121150
const dialogId = uuid++;
@@ -127,7 +156,7 @@ export default {
127156
128157
currentWidth: 450,
129158
currentHeight: 300,
130-
minW: 400,
159+
minW: 100,
131160
minH: 100,
132161
left: 0,
133162
top: 0,
@@ -148,10 +177,11 @@ export default {
148177
button.text = this.$gettext('Ja');
149178
button.class = 'accept';
150179
}
151-
if (this.confirmText) {
180+
if (this.confirmText && this.confirmShow) {
152181
button = {};
153182
button.text = this.confirmText;
154183
button.class = this.confirmClass;
184+
button.disabled = this.confirmDisabled
155185
}
156186
157187
return button;
@@ -190,6 +220,7 @@ export default {
190220
if (this.message) {
191221
return this.$gettext('Information');
192222
}
223+
return '';
193224
},
194225
dialogWidth() {
195226
return this.currentWidth ? (this.currentWidth - dialogPadding * 4) + 'px' : 'unset';
@@ -199,11 +230,6 @@ export default {
199230
},
200231
contentHeight() {
201232
return this.currentHeight ? this.currentHeight - this.footerHeight + 'px' : 'unset';
202-
},
203-
204-
dialogCloseIcon() {
205-
return `background-image: url('` +
206-
STUDIP.ASSETS_URL + `/images/icons/white/decline.svg')`
207233
}
208234
},
209235
methods: {
@@ -216,26 +242,40 @@ export default {
216242
initSize() {
217243
this.currentWidth = parseInt(this.width, 10);
218244
this.currentHeight = parseInt(this.height, 10);
219-
if (window.outerWidth > this.currentWidth) {
220-
this.left = (window.outerWidth - this.currentWidth) / 2;
245+
if (window.innerWidth > this.currentWidth) {
246+
this.left = (window.innerWidth - this.currentWidth) / 2;
221247
} else {
222248
this.left = 5;
223-
this.currentWidth = window.outerWidth - 16;
249+
this.currentWidth = window.innerWidth - 16;
224250
}
225251
226-
this.top = (window.outerHeight - this.currentHeight) / 2;
252+
this.top = (window.innerHeight - this.currentHeight) / 2;
227253
this.footerHeight = this.$refs.footer.offsetHeight;
228254
},
229255
resizeHandler(data) {
230256
this.currentWidth = data.width;
231257
this.currentHeight = data.height;
232258
this.left = data.left;
233259
this.top = data.top;
260+
this.handleResizeBlur();
261+
},
262+
handleResizeBlur() {
263+
let el = this.$refs.resizableComponent.$el.querySelector(':focus');
264+
if (el) {
265+
el.blur();
266+
}
234267
},
235-
236268
checkEmpty(value) {
237269
return typeof value !== "number" ? 0 : value;
238270
}
271+
},
272+
mounted() {
273+
if (this.defaultFocus) {
274+
this.$nextTick()
275+
.then(() => {
276+
this.$refs.buttonB.focus();
277+
});
278+
}
239279
}
240280
};
241281
</script>

0 commit comments

Comments
 (0)