ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add animation when saving a submission 

The correct icon is missing, needs to be delivered yet.
This commit is contained in:
Ramon Wenger 2018-10-02 17:08:36 +02:00
parent 9226f44db6
commit c1154f5e3a
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/components/content-blocks/assignment/SubmissionForm.vue
View File

@ -6,9 +6,13 @@
:value="submission.text" :value="submission.text"
@input="$emit('input', $event.target.value)" @input="$emit('input', $event.target.value)"
></textarea> ></textarea>
<div class="submission-form__save-status"> <div class="submission-form__save-status submission-form__save-status--saved" v-if="saved">
<tick-circle-icon class="submission-form__save-status-icon"></tick-circle-icon> <tick-circle-icon class="submission-form__save-status-icon"></tick-circle-icon>
<span class="submission-form__save-status-text">Alle Änderungen gespeichert {{saved}}</span> <span class="submission-form__save-status-text">Alle Änderungen gespeichert</span>
</div>
<div class="submission-form__save-status submission-form__save-status--unsaved" v-if="!saved">
<tick-circle-icon class="submission-form__save-status-icon submission-form__saving-icon"></tick-circle-icon>
<span class="submission-form__save-status-text">Änderungen werden gespeichert</span>
</div> </div>
</div> </div>
</template> </template>
@ -68,5 +72,15 @@
font-size: toRem(14px); font-size: toRem(14px);
color: $color-grey; color: $color-grey;
} }
@keyframes spin {
100% {
transform: rotate(-360deg);
}
}
&__saving-icon {
animation: spin 2.5s linear infinite;
}
} }
</style> </style>