@saooti/octopus-sdk 30.0.6 → 30.0.10

package/README.md

@@ -503,4 +503,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.3 Ajout tag page podcast
  * 30.0.4 Remplacer la version "classique" des miniplayers par la version beta
  * 30.0.5 Tri des classes dans des sous dossiers
- * 30.0.6 Merge 29
+ * 30.0.6 Merge 29
+ * 30.0.7 Améliorations css
+ * 30.0.8 Améliorations diverses
+ * 30.0.9 Améliorations diverses
+ * 30.0.10 PB clearInterval

package/index.ts

@@ -49,6 +49,11 @@ import RubriqueChooser from "./src/components/display/rubriques/RubriqueChooser.
 import CommentList from "./src/components/display/comments/CommentList.vue";
 import CommentInput from "./src/components/display/comments/CommentInput.vue";
 
+//form
+import ClassicSearch from "./src/components/form/ClassicSearch.vue";
+import ClassicCheckbox from "./src/components/form/ClassicCheckbox.vue";
+import ClassicRadio from "./src/components/form/ClassicRadio.vue";
+
 //mixins
 import {selenium} from "./src/components/mixins/functions";
 import {cookies} from "./src/components/mixins/functions";
@@ -99,7 +104,10 @@ const components = {
     orgaFilter,
     initSDK,
     Popover,
-    tagOfMixins
+    tagOfMixins,
+    ClassicSearch,
+    ClassicCheckbox,
+    ClassicRadio
 }
 
 export default components;
@@ -146,5 +154,8 @@ export {
     orgaFilter,
     initSDK,
     Popover,
-    tagOfMixins
+    tagOfMixins,
+    ClassicSearch,
+    ClassicCheckbox,
+    ClassicRadio
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "30.0.6",
+  "version": "30.0.10",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/assets/bootstrap-diff.scss

@@ -59,10 +59,6 @@
             border-color: darken($octopus-primary-color, 7%);
             }
         }
-        &.btn-secondary{
-            border-width: 0;
-            color: #000;
-        }
         &.btn-light{
             color: $octopus-primary-color;
             background: transparent;
@@ -96,18 +92,8 @@
             margin: 0 1rem 1rem 0;
             font-size: 0.8em;
             }
-        }
-    
-        &.btn-arrow {
-            border-radius: 50px;
-            margin: 0.2rem;
-            width: 1.8rem;
-            height: 1.8rem;
-            background: $octopus-secondary-color;
-            padding: 0;
-            &:hover {
-            border: 0;
-            background: $octopus-secondary-color;
+            &.active{
+                border-bottom: $octopus-primary-color 2px solid;
             }
         }
     
@@ -130,7 +116,7 @@
             }
         }
     
-        &.btn-linkPlus {
+        &.btn-link-plus {
             padding: 8px 16px;
             font-size: 0.8rem;
             border-radius: 50px;
@@ -138,6 +124,7 @@
             color: #000;
             box-shadow: none;
             display: flex;
+            border: 1px solid transparent;
             .saooti-plus{
             line-height: 1.5 !important;
             margin-left: 5px; 
@@ -164,7 +151,7 @@
             margin: 1rem;
         }
     
-        &.btn-bigRound{
+        &.btn-big-round{
             border: 1px #aaa solid;
             background: none;
             font-size: 3rem !important;
@@ -176,7 +163,8 @@
             height: 5rem;
         }
     
-        &.admin-button {
+        &.admin-button,
+        &.btn-arrow  {
             padding: 0.3rem;
             height: 1.8rem;
             width: 1.8rem;
@@ -184,6 +172,14 @@
             display: inline-flex;
             align-items: center;
         }
+        &.btn-arrow {
+            margin: 0.2rem;
+            background: $octopus-secondary-color;
+            &:hover {
+            background: $octopus-secondary-color;
+            }
+        }
+    
     }
 
     .share-btn {
@@ -240,12 +236,13 @@
         display: none;
       }    
     .dropdown-menu {
-        padding: $dropdown-padding-y 0.5rem;
+        padding: 0.5rem;
         @media (max-width: 450px) {
             min-width: 15rem;
         } 
     }
     .dropdown-item {
+        cursor: pointer;
         font-size: 0.8rem;
         @media (max-width: 450px) {
             padding: 0.25rem 0;
@@ -257,11 +254,6 @@
         } 
     }   
 
-    .modal-header { 
-        @media (max-width: 450px) {
-            padding: 1rem 0;
-        } 
-    }
     .accordion-button {
         padding: 0.5rem;
     }

package/src/assets/form.scss

@@ -5,6 +5,13 @@
 	.width-auto{
 	width: auto !important;
 	}
+	select {
+		background: white !important;
+		outline-color: transparent !important;
+		padding: 0.5rem;
+		border: 0.1rem solid #dee2e6;
+		border-radius: 0.3rem;
+	}
 
 	.form-input {
 		-webkit-appearance: none;
@@ -35,43 +42,6 @@
 		cursor: pointer;
 	}
 
-	.filter-search-input{
-	flex-grow: 1;
-	height: 2rem;
-	margin: 1rem 0;
-	padding: 1.2rem 3rem 1.2rem 1.2rem;
-	border-radius: 2rem;
-	border-style: none;
-	background: white;
-	@media (max-width: 450px) {
-		margin: 0.5rem 0;
-		font-size: 0.6rem;
-		padding: 1.2rem 2.5rem 1.2rem 1.2rem;
-	}
-	}
-
-	.btn-underline.active{
-	border-bottom: $octopus-primary-color 2px solid;
-	}
-	// Datetime picker
-	.theme-saooti input{
-	border: 0.1rem solid #dee2e6;
-	border-radius: 0.3rem;
-	padding: 0.1rem 0.4rem;
-	}
-	.theme-saooti .vdatetime-popup__header,
-	.theme-saooti .vdatetime-calendar__month__day--selected>span>span,
-	.theme-saooti .vdatetime-calendar__month__day--selected:hover>span>span,
-	.theme-saooti .vdatetime-popup__date-picker__item--selected>span>span {
-	background: $octopus-primary-color;
-	}
-
-	.theme-saooti .vdatetime-year-picker__item--selected,
-	.theme-saooti .vdatetime-time-picker__item--selected,
-	.theme-saooti .vdatetime-popup__actions__button {
-	color: $octopus-primary-color;
-	}
-
 	//Navigation Bar
 	.nav{
 		border-bottom: 0.05rem solid #ddd;

package/src/assets/general.scss

@@ -2,7 +2,6 @@
 html{
   font-size: 20px;
 }
-
 body{
   color: #353535;
   font-family: Montserrat,sans-serif,Helvetica Neue;
@@ -11,78 +10,68 @@ body{
   background: #fff;
 }
 .octopus-app{
+  h1,h2,h3,h4,h5,h6{
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+    margin-top: 0;
+    @media (max-width: 500px){
+      margin: 0.2rem;
+    }
+  }
   h1{
     font-size: 1.8rem;
     text-align: center;
     color: #666;
     @media (max-width: 500px){
       font-size: 1.2rem;
+      margin: 0.5rem 0 1rem;
     }
   }
   h2{
     @media (max-width: 500px){
-      font-size: 1.2rem;
+      font-size: 1rem;
     }
   }
 
-  .small-Text{
+  .small-text{
     font-size: 0.6rem;
     display: flex;
-      align-items: center;
-      .saooti-clock3 {
-        margin-right: 0.2rem;
-      }
-  }
-
-  h1,h2,h3,h4,h5,h6{
-    font-weight: 600;
-    line-height: 1.2;
-    margin-bottom: 0.5em;
-    margin-top: 0;
-    @media (max-width: 500px){
-      margin: 0.5rem;
-      font-size: 1rem;
-    }
-  }
-
-  h1 {
-    @media (max-width: 500px){
-      margin: 0.5rem 0 1rem;
-    }
-
-  }
+    align-items: center;
+    .saooti-clock3 {
+      margin-right: 0.2rem;
+    }
+  }
+
+  .d-flex-column{
+		display: flex;
+		flex-direction: row;
+		@media (max-width: 960px) {
+			flex-direction: column;
+		}
+	}
+  .d-flex-row{
+		display: flex;
+		flex-direction: column;
+		@media (max-width: 960px) {
+			flex-direction: row;
+      flex-wrap: wrap;
+		}
+	}
 
   .primary-color{
     color: $octopus-primary-color;
   }
-  .primary-dark{
+  .primary-darker{
     color: $octopus-primary-dark;
   }
-
   .primary-bg{
     background: $octopus-primary-color;
   }
   .secondary-bg{
     background: $octopus-background;
   }
-
-  .border-primary{
-    border-color:$octopus-primary-color !important;
-    border-radius: 3rem;
-    border-radius: 3rem;
-    border-style: inset;
-    border-width: 1px;;
-  }
-
-  .pe-5 {
-    @media (max-width: 960px) {
-      padding-right: 5px !important;
-    }
-  }
-  .ps-5 {
-    @media (max-width: 960px) {
-      padding-left: 5px !important;
-    }
+  .width-fit-content{
+    width: fit-content !important;
   }
 
   .page-box{
@@ -115,32 +104,20 @@ body{
   .shadow-element{
     box-shadow: 0px 12px 48px 6px rgba($octopus-primary-color, 0.2) !important;
     @media (max-width: 500px){
-      box-shadow:0px 6px 20px 3px rgba($octopus-primary-color, 0.2) !important
+      box-shadow:0px 6px 20px 3px rgba($octopus-primary-color, 0.2) !important;
     }
   }
 
-  .link-info{
-    font-weight: bold;
-    color: $octopus-primary-color;
-  }
-  .link-info:hover{
-    text-decoration: none;
-    color: $octopus-primary-color;
-  }
-
   a, a:hover{
     text-decoration: none;
     outline-width: 0;
   }
-
-  a.linkHover.router-link-exact-active.router-link-active {
-    color: $octopus-primary-color !important;
+  a.link-hover{
+    color: black !important;
   }
-
-  a.linkHover:hover{
+  a.link-hover.router-link-exact-active.router-link-active, a.link-hover:hover {
     color: $octopus-primary-color !important;
   }
-
   .descriptionText{
     white-space: pre-wrap; 
     word-wrap: break-word;
@@ -150,18 +127,16 @@ body{
       margin: 1rem 0;
     }
   }
-
-  .alert-text{
-    color: $octopus-alert-text;
-  }
-  .flex-grow{
-    flex-grow: 1;
-  }
   .flex-super-grow{
     flex-grow: 2;
   }
-  .flex-shrink{
-    flex-shrink: 0;
+  .flex-small-grow {
+    flex-grow: 0.3;
+  }
+  .flex-grow-mobile {
+    @media (max-width: 960px) {
+        flex-grow: 1;
+    }
   }
   .text-center-mobile{
     text-align: inherit;
@@ -169,15 +144,11 @@ body{
       text-align: center;
     }
   }
-  .box-share {
-    flex-grow: inherit;
-  }
   .hide-phone{
     @media (max-width: 960px) {
       display: none !important;
     }
   }
-
   .show-phone{
     display: none;
     @media (max-width: 960px) {
@@ -188,7 +159,6 @@ body{
     visibility: hidden !important;
   }
 
-
   .d-contents{
     display: contents;
   }
@@ -199,14 +169,16 @@ body{
     background-size: cover;
     border-radius: 0.8rem !important;
     overflow: hidden;
+    flex-shrink: 0;
+    @media (max-width: 960px) {
+      flex-grow: 0;
+    }
+    @media (max-width: 450px) {
+      margin: 0.5rem auto 2rem !important;
+      float: inherit !important;
+      display: flex;
+    }
   }
-  .img-box-light {
-    height: 100px;
-    width: 100px;
-    background-size: cover;
-    margin-right: 10px;
-  }
-
   .img-box-circle {
     height: 10rem;
     width: 10rem;
@@ -216,21 +188,6 @@ body{
     box-shadow: 0px 8px 26px 6px rgba(64, 163, 114, 0.3);
   }
 
-  .background-icon{
-    background: $octopus-primary-color;
-    border-radius: 50%;
-    width: 1rem;
-    height: 1rem;
-    font-size: 1rem;
-    right: 0;
-    bottom: 0;
-    margin: 5px;
-    position: absolute;
-    cursor: pointer;
-    z-index: 3;
-  }
-
-
   .comma {
     display: flex;
     flex-wrap: wrap;
@@ -248,31 +205,10 @@ body{
       }
     }
   }
-
-  .noList{
-    list-style: none;
-  }
   .c-hand{
     cursor: pointer;
   }
 
-  .btn-rounded-icon{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.8rem;
-    height: 1.8rem;
-  }
-  .font-weight-600{
-    font-weight: 600;
-  }
-  .flex-no-wrap{
-    flex-wrap: nowrap !important;
-  }
-
-  .p-01{
-    padding: 0.1rem !important;
-  }
   .html-wysiwyg-content{
     h3,h4{
       margin: 0 0 0.5em 0 !important;
@@ -289,61 +225,11 @@ body{
       margin-bottom: 0.2rem;
     }
   }
-  .planned-bg {
-    background: #f09653;
-  }
-  .pending-bg {
-    background: #f1643e;
-  }
-  .recording-bg {
-    background: #f34a4a;
-  }
-  .error-bg {
-    background: #ff0000;
-  }
-  .debriefing-bg {
-    background: #6ec66e;
-  }
-  .done-bg {
-    background: #679fe9;
-  }
-  .publishing-bg {
-    background: #7d7d7d;
-  }
-  .planned-shadow {
-    box-shadow: 0px 12px 48px 6px rgba(240, 151, 83, 0.2);
-  }
-  .pending-shadow {
-    box-shadow: 0px 12px 48px 6px rgba(241, 101, 62, 0.2);
-  }
-  .recording-shadow {
-    box-shadow: 0px 12px 48px 6px rgba(243, 74, 74, 0.2);
-  }
-  .debriefing-shadow {
-    box-shadow: 0px 12px 48px 6px rgba(110, 198, 110, 0.2);
-  }
-  .publishing-shadow {
-    box-shadow: 0px 12px 48px 6px rgba(125, 125, 125, 0.2);
-  }
-  .error-shadow {
-    box-shadow: 0px 12px 48px 6px rgba(255, 0, 0, 0.2);
-  }
-  @media (max-width: 450px) {
-    .module-box .img-box {
-      margin: 0.5rem auto 2rem !important;
-      float: inherit !important;
-      display: flex;
-  }
-  }
+  
   @media (max-width: 960px) {
     .d-flex:not(.flex-column){
       flex-wrap: wrap;
       flex-grow: 1;
-      &.img-box{
-        flex-grow: 0;
-      }
     }
   }
-
-
 }

package/src/assets/live.scss

@@ -0,0 +1,39 @@
+  .planned-bg {
+    background: #f09653;
+  }
+  .pending-bg {
+    background: #f1643e;
+  }
+  .recording-bg {
+    background: #f34a4a;
+  }
+  .error-bg {
+    background: #ff0000;
+  }
+  .debriefing-bg {
+    background: #6ec66e;
+  }
+  .done-bg {
+    background: #679fe9;
+  }
+  .publishing-bg {
+    background: #7d7d7d;
+  }
+  .planned-shadow {
+    box-shadow: 0px 12px 48px 6px rgba(240, 151, 83, 0.2);
+  }
+  .pending-shadow {
+    box-shadow: 0px 12px 48px 6px rgba(241, 101, 62, 0.2);
+  }
+  .recording-shadow {
+    box-shadow: 0px 12px 48px 6px rgba(243, 74, 74, 0.2);
+  }
+  .debriefing-shadow {
+    box-shadow: 0px 12px 48px 6px rgba(110, 198, 110, 0.2);
+  }
+  .publishing-shadow {
+    box-shadow: 0px 12px 48px 6px rgba(125, 125, 125, 0.2);
+  }
+  .error-shadow {
+    box-shadow: 0px 12px 48px 6px rgba(255, 0, 0, 0.2);
+  }

package/src/assets/modal.scss

@@ -2,19 +2,12 @@
 .octopus-app{
 	.modal{
 		display: block;
-	}
-	.modal-backdrop{
-
 	}
 	.modal-backdrop {
 		opacity: 0.5;
 		z-index: 0;
 	}
-	
-	.modal-wrapper {
-		display: table-cell;
-		vertical-align: middle;
-	}
+
 	.modal-dialog {
 		box-shadow: 0 0.2rem 0.5rem rgba(40,40,40,.3);
 		border-radius: 15px;
@@ -30,29 +23,32 @@
 			margin: 2.5% !important;
 		}
 	}
+	.modal-header { 
+		border: 0;
+        @media (max-width: 450px) {
+            padding: 1rem 0;
+        } 
+    }
 	.modal-body{
 		overflow-x: auto;
+		.scroller-vertical {
+			min-height: 200px;
+			height: 200px;
+		}
 		@media (max-width: 500px){
 			padding: 0;
-			overflow-x: auto;
 		}
 	}
+	.modal-dialog, .modal-content {
+		min-height: 300px;
+	}
 	.modal-content{
 		border: 0;
-		.close{
-			outline: none !important;
-		}
 		height: auto !important;
 		max-height: calc(100vh - 250px) !important;
 	}
-	.modal-header{
-		border: 0;
-	}
 	.modal-footer{
 		border: 0;
 		flex-wrap: initial;
 	}
-	.modal-dialog, .modal-content {
-		min-height: 300px;
-	}
 }