@saooti/octopus-sdk 29.0.1 → 29.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/README.md +1 -0
  2. package/package.json +5 -1
  3. package/src/assets/bootstrap-diff.scss +4 -0
  4. package/src/assets/form.scss +19 -0
  5. package/src/assets/modal.scss +9 -10
  6. package/src/components/display/categories/CategoryList.vue +20 -19
  7. package/src/components/display/comments/AddCommentModal.vue +67 -67
  8. package/src/components/display/comments/CommentItem.vue +10 -7
  9. package/src/components/display/emission/EmissionInlineList.vue +4 -2
  10. package/src/components/display/filter/AdvancedSearch.vue +40 -27
  11. package/src/components/display/podcasts/ParticipantDescription.vue +20 -6
  12. package/src/components/display/rubriques/RubriqueList.vue +20 -19
  13. package/src/components/display/sharing/PlayerParameters.vue +8 -4
  14. package/src/components/display/sharing/ShareButtons.vue +11 -11
  15. package/src/components/misc/HomeDropdown.vue +116 -87
  16. package/src/components/misc/modal/MessageModal.vue +51 -50
  17. package/src/components/misc/modal/NewsletterModal.vue +88 -82
  18. package/src/components/misc/modal/QrCodeModal.vue +25 -21
  19. package/src/components/misc/modal/ShareModalPlayer.vue +91 -51
  20. package/src/components/pages/Participant.vue +2 -1
  21. package/src/main.ts +8 -3
package/src/components/misc/HomeDropdown.vue CHANGED
@@ -2,93 +2,126 @@
2
2
  <div
3
3
  class="d-flex align-items-center justify-content-end flex-no-wrap top-bar-dropdown"
4
4
  >
5
- <b-dropdown
5
+ <div
6
6
  v-if="authenticated"
7
- class="split-dropdown"
8
- split
9
- right
10
- split-variant="primary main-button-dropdown"
11
- variant="primary data-selenium-dropdown-topbar"
12
- :text="$t('My space')"
13
- @click="goToUrl('/main/priv/backoffice')"
7
+ class="dropdown split-dropdown btn-group"
14
8
  >
15
- <b-dropdown-text>
16
- <router-link
17
- v-if="isContribution && !isPodcastmaker"
18
- to="/main/priv/upload"
19
- class="align-self-center w-100 mb-2"
20
- >
21
- <button class="btn btn-primary w-100">
22
- {{ $t('Upload') }}
23
- </button>
24
- </router-link>
25
- <div @click="displayMenuPhone(true)">
26
- <b-dropdown-item
27
- v-if="!isPodcastmaker"
28
- to="/main/priv/backoffice"
29
- class="linkSpace"
30
- >
31
- {{ $t('My space') }}
32
- </b-dropdown-item>
33
- <b-dropdown-item
34
- v-if="!isPodcastmaker"
35
- to="/main/priv/edit/profile"
36
- >
37
- {{ $t('Edit my profile') }}
38
- </b-dropdown-item>
39
- <b-dropdown-item
40
- v-if="!isPodcastmaker && isOrganisation"
41
- to="/main/priv/edit/organisation"
42
- >
43
- {{ $t('Edit my organisation') }}
44
- </b-dropdown-item>
45
- <b-dropdown-divider v-if="!isEducation" />
46
- <b-dropdown-item
47
- v-if="!isEducation"
48
- href="https://help.octopus.saooti.com/Aide/"
49
- rel="noopener"
50
- target="_blank"
51
- >
52
- {{ $t('Help') }}
53
- </b-dropdown-item>
54
- <b-dropdown-item
55
- v-if="!isEducation"
56
- href="https://help.octopus.saooti.com/"
57
- rel="noopener"
58
- target="_blank"
9
+ <button
10
+ class="btn btn-primary main-button-dropdown"
11
+ @click="goToUrl('/main/priv/backoffice')"
12
+ >
13
+ {{ $t('My space') }}
14
+ </button>
15
+ <button
16
+ class="btn dropdown-toggle btn-primary data-selenium-dropdown-topbar dropdown-toggle-split"
17
+ data-bs-toggle="dropdown"
18
+ aria-expanded="false"
19
+ />
20
+ <ul class="dropdown-menu dropdown-menu-right px-4">
21
+ <li>
22
+ <router-link
23
+ v-if="isContribution && !isPodcastmaker"
24
+ to="/main/priv/upload"
25
+ class="align-self-center w-100"
59
26
  >
60
- {{ $t('TutoMag') }}
61
- </b-dropdown-item>
62
- <b-dropdown-divider />
63
- <b-dropdown-item href="/sso/logout">
64
- {{
65
- $t('Logout')
66
- }}
67
- </b-dropdown-item>
27
+ <button class="btn btn-primary w-100 mb-2">
28
+ {{ $t('Upload') }}
29
+ </button>
30
+ </router-link>
31
+ </li>
32
+ <div @click="displayMenuPhone(true)">
33
+ <li v-if="!isPodcastmaker">
34
+ <router-link
35
+ to="/main/priv/backoffice"
36
+ class="linkSpace dropdown-item"
37
+ >
38
+ {{ $t('My space') }}
39
+ </router-link>
40
+ </li>
41
+ <li v-if="!isPodcastmaker">
42
+ <router-link
43
+ class="dropdown-item"
44
+ to="/main/priv/edit/profile"
45
+ >
46
+ {{ $t('Edit my profile') }}
47
+ </router-link>
48
+ </li>
49
+ <li v-if="!isPodcastmaker && isOrganisation">
50
+ <router-link
51
+ class="dropdown-item"
52
+ to="/main/priv/edit/organisation"
53
+ >
54
+ {{ $t('Edit my organisation') }}
55
+ </router-link>
56
+ </li>
57
+ <li v-if="!isEducation">
58
+ <hr class="dropdown-divider">
59
+ </li>
60
+ <li v-if="!isEducation">
61
+ <a
62
+ href="https://help.octopus.saooti.com/Aide/"
63
+ class="dropdown-item"
64
+ rel="noopener"
65
+ target="_blank"
66
+ >
67
+ {{ $t('Help') }}
68
+ </a>
69
+ </li>
70
+ <li v-if="!isEducation">
71
+ <a
72
+ href="https://help.octopus.saooti.com/"
73
+ class="dropdown-item"
74
+ rel="noopener"
75
+ target="_blank"
76
+ >
77
+ {{ $t('TutoMag') }}
78
+ </a>
79
+ </li>
80
+ <li><hr class="dropdown-divider"></li>
81
+ <li v-if="!isEducation">
82
+ <a
83
+ class="dropdown-item"
84
+ href="/sso/logout"
85
+ >
86
+ {{ $t('Logout') }}
87
+ </a>
88
+ </li>
68
89
  </div>
69
- </b-dropdown-text>
70
- </b-dropdown>
71
- <b-dropdown
90
+ </ul>
91
+ </div>
92
+ <div
72
93
  v-else
73
- right
74
- toggle-class="text-decoration-none m-1 admin-button btn-rounded-icon"
75
- no-caret
94
+ class="dropdown btn-group"
76
95
  >
77
- <template #button-content>
78
- <i class="saooti-user-octopus text-dark" /><span class="visually-hidden">Profile</span>
79
- </template>
80
- <b-dropdown-item href="/sso/login">
81
- {{ $t('Login') }}
82
- </b-dropdown-item>
83
- <b-dropdown-item
84
- v-if="!isPodcastmaker"
85
- to="/main/pub/create"
96
+ <button
97
+ class="btn dropdown-toggle btn-secondary text-decoration-none m-1 admin-button btn-rounded-icon dropdown-toggle-no-caret"
98
+ data-bs-toggle="dropdown"
99
+ aria-expanded="false"
86
100
  >
87
- {{
88
- $t('Create an account')
89
- }}
90
- </b-dropdown-item>
91
- </b-dropdown>
101
+ <i class="saooti-user-octopus text-dark" />
102
+ <span class="visually-hidden">Profile</span>
103
+ </button>
104
+ <ul class="dropdown-menu dropdown-menu-right px-4">
105
+ <li>
106
+ <a
107
+ class="dropdown-item"
108
+ href="/sso/login"
109
+ >
110
+ {{ $t('Login') }}
111
+ </a>
112
+ </li>
113
+ <li v-if="!isPodcastmaker">
114
+ <router-link
115
+ class="dropdown-item"
116
+ to="/main/pub/create"
117
+ >
118
+ {{
119
+ $t('Create an account')
120
+ }}
121
+ </router-link>
122
+ </li>
123
+ </ul>
124
+ </div>
92
125
  </div>
93
126
  </template>
94
127
 
@@ -103,7 +136,9 @@ export default defineComponent({
103
136
  },
104
137
 
105
138
  data() {
106
- return {};
139
+ return {
140
+ showMenu: false as boolean
141
+ };
107
142
  },
108
143
 
109
144
  computed: {
@@ -148,7 +183,6 @@ export default defineComponent({
148
183
  padding-left: 15px;
149
184
  margin-right: 30px;
150
185
  }
151
-
152
186
  .btn-group .dropdown-toggle-split {
153
187
  align-items: center;
154
188
  border-radius: 50% !important;
@@ -165,11 +199,6 @@ export default defineComponent({
165
199
  right: auto;
166
200
  }
167
201
  }
168
- .b-dropdown-text {
169
- display: flex;
170
- flex-direction: column;
171
- justify-content: center;
172
- }
173
202
  .dropdown-header {
174
203
  display: flex;
175
204
  align-items: center;
package/src/components/misc/modal/MessageModal.vue CHANGED
@@ -1,56 +1,57 @@
1
1
  <template>
2
- <b-modal
2
+ <div
3
3
  id="message-modal"
4
- :title="title"
5
- :show="true"
6
- @close="closePopup"
7
- @hide="closePopup"
8
- @cancel="closePopup"
4
+ class="modal"
9
5
  >
10
- <template
11
- v-if="!closable"
12
- #modal-header-close
13
- >
14
- <span />
15
- </template>
16
- <template #default>
17
- <div
18
- class="content"
19
- v-html="message"
20
- />
21
- </template>
22
- <template
23
- v-if="validatetext"
24
- #modal-footer
25
- >
26
- <button
27
- v-if="canceltext"
28
- class="btn btn-light m-1"
29
- @click="onCancel"
30
- >
31
- {{ canceltext }}
32
- </button>
33
- <button
34
- v-if="thirdText"
35
- class="btn btn-primary m-1"
36
- @click="onThirdAction"
37
- >
38
- {{ thirdText }}
39
- </button>
40
- <button
41
- class="btn btn-primary m-1"
42
- @click="onValid"
43
- >
44
- {{ validatetext }}
45
- </button>
46
- </template>
47
- <template
48
- v-else
49
- #modal-footer
50
- >
51
- <span />
52
- </template>
53
- </b-modal>
6
+ <div class="modal-backdrop" />
7
+ <div class="modal-dialog">
8
+ <div class="modal-content">
9
+ <div class="modal-header">
10
+ <h5 class="modal-title">
11
+ {{ title }}
12
+ </h5>
13
+ <button
14
+ v-if="closable"
15
+ type="button"
16
+ class="btn-close"
17
+ aria-label="Close"
18
+ @click="closePopup"
19
+ />
20
+ </div>
21
+ <div class="modal-body">
22
+ <div
23
+ class="content"
24
+ v-html="message"
25
+ />
26
+ </div>
27
+ <div
28
+ v-if="validatetext"
29
+ class="modal-footer"
30
+ >
31
+ <button
32
+ v-if="canceltext"
33
+ class="btn btn-light m-1"
34
+ @click="onCancel"
35
+ >
36
+ {{ canceltext }}
37
+ </button>
38
+ <button
39
+ v-if="thirdText"
40
+ class="btn btn-primary m-1"
41
+ @click="onThirdAction"
42
+ >
43
+ {{ thirdText }}
44
+ </button>
45
+ <button
46
+ class="btn btn-primary m-1"
47
+ @click="onValid"
48
+ >
49
+ {{ validatetext }}
50
+ </button>
51
+ </div>
52
+ </div>
53
+ </div>
54
+ </div>
54
55
  </template>
55
56
 
56
57
  <script lang="ts">
package/src/components/misc/modal/NewsletterModal.vue CHANGED
@@ -1,93 +1,99 @@
1
1
  <template>
2
2
  <div>
3
- <b-modal
3
+ <div
4
4
  id="newsletter-modal"
5
- :show="true"
6
- :title="$t('Share newsletter')"
7
- @close="closePopup"
8
- @hide="closePopup"
9
- @cancel="closePopup"
5
+ class="modal"
10
6
  >
11
- <template #default>
12
- <div class="d-flex justify-content-between">
13
- <div v-html="newsletterHtml" />
14
- <div class="d-flex flex-column flex-grow ms-4">
15
- <h4 class="mb-3">
16
- {{ $t('Configuration') }}
17
- </h4>
18
- <div>
19
- <input
20
- id="display-emission-name"
21
- v-model="displayEmissionName"
22
- type="checkbox"
23
- class="form-check-input"
24
- >
25
- <label
26
- class="form-check-label"
27
- for="display-emission-name"
28
- >{{
29
- $t('Display emission name')
30
- }}</label>
31
- </div>
32
- <div>
33
- <input
34
- id="display-participants-names"
35
- v-model="displayParticipantsNames"
36
- type="checkbox"
37
- class="form-check-input"
38
- >
39
- <label
40
- class="form-check-label"
41
- for="display-participants-names"
42
- >{{ $t('Display participants list') }}</label>
43
- </div>
44
- <div class="d-flex align-items-center mt-2">
45
- <VSwatches
46
- v-model="color"
47
- class="c-hand input-no-outline me-2 mt-2"
48
- show-fallback
49
- colors="text-advanced"
50
- popover-to="right"
51
- :data-color="color"
52
- />
53
- <div>{{ $t('Choose main color') }}</div>
7
+ <div class="modal-backdrop" />
8
+ <div class="modal-dialog">
9
+ <div class="modal-content">
10
+ <div class="modal-header">
11
+ <h5 class="modal-title">
12
+ {{ $t('Share newsletter') }}
13
+ </h5>
14
+ </div>
15
+ <div class="modal-body">
16
+ <div class="d-flex justify-content-between">
17
+ <div v-html="newsletterHtml" />
18
+ <div class="d-flex flex-column flex-grow ms-4">
19
+ <h4 class="mb-3">
20
+ {{ $t('Configuration') }}
21
+ </h4>
22
+ <div>
23
+ <input
24
+ id="display-emission-name"
25
+ v-model="displayEmissionName"
26
+ type="checkbox"
27
+ class="form-check-input"
28
+ >
29
+ <label
30
+ class="form-check-label"
31
+ for="display-emission-name"
32
+ >{{
33
+ $t('Display emission name')
34
+ }}</label>
35
+ </div>
36
+ <div>
37
+ <input
38
+ id="display-participants-names"
39
+ v-model="displayParticipantsNames"
40
+ type="checkbox"
41
+ class="form-check-input"
42
+ >
43
+ <label
44
+ class="form-check-label"
45
+ for="display-participants-names"
46
+ >{{ $t('Display participants list') }}</label>
47
+ </div>
48
+ <div class="d-flex align-items-center mt-2">
49
+ <VSwatches
50
+ v-model="color"
51
+ class="c-hand input-no-outline me-2 mt-2"
52
+ show-fallback
53
+ colors="text-advanced"
54
+ popover-to="right"
55
+ :data-color="color"
56
+ />
57
+ <div>{{ $t('Choose main color') }}</div>
58
+ </div>
59
+ <div
60
+ class=" d-flex justify-content-between align-items-center mt-3 mb-2"
61
+ >
62
+ <h4 class="mb-0">
63
+ {{ $t('HTML Code') }}
64
+ </h4>
65
+ <input
66
+ type="button"
67
+ :value="$t('Copy')"
68
+ class="btn btn-primary"
69
+ :aria-label="$t('Copy')"
70
+ @click="onCopyCode(newsletterHtml, afterCopy)"
71
+ >
72
+ </div>
73
+ <textarea
74
+ id="newsletter_code_textarea"
75
+ v-model="newsletterHtml"
76
+ readonly
77
+ @click="selectAll"
78
+ />
79
+ <label
80
+ for="newsletter_code_textarea"
81
+ :aria-label="$t('HTML Code')"
82
+ />
83
+ </div>
54
84
  </div>
55
- <div
56
- class=" d-flex justify-content-between align-items-center mt-3 mb-2"
85
+ </div>
86
+ <div class="modal-footer">
87
+ <button
88
+ class="btn btn-primary m-1"
89
+ @click="closePopup"
57
90
  >
58
- <h4 class="mb-0">
59
- {{ $t('HTML Code') }}
60
- </h4>
61
- <input
62
- type="button"
63
- :value="$t('Copy')"
64
- class="btn btn-primary"
65
- :aria-label="$t('Copy')"
66
- @click="onCopyCode(newsletterHtml, afterCopy)"
67
- >
68
- </div>
69
- <textarea
70
- id="newsletter_code_textarea"
71
- v-model="newsletterHtml"
72
- readonly
73
- @click="selectAll"
74
- />
75
- <label
76
- for="newsletter_code_textarea"
77
- :aria-label="$t('HTML Code')"
78
- />
91
+ {{ $t('Close') }}
92
+ </button>
79
93
  </div>
80
94
  </div>
81
- </template>
82
- <template #modal-footer>
83
- <button
84
- class="btn btn-primary m-1"
85
- @click="closePopup"
86
- >
87
- {{ $t('Close') }}
88
- </button>
89
- </template>
90
- </b-modal>
95
+ </div>
96
+ </div>
91
97
  <Snackbar
92
98
  ref="snackbar"
93
99
  position="bottom-left"
package/src/components/misc/modal/QrCodeModal.vue CHANGED
@@ -1,25 +1,29 @@
1
1
  <template>
2
- <div>
3
- <b-modal
4
- id="qrcode-modal"
5
- :show="true"
6
- :title="$t('Share QR Code')"
7
- @close="closePopup"
8
- @hide="closePopup"
9
- @cancel="closePopup"
10
- >
11
- <template #default>
12
- <QrCode :url="urlPage" />
13
- </template>
14
- <template #modal-footer>
15
- <button
16
- class="btn btn-primary m-1"
17
- @click="closePopup"
18
- >
19
- {{ $t('Close') }}
20
- </button>
21
- </template>
22
- </b-modal>
2
+ <div
3
+ id="qrcode-modal"
4
+ class="modal"
5
+ >
6
+ <div class="modal-backdrop" />
7
+ <div class="modal-dialog">
8
+ <div class="modal-content">
9
+ <div class="modal-header">
10
+ <h5 class="modal-title">
11
+ {{ $t('Share QR Code') }}
12
+ </h5>
13
+ </div>
14
+ <div class="modal-body">
15
+ <QrCode :url="urlPage" />
16
+ </div>
17
+ <div class="modal-footer">
18
+ <button
19
+ class="btn btn-primary m-1"
20
+ @click="closePopup"
21
+ >
22
+ {{ $t('Close') }}
23
+ </button>
24
+ </div>
25
+ </div>
26
+ </div>
23
27
  </div>
24
28
  </template>
25
29