deblan/forms
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge pull request #309 from nextcloud/design/further-fixes

Browse source
This commit is contained in:
John Molakvoæ 2020-04-29 08:52:37 +02:00 committed by GitHub
parent 22c03f7e98 ee65ef7d2d
commit f4ffbe92f2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 37 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/AppNavigationForm.vue
View file

@ -58,7 +58,7 @@
<script>
import { generateUrl } from '@nextcloud/router'
import { showError, showSuccess } from '@nextcloud/dialogs'
import { showError } from '@nextcloud/dialogs'
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
import ActionRouter from '@nextcloud/vue/dist/Components/ActionRouter'
@ -146,7 +146,6 @@ export default {
try {
await axios.delete(generateUrl('/apps/forms/api/v1/form/{id}', { id: this.form.id }))
this.$emit('delete', this.form.id)
showSuccess(t('forms', 'Deleted form “{title}”', { title: this.form.title }))
} catch (error) {
showError(t('forms', 'Error while deleting form “{title}”', { title: this.form.title }))
console.error(error.response)

6
src/components/Questions/Question.vue
View file

@ -36,7 +36,7 @@
<div class="question__header">
<input v-if="edit"
:placeholder="t('forms', 'Enter a title for this question')"
:aria-label="t('forms', 'The title of the question number {index}', {index})"
:aria-label="t('forms', 'Title of question number {index}', {index})"
:value="text"
class="question__header-title"
type="text"
@ -162,7 +162,7 @@ export default {
align-items: stretch;
flex-direction: column;
justify-content: stretch;
margin-bottom: 22px;
margin: 80px 0;
padding-left: 44px;
user-select: none;
background-color: var(--color-main-background);
@ -194,7 +194,6 @@ export default {
&__content {
flex: 1 1 100%;
max-width: 100%;
margin-bottom: 20px;
padding: 0;
}
@ -204,7 +203,6 @@ export default {
flex: 1 1 100%;
justify-content: space-between;
width: auto;
margin-top: 20px;
// Using type to have a higher order than the input styling of server
&-title,

2
src/components/Questions/QuestionLong.vue
View file

@ -31,7 +31,7 @@
<!-- TODO: properly choose max length -->
<textarea ref="textarea"
:aria-label="t('forms', 'A long answer for the question “{text}”', { text })"
:placeholder="t('forms', 'Long answer text')"
:placeholder="t('forms', 'People can enter a long answer')"
:required="true /* TODO: implement required option */"
:value="values[0]"
class="question__text"

2
src/components/Questions/QuestionMultiple.vue
View file

@ -284,6 +284,8 @@ export default {
.question__label {
flex: 1 1 100%;
// Overwrite guest page core styles
text-align: left !important;
&::before {
margin: 14px !important;
}

2
src/components/Questions/QuestionShort.vue
View file

@ -31,7 +31,7 @@
<!-- TODO: properly choose max length -->
<input ref="input"
:aria-label="t('forms', 'A short answer for the question “{text}”', { text })"
:placeholder="t('forms', 'Short answer text')"
:placeholder="t('forms', 'People can enter a short answer')"
:required="true /* TODO: implement required option */"
:value="values[0]"
class="question__input"

18
src/views/Create.vue
View file

@ -49,12 +49,12 @@
<!-- Forms title & description-->
<header>
<label class="hidden-visually" for="form-title">{{ t('forms', 'Title') }}</label>
<label class="hidden-visually" for="form-title">{{ t('forms', 'Form title') }}</label>
<input
id="form-title"
v-model="form.title"
:minlength="0"
:placeholder="t('forms', 'Title')"
:placeholder="t('forms', 'Form title')"
:required="true"
autofocus
type="text"
@ -338,11 +338,11 @@ export default {
},
/**
* Select the text in the input if it is still set to 'New form'
* Select the text in the input if it is still set to 'Form title'
* @param {Event} e the click event
*/
selectIfUnchanged(e) {
if (e.target && e.target.value === t('forms', 'New form')) {
if (e.target && e.target.value === t('forms', 'Form title')) {
e.target.select()
}
},
@ -384,22 +384,20 @@ export default {
#form-title,
#form-desc {
width: 100%;
margin: 16px 0; // aerate the header
padding: 0 16px;
border: none;
}
#form-title {
font-size: 2em;
font-weight: bold;
margin: 32px 0;
padding-left: 14px; // align with description (compensate font size diff)
overflow-x: hidden;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#form-desc {
min-height: 60px;
max-height: 200px;
margin-top: 0;
resize: none;
}
}
@ -429,9 +427,9 @@ export default {
align-items: center;
align-self: flex-start;
width: 44px;
// To not overlap navigation toggle
margin-left: 44px;
height: var(--top-bar-height);
// make sure this doesn't take any space and appear floating
margin-top: -44px;
.icon-add-white {
opacity: 1;

29
src/views/Submit.vue
View file

@ -25,9 +25,9 @@
<AppContent>
<!-- Forms title & description-->
<header>
<h3 id="form-title">
<h2 id="form-title">
{{ form.title }}
</h3>
</h2>
<p v-if="!loading && !success" id="form-desc">
{{ form.description }}
</p>
@ -59,7 +59,7 @@
</EmptyContent>
<EmptyContent v-else-if="success" icon="icon-checkmark">
{{ t('forms', 'Thank you for completing the survey!') }}
{{ t('forms', 'Thank you for completing the form!') }}
</EmptyContent>
</AppContent>
</Content>
@ -153,6 +153,11 @@ export default {
align-items: center;
flex-direction: column;
// Force hide navigation toggle as there is no navigation
::v-deep #app-navigation-toggle {
display: none !important;
}
header,
form {
width: 100%;
@ -163,18 +168,18 @@ export default {
// Title & description header
header {
margin: 44px;
margin-top: 44px;
#form-title,
#form-desc {
width: 100%;
margin: 16px 0; // aerate the header
padding: 0 16px;
border: none;
}
#form-title {
font-size: 2em;
font-weight: bold;
margin: 32px 0;
padding-left: 14px; // align with description (compensate font size diff)
overflow: hidden;
text-overflow: ellipsis;
@ -182,16 +187,26 @@ export default {
}
#form-desc {
min-height: 60px;
max-height: 200px;
margin-top: 0;
resize: none;
}
}
form {
.question {
// Less padding needed as submit view does not have drag handles
padding-left: 16px;
::v-deep &__content {
// Left-align multiple choice and checkboxes with question text
// Only in submit view
// TODO: use variables
margin-left: -14px;
}
}
input[type=submit] {
align-self: flex-end;
margin: 5px;
margin-bottom: 160px;
padding: 10px 20px;
}
}