@saooti/octopus-sdk 33.1.3 → 33.2.0

package/src/components/misc/modal/ClassicModal.vue

@@ -0,0 +1,141 @@
+<template>
+  <div
+    :id="idModal"
+    class="octopus-modal"
+  >
+    <div class="octopus-modal-backdrop" />
+    <div class="octopus-modal-dialog">
+      <div class="octopus-modal-content">
+        <div class="octopus-modal-header">
+          <h5 cclass="octopus-modal-title">
+            {{ titleModal }}
+          </h5>
+          <button
+            v-if="closable"
+            :ref="closable?'focusElement':''"
+            type="button"
+            class="btn-transparent text-light saooti-remove"
+            title="Close"
+            @click="$emit('close')"
+          />
+        </div>
+        <div class="octopus-modal-body">
+          <slot name="body" />
+        </div>
+        <div
+          class="octopus-modal-footer"
+        >
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'ClassicModal',
+  props: {
+    idModal: { default: undefined, type: String},
+    titleModal: { default: undefined, type: String},
+    closable: { default: true, type: Boolean},
+  },
+  emits: ['close'],
+  mounted(){
+    (this.$refs.focusElement as HTMLElement)?.focus();
+  },
+})
+</script>
+<style lang="scss">
+@import '@scss/_variables.scss';
+.octopus-app{
+	.octopus-modal{
+		position: fixed;
+		top: 0;
+		left: 0;
+		display: block;
+		z-index: 1055;
+		width: 100%;
+		height: 100%;
+		overflow-x: hidden;
+		overflow-y: auto;
+		outline: 0;
+	}
+	.octopus-modal-backdrop {
+		opacity: 0.5;
+		z-index: 0;
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		background-color: black;
+	}
+
+	.octopus-modal-dialog {
+		position: relative;
+		pointer-events: none;
+		margin: 1.75rem auto;
+		max-height: 75vh;
+		max-width: 640px;
+		width: 100%;
+		display: flex;
+		color: #353535 !important;
+		@media (max-width: 500px){
+			width: 95%;
+			margin: 2.5% !important;
+		}
+	}
+	.octopus-modal-body{
+		position: relative;
+		flex: 1 1 auto;
+		padding: 1rem;
+	}
+	.octopus-modal-header { 
+		display: flex;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: space-between;
+		border: 0;
+		border-radius: 0.8rem 0.8rem 0 0;
+		background: $octopus-primary-color;
+		color: white;
+		padding: 1rem;
+    }
+	.octopus-modal-body{
+		overflow-x: auto;
+		.scroller-vertical {
+			min-height: 200px;
+			height: 200px;
+		}
+	}
+	.octopus-modal-dialog, .octopus-modal-content {
+		min-height: 300px;
+	}
+	.octopus-modal-content{
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		pointer-events: auto;
+		width: 100%;
+		background-color: white;
+		background-clip: padding-box;
+		border: 0;
+		outline: 0;
+		height: auto !important;
+		max-height: calc(100vh - 250px) !important;
+		border-radius: 0.8rem;
+		box-shadow: 0 0.2rem 0.5rem rgba(40,40,40,.3);
+	}
+	.octopus-modal-footer{
+		display: flex;
+		flex-shrink: 0;
+		border: 0;
+		flex-wrap: initial;
+		align-items: center;
+		justify-content: flex-end;
+		padding: 1rem;
+	}
+}
+</style>

package/src/components/misc/modal/ClipboardModal.vue

@@ -1,43 +1,31 @@
 <template>
-  <div class="modal">
-    <div class="modal-backdrop" />
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <div class="modal-title h5">
-            {{ $t('RSS Link') }}
-          </div>
-          <button
-            ref="focusElement"
-            type="button"
-            class="btn-close btn-close-white"
-            title="Close"
-            @click="closePopup"
-          />
-        </div>
-        <div class="modal-body">
-          <p class="d-flex justify-content-between align-items-center">
-            {{ $t('Rss feed:') }}
-            <span id="LINK">{{ link }}</span>
-            <input
-              type="button"
-              :value="$t('Copy')"
-              class="btn btn-primary"
-              :title="$t('Copy')"
-              @click="onCopyCode(link, afterCopy)"
-            >
-          </p>
-          <RssSection
-            v-if="emission && authenticated"
-            :emission="emission"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
+  <ClassicModal
+    id-modal="clipboard-modal"
+    :title-modal="$t('RSS Link')"
+    @close="closePopup"
+  >
+    <template #body>
+      <p class="d-flex justify-content-between align-items-center">
+        {{ $t('Rss feed:') }}
+        <span id="LINK">{{ link }}</span>
+        <input
+          type="button"
+          :value="$t('Copy')"
+          class="btn btn-primary"
+          :title="$t('Copy')"
+          @click="onCopyCode(link, afterCopy)"
+        >
+      </p>
+      <RssSection
+        v-if="emission && authenticated"
+        :emission="emission"
+      />
+    </template>
+  </ClassicModal>
 </template>
 
 <script lang="ts">
+import ClassicModal from '../modal/ClassicModal.vue';
 import { Emission } from '@/store/class/general/emission';
 import displayMethods from '../../mixins/displayMethods';
 import { defineComponent, defineAsyncComponent } from 'vue';
@@ -47,6 +35,7 @@ export default defineComponent({
   name: 'ClipboardModal',
   components: {
     RssSection,
+    ClassicModal
   },
   mixins: [displayMethods],
 
@@ -60,10 +49,6 @@ export default defineComponent({
       return state.generalParameters.authenticated??false;
     },
   },
-  mounted(){
-    (this.$refs.focusElement as HTMLElement)?.focus();
-  },
-
   methods: {
     closePopup(): void {
       this.$emit('close');

package/src/components/misc/modal/MessageModal.vue

@@ -1,68 +1,56 @@
 <template>
-  <div
-    id="message-modal"
-    class="modal"
+  <ClassicModal
+    id-modal="message-modal"
+    :title-modal="title"
+    :closable="closable"
+    @close="closePopup"
   >
-    <div class="modal-backdrop" />
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">
-            {{ title }}
-          </h5>
-          <button
-            v-if="closable"
-            :ref="closable?'focusElement':''"
-            type="button"
-            class="btn-close btn-close-white"
-            title="Close"
-            @click="closePopup"
-          />
-        </div>
-        <div class="modal-body">
-          <!-- eslint-disable vue/no-v-html -->
-          <div
-            class="content"
-            v-html="message"
-          />
-          <!-- eslint-enable -->
-        </div>
-        <div
-          v-if="validatetext"
-          class="modal-footer"
-        >
-          <button
-            v-if="canceltext"
-            :ref="!closable && canceltext?'focusElement':''"
-            class="btn m-1"
-            @click="onCancel"
-          >
-            {{ canceltext }}
-          </button>
-          <button
-            v-if="thirdText"
-            class="btn btn-primary m-1"
-            @click="onThirdAction"
-          >
-            {{ thirdText }}
-          </button>
-          <button
-            :ref="!closable && !canceltext?'focusElement':''"
-            class="btn btn-primary m-1"
-            @click="onValid"
-          >
-            {{ validatetext }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
+    <template #body>
+      <!-- eslint-disable vue/no-v-html -->
+      <div
+        class="content"
+        v-html="message"
+      />
+      <!-- eslint-enable -->
+    </template>
+    <template
+      v-if="validatetext"
+      #footer
+    >
+      <button
+        v-if="canceltext"
+        :ref="!closable && canceltext?'focusElement':''"
+        class="btn m-1"
+        @click="onCancel"
+      >
+        {{ canceltext }}
+      </button>
+      <button
+        v-if="thirdText"
+        class="btn btn-primary m-1"
+        @click="onThirdAction"
+      >
+        {{ thirdText }}
+      </button>
+      <button
+        :ref="!closable && !canceltext?'focusElement':''"
+        class="btn btn-primary m-1"
+        @click="onValid"
+      >
+        {{ validatetext }}
+      </button>
+    </template>
+  </ClassicModal>
 </template>
 
 <script lang="ts">
+import ClassicModal from '../modal/ClassicModal.vue';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'MessageModal',
+  components: {
+    ClassicModal
+  },
   props: {
     title: { default: undefined, type: String},
     active: { default: false, type: Boolean},
@@ -73,9 +61,6 @@ export default defineComponent({
     thirdText: { default: undefined, type: String},
   },
   emits: ['close', 'validate', 'cancel', 'thirdEvent'],
-  mounted(){
-    (this.$refs.focusElement as HTMLElement)?.focus();
-  },
   methods: {
     closePopup(): void {
       this.$emit('close');

package/src/components/misc/modal/NewsletterModal.vue

@@ -1,103 +1,94 @@
 <template>
-  <div>
-    <div
-      id="newsletter-modal"
-      class="modal"
-    >
-      <div class="modal-backdrop" />
-      <div class="modal-dialog">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">
-              {{ $t('Share newsletter') }}
-            </h5>
+  <ClassicModal
+    id-modal="newsletter-modal"
+    :title-modal="$t('Share newsletter')"
+    :closable="false"
+    @close="closePopup"
+  >
+    <template #body>
+      <div class="d-flex justify-content-between">
+        <!-- eslint-disable vue/no-v-html -->
+        <div v-html="newsletterHtml" />
+        <!-- eslint-enable -->
+        <div class="d-flex flex-column flex-grow-1 ms-4">
+          <h4 class="mb-3">
+            {{ $t('Configuration') }}
+          </h4>
+          <label for="share-url-newsletter">{{ $t('Share') }}</label>
+          <input
+            id="share-url-newsletter"
+            v-model="shareUrl"
+            class="form-input mb-2"
+            type="text"
+            :class="{ 'border border-danger': 0 === shareUrl }"
+          >
+          <template v-if="podcast">
+            <ClassicCheckbox
+              v-model:textInit="displayEmissionName"
+              id-checkbox="display-emission-name"
+              :label="$t('Display emission name')"
+            />
+            <ClassicCheckbox
+              v-model:textInit="displayParticipantsNames"
+              id-checkbox="display-participants-names"
+              :label="$t('Display participants list')"
+            />
+          </template>
+          <div class="d-flex align-items-center mt-2">
+            <VSwatches
+              v-model="color"
+              class="c-hand  me-2 mt-2"
+              show-fallback
+              colors="text-advanced"
+              popover-to="right"
+              :data-color="color"
+            />
+            <div>{{ $t('Choose main color') }}</div>
           </div>
-          <div class="modal-body">
-            <div class="d-flex justify-content-between">
-              <!-- eslint-disable vue/no-v-html -->
-              <div v-html="newsletterHtml" />
-              <!-- eslint-enable -->
-              <div class="d-flex flex-column flex-grow-1 ms-4">
-                <h4 class="mb-3">
-                  {{ $t('Configuration') }}
-                </h4>
-                <label for="share-url-newsletter">{{ $t('Share') }}</label>
-                <input
-                  id="share-url-newsletter"
-                  v-model="shareUrl"
-                  class="form-input mb-2"
-                  type="text"
-                  :class="{ 'border border-danger': 0 === shareUrl }"
-                >
-                <template v-if="podcast">
-                  <ClassicCheckbox
-                    v-model:textInit="displayEmissionName"
-                    id-checkbox="display-emission-name"
-                    :label="$t('Display emission name')"
-                  />
-                  <ClassicCheckbox
-                    v-model:textInit="displayParticipantsNames"
-                    id-checkbox="display-participants-names"
-                    :label="$t('Display participants list')"
-                  />
-                </template>
-                <div class="d-flex align-items-center mt-2">
-                  <VSwatches
-                    v-model="color"
-                    class="c-hand  me-2 mt-2"
-                    show-fallback
-                    colors="text-advanced"
-                    popover-to="right"
-                    :data-color="color"
-                  />
-                  <div>{{ $t('Choose main color') }}</div>
-                </div>
-                <div
-                  class=" d-flex justify-content-between align-items-center mt-3 mb-2"
-                >
-                  <h4 class="mb-0">
-                    {{ $t('HTML Code') }}
-                  </h4>
-                  <input
-                    type="button"
-                    :value="$t('Copy')"
-                    class="btn btn-primary"
-                    :title="$t('Copy')"
-                    @click="onCopyCode(newsletterHtml, afterCopy)"
-                  >
-                </div>
-                <textarea
-                  id="newsletter_code_textarea"
-                  v-model="newsletterHtml"
-                  readonly
-                  @click="selectAll"
-                />
-                <label
-                  for="newsletter_code_textarea"
-                  :title="$t('HTML Code')"
-                />
-              </div>
-            </div>
-          </div>
-          <div class="modal-footer">
-            <button
-              class="btn btn-primary m-1"
-              @click="closePopup"
+          <div
+            class=" d-flex justify-content-between align-items-center mt-3 mb-2"
+          >
+            <h4 class="mb-0">
+              {{ $t('HTML Code') }}
+            </h4>
+            <input
+              type="button"
+              :value="$t('Copy')"
+              class="btn btn-primary"
+              :title="$t('Copy')"
+              @click="onCopyCode(newsletterHtml, afterCopy)"
             >
-              {{ $t('Close') }}
-            </button>
           </div>
+          <textarea
+            id="newsletter_code_textarea"
+            v-model="newsletterHtml"
+            readonly
+            @click="selectAll"
+          />
+          <label
+            for="newsletter_code_textarea"
+            :title="$t('HTML Code')"
+          />
         </div>
       </div>
-    </div>
-    <Snackbar
-      ref="snackbar"
-      position="bottom-left"
-    />
-  </div>
+    </template>
+    <template #footer>
+      <button
+        class="btn btn-primary m-1"
+        @click="closePopup"
+      >
+        {{ $t('Close') }}
+      </button>
+    </template>
+  </ClassicModal>
+  <Snackbar
+    ref="snackbar"
+    position="bottom-left"
+  />
 </template>
 
 <script lang="ts">
+import ClassicModal from '../modal/ClassicModal.vue';
 import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
 import Snackbar from '../../misc/Snackbar.vue';
 import moment from 'moment';
@@ -119,7 +110,8 @@ export default defineComponent({
   components: {
     Snackbar,
     VSwatches,
-    ClassicCheckbox
+    ClassicCheckbox,
+    ClassicModal
   },
 
   mixins: [displayMethods],

package/src/components/misc/modal/QrCodeModal.vue

@@ -1,54 +1,37 @@
 <template>
-  <div
-    id="qrcode-modal"
-    class="modal"
+  <ClassicModal
+    id-modal="qrcode-modal"
+    :title-modal="$t('Share QR Code')"
+    @close="closePopup"
   >
-    <div class="modal-backdrop" />
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">
-            {{ $t('Share QR Code') }}
-          </h5>
-          <button
-            ref="focusElement"
-            type="button"
-            class="btn-close btn-close-white"
-            title="Close"
-            @click="closePopup"
-          />
-        </div>
-        <div class="modal-body">
-          <QrCode :url="urlPage" />
-        </div>
-        <div class="modal-footer">
-          <button
-            class="btn btn-primary m-1"
-            @click="closePopup"
-          >
-            {{ $t('Close') }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
+    <template #body>
+      <QrCode :url="urlPage" />
+    </template>
+    <template #footer>
+      <button
+        class="btn btn-primary m-1"
+        @click="closePopup"
+      >
+        {{ $t('Close') }}
+      </button>
+    </template>
+  </ClassicModal>
 </template>
 
 <script lang="ts">
+import ClassicModal from '../modal/ClassicModal.vue';
 import QrCode from '../../display/sharing/QrCode.vue';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'QrCodeModal',
   components: {
-    QrCode
+    QrCode,
+    ClassicModal
   },
   props: {
     urlPage: { default: undefined, type: String},
   },
   emits: ['close'],
-  mounted(){
-    (this.$refs.focusElement as HTMLElement)?.focus();
-  },
   methods:{
     closePopup(): void {
       this.$emit('close');