diff --git a/src/webapp/src/components/seatplan/editor/window.vue b/src/webapp/src/components/seatplan/editor/window.vue index d79d182..77ac319 100644 --- a/src/webapp/src/components/seatplan/editor/window.vue +++ b/src/webapp/src/components/seatplan/editor/window.vue @@ -36,7 +36,10 @@ - +
+ +
Saved!
+
@@ -74,6 +77,7 @@ zoomFactor: 1, historyPos: 0, generalSettings: { 'namingScheme': 'numeric' }, + saved: false, } }, methods: { @@ -255,6 +259,10 @@ }, save () { sessionStorage.setItem( 'seatplan', JSON.stringify( this.scaleDown( this.draggables ) ) ); + this.saved = true; + setTimeout( () => { + this.saved = false; + }, 5000 ) }, addNewElement () { this.draggables[ Object.keys( this.draggables ).length + 1 ] = { 'x': 100, 'y':100, 'h': 100, 'w': 250, 'active': false, 'draggable': true, 'resizable': true, 'id': Object.keys( this.draggables ).length + 1, 'origin': 1, 'shape':'rectangular', 'type': 'seat', 'startingRow': 1, 'seatCountingStartingPoint': 0 }; @@ -362,4 +370,34 @@ .toolbar button:disabled { cursor: default; } + + .save-wrapper { + position: relative; + } + + .saved { + transition: all 0.5s; + position: absolute; + top: 20%; + left: 150%; + width: 7vw; + height: 3vh; + display: flex; + justify-content: center; + align-items: center; + background-color: var( --accent-background ); + color: white; + border-radius: 5px; + } + + .saved::before { + content: " "; + position: absolute; + bottom: 13%; + left: -10%; + margin-left: -5px; + border-width: 10px; + border-style: solid; + border-color: transparent var( --accent-background ) transparent transparent; + }