Registration and activation

frontend/src/components/AppNavigation.vue

@@ -43,12 +43,13 @@ export default {
 <style lang="scss" scoped>
 @import '../assets/styles.scss';
 
-nav {
+nav > ul{
   display: flex;
   justify-content: space-between;
   background-color: #343a40;
   color: white;
   padding: 10px;
+  flex-direction: row;
 }
 ul {
   list-style-type: none;

frontend/src/components/DialogWidget.vue

@@ -1,9 +1,10 @@
 <template>
   <div v-if="visible" :class="['dialog-overlay', { 'non-modal': !modal }]" @click.self="handleOverlayClick">
-    <div class="dialog" :class="{ minimized: minimized }" :style="{ width: dialogWidth, height: dialogHeight }" v-if="!minimized">
+    <div class="dialog" :class="{ minimized: minimized }" :style="{ width: dialogWidth, height: dialogHeight }"
+      v-if="!minimized">
       <div class="dialog-header">
         <span v-if="icon" class="dialog-icon">
-          <img :src="'/images/icons/' + icon" alt="Icon" />
+          <img :src="icon" alt="Icon" />
         </span>
         <span class="dialog-title">{{ isTitleTranslated ? $t(title) : title }}</span>
         <span v-if="!modal" class="dialog-minimize" @click="minimize">_</span>
@@ -13,9 +14,8 @@
         <slot></slot>
       </div>
       <div class="dialog-footer">
-        <button v-for="button in buttons" :key="button.text" @click="buttonClick(button.text)"
-                class="dialog-button">
-          {{ button.text }}
+        <button v-for="button in buttons" :key="button.text" @click="buttonClick(button.action)" class="dialog-button">
+          {{ isTitleTranslated ? $t(button.text) : button.text }}
         </button>
       </div>
     </div>
@@ -40,7 +40,7 @@ export default {
     },
     buttons: {
       type: Array,
-      default: () => [{ text: 'Ok' }]
+      default: () => [{ text: 'Ok', action: 'close' }]
     },
     modal: {
       type: Boolean,
@@ -87,7 +87,7 @@ export default {
   methods: {
     open() {
       this.visible = true;
-      if (!this.modal) {
+      if (this.modal === false) {
         this.$store.dispatch('dialogs/addOpenDialog', {
           status: 'open',
           dialog: this
@@ -98,9 +98,11 @@ export default {
       this.visible = false;
       this.$store.dispatch('dialogs/removeOpenDialog', this.name);
     },
-    buttonClick(buttonText) {
-      this.$emit(buttonText.toLowerCase());
-      this.close();
+    buttonClick(action) {
+      this.$emit(action);
+      if (action === 'close') {
+        this.close(); // Close dialog after button click if action is close
+      }
     },
     handleOverlayClick() {
       if (!this.modal) {
@@ -186,7 +188,7 @@ export default {
 
 .dialog-body {
   flex-grow: 1;
-  padding: 10px;
+  padding: 20px;
   overflow-y: auto;
 }
 
@@ -197,4 +199,18 @@ export default {
   border-top: 1px solid #ddd;
 }
 
+.dialog-button {
+  margin-left: 10px;
+  padding: 10px 20px;
+  cursor: pointer;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  transition: background 0.3s;
+}
+
+.dialog-button:hover {
+  background: #0056b3;
+}
 </style>