From 97e8c86c04ac8a9406191cd1545160c2833f77af Mon Sep 17 00:00:00 2001
From: dcz <dcz@ipipan.waw.pl>
Date: Sat, 19 Aug 2023 10:10:49 +0200
Subject: [PATCH] Create unified frame spinner
---
entries/static/entries/css/entries.css | 32 +++++++++++++++++++
.../Unification/LexicalUnitEdit.vue | 5 ++-
.../unification/shared/LexicalUnitDisplay.vue | 24 +++++---------
3 files changed, 42 insertions(+), 19 deletions(-)
diff --git a/entries/static/entries/css/entries.css b/entries/static/entries/css/entries.css
index 3cd0c90..ea12caf 100644
--- a/entries/static/entries/css/entries.css
+++ b/entries/static/entries/css/entries.css
@@ -286,3 +286,35 @@ legend {
.table-primary>th {
background-color:#bfbfbf !important;
}
+
+#overlay{
+ position: fixed;
+ top: 0;
+ z-index: 100;
+ width: 100%;
+ height:100%;
+ display: none;
+ background: rgba(0,0,0,0.6);
+}
+.cv-spinner {
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.spinner {
+ width: 40px;
+ height: 40px;
+ border: 4px #ddd solid;
+ border-top: 4px #2e93e6 solid;
+ border-radius: 50%;
+ animation: sp-anime 0.8s infinite linear;
+}
+@keyframes sp-anime {
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+.is-hide{
+ display:none;
+}
diff --git a/frontend/src/components/unification/Unification/LexicalUnitEdit.vue b/frontend/src/components/unification/Unification/LexicalUnitEdit.vue
index 6062271..aafc7a2 100644
--- a/frontend/src/components/unification/Unification/LexicalUnitEdit.vue
+++ b/frontend/src/components/unification/Unification/LexicalUnitEdit.vue
@@ -1034,7 +1034,7 @@ export default LexicalUnitEdit;
</tr>
</tbody>
</table>
- </td><td style="vertical-align: text-top; padding-left: 10px; padding-top: 8px;">
+ </td><td style="vertical-align: text-top; padding-left: 10px; padding-top: 8px; min-width: 50px;">
<span class="cursor-pointer" @click.stop="hideSelectionalPreferencies()" title="Ukryj jednostki leksykalne">▴</span> /
<span class="cursor-pointer" @click.stop="showSelectionalPreferencies()" title="Pokaż jednostki leksykalne">▾</span>
</td></tr>
@@ -1066,7 +1066,7 @@ export default LexicalUnitEdit;
</tbody>
</table>
</td>
- <td style="vertical-align: text-top; padding-left: 10px; padding-top: 8px;">
+ <td style="vertical-align: text-top; padding-left: 10px; padding-top: 8px; min-width: 50px;">
<span class="cursor-pointer" @click.stop="hideLexicalUnits()" title="Ukryj jednostki leksykalne">▴</span> /
<span class="cursor-pointer" @click.stop="showLexicalUnits()" title="Pokaż jednostki leksykalne">▾</span></td>
</tr>
@@ -1080,7 +1080,6 @@ export default LexicalUnitEdit;
<td id="wrong-frame" style="padding: 10px 15px 10px 15px; color: #000000;" @click="change_slowal_frame_status('B')">Błędna</td>
<td id="hide-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;" @click="changeShowVerifiedFrames(false)">Ukryj gotowe {{showVerifiedFrames ? '' : getSlowalReadyFrameCnt() > 0 ? '(ukrytych: ' + getSlowalReadyFrameCnt() + ')' : ''}}</td>
<td id="ready-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;" @click="slowal_frame_ready_rollback">{{ statusButtonTitle }}</td>
- <td id="filter-slowal-frames" style="padding: 10px 15px 10px 15px; color: #000000;">Filtruj</td>
</tr>
<tr style="background-color: white;">
<td id="inccorect-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;" @click="change_slowal_frame_status('C')">
diff --git a/frontend/src/components/unification/shared/LexicalUnitDisplay.vue b/frontend/src/components/unification/shared/LexicalUnitDisplay.vue
index ebac745..190fbd2 100644
--- a/frontend/src/components/unification/shared/LexicalUnitDisplay.vue
+++ b/frontend/src/components/unification/shared/LexicalUnitDisplay.vue
@@ -56,6 +56,7 @@ export default {
} else {
const data = {'lu_id': this.lexicalUnitId, 'unified_frame_title': title,
'frame_id': this.frame.id};
+ $("#overlay").fadeIn(300);
$.ajax({
type : 'post',
url : `/${lang}/unifier/frame_assign/`,
@@ -63,10 +64,12 @@ export default {
data: data,
timeout : 60000,
success: function (response) {
+ $("#overlay").fadeOut(300);
show_info('Rama została stworzona oraz przypisana użytkownikowi.');
this.goToEdit(response.unified_frame_id, this.entryId, this.lexicalUnitId);
}.bind(this),
error: function (request, errorType, errorMessage) {
+ $("#overlay").fadeOut(300);
show_error(errorType + ' (' + errorMessage + ')');
}
});
@@ -190,11 +193,15 @@ export default {
</script>
<template>
+ <div id="overlay">
+ <div class="cv-spinner">
+ <span class="spinner"></span>
+ </div>
+ </div>
<div class="col p-0 h-100 overflow-hidden">
<div id="main-frames-pane" class="row">
<div class="col h-100 pl-3 pr-1 pt-0 pb-2 overflow-auto" id="semantics-frames-pane">
<spinner />
-<!-- <div id="semantics-frames"></div>-->
<div id="vue-semantics-frames" v-if="frame">
<div class="frame mb-3 active">
<div class="frame mt-0" id="lexical-unit">
@@ -260,24 +267,9 @@ export default {
:selectedExamples="selectedExamples"
@schemata-selected="schemataSelected"
/>
-<!-- <div id="semantics-schemata"></div>-->
</div>
</div>
<div id="vue-examples" class="row overflow-auto">
-<!-- <div class="col w-100 p-0 tab-pane overflow-auto" id="examples">-->
-<!-- <table id="semantics-examples" class="table table-sm table-hover">-->
-<!-- <thead>-->
-<!-- <tr>-->
-<!-- <th scope="col">{{ gettext("Przykład") }}<i id="examples-argument"></i><i id="examples-lu"></i><i id="examples-schema"></i></th>-->
-<!-- <th scope="col">{{ gettext("Źródło") }}</th>-->
-<!-- <th scope="col">{{ gettext("Opinia") }}</th>-->
-<!-- </tr>-->
-<!-- </thead>-->
-<!-- <tbody id="semantics-examples-list">-->
-<!-- </tbody>-->
-<!-- </table>-->
-<!-- <p class="mx-1 my-1" id="semantics-no-examples">{{ gettext("Brak przykładów") }}</p>-->
-<!-- </div>-->
<div class="col w-100 pr-4 overflow-auto">
<examples-component v-if="examples && frame"
:examples="examples"
--
GitLab