feat: Implemented new UI and Fit option changes

control/design/enums.js

@@ -7,7 +7,8 @@
         })
         .constant('CAROUSAL_TYPE', {
             WIDTH: 'WideScreen',
-            HEIGHT: 'MobileScreen'
+            HEIGHT: 'MobileScreen',
+            FIT: 'Fit'
         })
         .constant('CODES', {
             INSERTED: 'inserted',

control/design/index.html

@@ -8,6 +8,7 @@
 	<link href="../../../../styles/siteIcons.css" rel="stylesheet">
 	<link href="../../../../scripts/owlCarousel/owlCarousel.css" rel="stylesheet">
 	<link rel="stylesheet" href="../../../../styles/transitionAnimation.css">
+	<link rel="stylesheet" href="../shared/assets/styles/style.css">
 
 	<!-- JS -->
 	<script src="../../../../scripts/jquery/jquery-1.11.2.min.js"></script>

control/design/templates/home.html

@@ -1,22 +1,59 @@
 
-<div class="item row clearfix" style="padding-bottom: 2%">
-    <div class="labels col-md-3 padding-right-zero pull-left">
-        <span>Carousal Type</span>
+<div class="item row clearfix margin-top-fifteen" style="padding-bottom: 2%">
+    <div class="labels col-md-3 padding-right-zero pull-left tooltip-container">
+        <span>Image Carousel Layout</span>
+        <span class="btn-info-icon btn-primary">
+            <span class="cp-tooltip">
+                Choose how images display in the image carousel.
+            </span>
+        </span>
     </div>
-    <div class="main pull-right col-md-9 padding-left-zero row">
+    <div class="main pull-right col-md-9 padding-left-zero row d-flex flex-space-between">
         <div class="radio radio-primary radio-inline">
             <input id="channel" type="radio"
                    ng-model="DesignHome.data.design.mode"
                    ng-value="DesignHome.CAROUSAL_TYPE.WIDTH"
                    name="accountType" class="ng-pristine ng-untouched ng-valid" value="WideScreen">
-            <label for="channel">WideScreen</label>
+            <label for="channel" class="tooltip-container">
+                Crop
+                <span class="btn-info-icon btn-primary">
+                    <span class="cp-tooltip-bottom">
+                        <img class='margin-bottom-ten' src="../../resources/tooltip-crop.png" alt="Tooltip Crop">
+                        Crop the image to maintain a 16:9 ratio, regardless of the image orientation.
+                    </span>
+                </span>
+            </label>
         </div>
         <div class="radio radio-primary radio-inline">
             <input id="video" type="radio"
                    ng-model="DesignHome.data.design.mode"
                    ng-value="DesignHome.CAROUSAL_TYPE.HEIGHT"
                    name="accountType" class="ng-pristine ng-untouched ng-valid" value="MobileScreen">
-            <label for="video">FullScreen</label>
+            <label for="video" class="tooltip-container">
+                Fill
+                <span class="bf-tooltip margin-left-five">
+                    <span class="btn-info-icon btn-primary">
+                        <span class="cp-tooltip-bottom">
+                        <img class='margin-bottom-ten' src="../../resources/tooltip-fill.png" alt="Tooltip Fill">
+                        Scale the image to fill the container without any surrounding space.
+                    </span>
+                </span>
+            </label>
+        </div>
+        <div class="radio radio-primary radio-inline margin-right-ten">
+            <input id="fit" type="radio"
+                   ng-model="DesignHome.data.design.mode"
+                   ng-value="DesignHome.CAROUSAL_TYPE.FIT"
+                   name="accountType" class="ng-pristine ng-untouched ng-valid" value="Fit">
+            <label class="tooltip-container" for="fit">
+                Fit
+                <span class="btn-info-icon btn-primary">
+                    <span class="cp-tooltip-bottom">
+                        <img class='margin-bottom-ten' src="../../resources/tooltip-fit.png" alt="Tooltip Fit">
+                        Maintain the original image ratio while ensuring the entire image is visible.
+                    </span>
+                </span>
+            </label>
         </div>
     </div>
 </div>

control/settings/index.html

@@ -6,6 +6,7 @@
   <!-- CSS -->
   <link href="../../../../styles/helper.css" rel="stylesheet">
   <link href="../../../../styles/siteIcons.css" rel="stylesheet">
+  <link rel="stylesheet" href="../shared/assets/styles/style.css">
 
   <!-- JS -->
   <script src="../../../../scripts/jquery/jquery-1.11.2.min.js"></script>

control/settings/templates/home.html

@@ -1,18 +1,13 @@
-
-<!--<div class="item clearfix row" ng-if="SettingsHome.data">
-  <div class="main pull-right col-md-9">
-    <div class="alert alert-danger alert-sm text-center"
-         ng-if="!SettingsHome.data.settings.apiKey">Please enter API Key to
-      find UV index
-    </div>
+<div class="item row clearfix margin-top-fifteen">
+  <div class="labels col-md-4 padding-right-zero pull-left tooltip-container">
+    <span>Time Between Slides</span>
+    <span class="btn-info-icon btn-primary">
+      <span class="cp-tooltip-bottom">
+        Choose a number in seconds (1-99) to set the auto-scroll interval between slides. Leave 0 to disable auto-scroll and allow manual scrolling.
+      </span>
+    </span>
   </div>
-</div>-->
-<br>
-<div class="item row clearfix">
-  <div class="labels col-md-3 padding-right-zero pull-left" style=" width: 42%;"  >
-    <span>Time between slides ( 0 - 99 seconds) </span>
-  </div>
-  <div class="main col-md-9 pull-right" style=" width: 56%; float: right !important; ">
+  <div class="main col-md-8 pull-right" style="float: right !important; ">
     <input id="url" name="url" type="text" min="0" max="99" class="form-control"
            ng-model="SettingsHome.data.settings.speed"  number-mask>
   </div>

control/shared/assets/styles/style.css

@@ -0,0 +1,128 @@
+body {
+  font-family: 'Apercu', 'Helvetica', 'Sans-Serif', 'Arial' !important;
+}
+.d-flex {
+  display: flex;
+}
+.flex-space-between {
+  justify-content: space-between;
+}
+
+/* tooltip */
+.tooltip-container {
+  display: flex !important;
+  align-items: center;
+  gap: 0.25rem;
+}
+.tooltip-container .btn-info-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+  min-width: 16px;
+  min-height: 16px;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  color: #fff;
+  position: relative;
+}
+.tooltip-container .btn-info-icon:after {
+  content: 'i';
+  font-weight: 400;
+  font-size: 12px;
+  font-style: normal;
+  left: 0;
+  top: auto !important;
+  height: 100%;
+}
+.tooltip-container .btn-info-icon .cp-tooltip {
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  padding: 8px;
+  border-radius: 4px;
+  position: absolute;
+  left: calc(100% + 12px);
+  cursor: auto;
+  font-size: 12px;
+  text-align: left;
+  width: 200px;
+  opacity: 0;
+  transform: scale(0.1);
+  transition: opacity ease 0.1s, transform ease 0.1s;
+  transform-origin: left;
+  z-index: 100;
+  font-weight: 400;
+  line-height: 18px;
+  -webkit-text-stroke: 0;
+}
+.top-cp-tooltip {
+  top: 0;
+}
+.bottom-cp-tooltip {
+  bottom: 0;
+}
+.tooltip-container .btn-info-icon .cp-tooltip::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -5px;
+  transform: rotate(90deg) translate(-50%);
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
+}
+.top-cp-tooltip::before {
+  top: 10px !important;
+}
+.bottom-cp-tooltip::before {
+  bottom: 0 !important;
+  top: unset !important;
+}
+.tooltip-container .btn-info-icon:hover .cp-tooltip {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.tooltip-container .btn-info-icon .cp-tooltip-bottom {
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  padding: 8px;
+  border-radius: 4px;
+  position: absolute;
+  top: calc(100% + 12px);
+  cursor: auto;
+  font-size: 12px;
+  text-align: center;
+  width: 200px;
+  opacity: 0;
+  transform: scale(0.1) translateY(-100%);
+  transition: opacity ease 0.1s, transform ease 0.1s;
+  transform-origin: bottom center;
+  z-index: 100;
+  font-weight: 400;
+  line-height: 18px;
+  -webkit-text-stroke: 0;
+}
+.tooltip-container .btn-info-icon .cp-tooltip-bottom::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: -10px;
+  transform: rotate(180deg) translate(-50%);
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
+}
+
+.tooltip-container .btn-info-icon:hover .cp-tooltip-bottom {
+  opacity: 1;
+  transform: scale(1) translateX(-5px);
+}
+.radio label.tooltip-container::after {
+  top: 4px;
+}

widget/controllers/widget.home.controller.js

@@ -85,7 +85,7 @@
 
 
               if (WidgetHome.data.content.carouselImages || WidgetHome.data.design.mode) {
-                  if( WidgetHome.data.design.mode==CAROUSAL_TYPE.MOBILESCEEN)
+                  if( WidgetHome.data.design.mode==CAROUSAL_TYPE.MOBILESCEEN || WidgetHome.data.design.mode==CAROUSAL_TYPE.FIT)
                       WidgetHome.data.design.mode_gap=false;
                   else
                       WidgetHome.data.design.mode_gap=true;
@@ -128,7 +128,7 @@
 
                   WidgetHome.data.design.mode = event.data.design.mode;
 
-                  if( WidgetHome.data.design.mode==CAROUSAL_TYPE.MOBILESCEEN)
+                  if( WidgetHome.data.design.mode==CAROUSAL_TYPE.MOBILESCEEN || WidgetHome.data.design.mode==CAROUSAL_TYPE.FIT)
                       WidgetHome.data.design.mode_gap=false;
                   else
                       WidgetHome.data.design.mode_gap=true;

widget/enums.js

@@ -7,7 +7,8 @@
     })
       .constant('CAROUSAL_TYPE', {
         WIDESCREEN: 'WideScreen',
-        MOBILESCEEN: 'MobileScreen'
+        MOBILESCEEN: 'MobileScreen',
+        FIT: 'Fit'
       })
     .constant('STATUS_CODE', {
       INSERTED: 'inserted',

widget/index.html

@@ -12,6 +12,7 @@
     <link href="../../../styles/siteIcons.css" rel="stylesheet">
     <link rel="stylesheet" href="../../../styles/appStyle.css">
     <link rel="stylesheet" href="../../../scripts/owlCarousel/owlCarousel.css">
+    <link rel="stylesheet" href="./shared/assets/styles/style.css">
 
     <!-- JS -->
     <script src="../../../scripts/buildfire.js"></script>
@@ -64,7 +65,7 @@
 </head>
 <body class="no-scroll">
 <div ng-controller="WidgetHomeCtrl as WidgetHome">
-    <div ng-show="WidgetHome.data.design.mode_gap" id="gapdiv" style="padding-bottom: 50%"></div>
+    <div ng-show="WidgetHome.data.design.mode_gap" id="gapdiv"></div>
     <!--
     <img ng-src="{{'../../../styles/media/holder-16x9.gif'}}"
          ng-if="WidgetHome.data.content.carouselImages.length"

widget/shared/assets/styles/style.css

@@ -0,0 +1,5 @@
+@media screen and (max-width: 767px) {
+  #gapdiv {
+    padding-bottom: 50%;
+  }
+}