Skip to content

Commit 37bbb19

Browse files
mas-iotamas-iota
authored
Merge pull request #23 from BuildFire/carousel-fit-option-changes
feat: Implemented new UI and Fit option changes
2 parents b0d1ed2 + 745ed02 commit 37bbb19

File tree

13 files changed

+195
-25
lines changed

13 files changed

+195
-25
lines changed

‎control/design/enums.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
})
88
.constant('CAROUSAL_TYPE', {
99
WIDTH: 'WideScreen',
10-
HEIGHT: 'MobileScreen'
10+
HEIGHT: 'MobileScreen',
11+
FIT: 'Fit'
1112
})
1213
.constant('CODES', {
1314
INSERTED: 'inserted',

‎control/design/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<link href="../../../../styles/siteIcons.css" rel="stylesheet">
99
<link href="../../../../scripts/owlCarousel/owlCarousel.css" rel="stylesheet">
1010
<link rel="stylesheet" href="../../../../styles/transitionAnimation.css">
11+
<link rel="stylesheet" href="../shared/assets/styles/style.css">
1112

1213
<!-- JS -->
1314
<script src="../../../../scripts/jquery/jquery-1.11.2.min.js"></script>

‎control/design/templates/home.html‎

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,59 @@
11

2-
<div class="item row clearfix" style="padding-bottom: 2%">
3-
<div class="labels col-md-3 padding-right-zero pull-left">
4-
<span>Carousal Type</span>
2+
<div class="item row clearfix margin-top-fifteen" style="padding-bottom: 2%">
3+
<div class="labels col-md-3 padding-right-zero pull-left tooltip-container">
4+
<span>Image Carousel Layout</span>
5+
<span class="btn-info-icon btn-primary">
6+
<span class="cp-tooltip">
7+
Choose how images display in the image carousel.
8+
</span>
9+
</span>
510
</div>
6-
<div class="main pull-right col-md-9 padding-left-zero row">
11+
<div class="main pull-right col-md-9 padding-left-zero row d-flex flex-space-between">
712
<div class="radio radio-primary radio-inline">
813
<input id="channel" type="radio"
914
ng-model="DesignHome.data.design.mode"
1015
ng-value="DesignHome.CAROUSAL_TYPE.WIDTH"
1116
name="accountType" class="ng-pristine ng-untouched ng-valid" value="WideScreen">
12-
<label for="channel">WideScreen</label>
17+
<label for="channel" class="tooltip-container">
18+
Crop
19+
<span class="btn-info-icon btn-primary">
20+
<span class="cp-tooltip-bottom">
21+
<img class='margin-bottom-ten' src="../../resources/tooltip-crop.png" alt="Tooltip Crop">
22+
Crop the image to maintain a 16:9 ratio, regardless of the image orientation.
23+
</span>
24+
</span>
25+
</label>
1326
</div>
1427
<div class="radio radio-primary radio-inline">
1528
<input id="video" type="radio"
1629
ng-model="DesignHome.data.design.mode"
1730
ng-value="DesignHome.CAROUSAL_TYPE.HEIGHT"
1831
name="accountType" class="ng-pristine ng-untouched ng-valid" value="MobileScreen">
19-
<label for="video">FullScreen</label>
32+
<label for="video" class="tooltip-container">
33+
Fill
34+
<span class="bf-tooltip margin-left-five">
35+
<span class="btn-info-icon btn-primary">
36+
<span class="cp-tooltip-bottom">
37+
<img class='margin-bottom-ten' src="../../resources/tooltip-fill.png" alt="Tooltip Fill">
38+
Scale the image to fill the container without any surrounding space.
39+
</span>
40+
</span>
41+
</label>
42+
</div>
43+
<div class="radio radio-primary radio-inline margin-right-ten">
44+
<input id="fit" type="radio"
45+
ng-model="DesignHome.data.design.mode"
46+
ng-value="DesignHome.CAROUSAL_TYPE.FIT"
47+
name="accountType" class="ng-pristine ng-untouched ng-valid" value="Fit">
48+
<label class="tooltip-container" for="fit">
49+
Fit
50+
<span class="btn-info-icon btn-primary">
51+
<span class="cp-tooltip-bottom">
52+
<img class='margin-bottom-ten' src="../../resources/tooltip-fit.png" alt="Tooltip Fit">
53+
Maintain the original image ratio while ensuring the entire image is visible.
54+
</span>
55+
</span>
56+
</label>
2057
</div>
2158
</div>
2259
</div>

‎control/settings/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<!-- CSS -->
77
<link href="../../../../styles/helper.css" rel="stylesheet">
88
<link href="../../../../styles/siteIcons.css" rel="stylesheet">
9+
<link rel="stylesheet" href="../shared/assets/styles/style.css">
910

1011
<!-- JS -->
1112
<script src="../../../../scripts/jquery/jquery-1.11.2.min.js"></script>

‎control/settings/templates/home.html‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,13 @@
1-
2-
<!--<div class="item clearfix row" ng-if="SettingsHome.data">
3-
<div class="main pull-right col-md-9">
4-
<div class="alert alert-danger alert-sm text-center"
5-
ng-if="!SettingsHome.data.settings.apiKey">Please enter API Key to
6-
find UV index
7-
</div>
1+
<div class="item row clearfix margin-top-fifteen">
2+
<div class="labels col-md-4 padding-right-zero pull-left tooltip-container">
3+
<span>Time Between Slides</span>
4+
<span class="btn-info-icon btn-primary">
5+
<span class="cp-tooltip-bottom">
6+
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.
7+
</span>
8+
</span>
89
</div>
9-
</div>-->
10-
<br>
11-
<div class="item row clearfix">
12-
<div class="labels col-md-3 padding-right-zero pull-left" style=" width: 42%;" >
13-
<span>Time between slides ( 0 - 99 seconds) </span>
14-
</div>
15-
<div class="main col-md-9 pull-right" style=" width: 56%; float: right !important; ">
10+
<div class="main col-md-8 pull-right" style="float: right !important; ">
1611
<input id="url" name="url" type="text" min="0" max="99" class="form-control"
1712
ng-model="SettingsHome.data.settings.speed" number-mask>
1813
</div>

‎control/shared/assets/styles/style.css‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
body {
2+
font-family: 'Apercu', 'Helvetica', 'Sans-Serif', 'Arial' !important;
3+
}
4+
.d-flex {
5+
display: flex;
6+
}
7+
.flex-space-between {
8+
justify-content: space-between;
9+
}
10+
11+
/* tooltip */
12+
.tooltip-container {
13+
display: flex !important;
14+
align-items: center;
15+
gap: 0.25rem;
16+
}
17+
.tooltip-container .btn-info-icon {
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
margin-left: 8px;
22+
min-width: 16px;
23+
min-height: 16px;
24+
width: 16px;
25+
height: 16px;
26+
line-height: 16px;
27+
color: #fff;
28+
position: relative;
29+
}
30+
.tooltip-container .btn-info-icon:after {
31+
content: 'i';
32+
font-weight: 400;
33+
font-size: 12px;
34+
font-style: normal;
35+
left: 0;
36+
top: auto !important;
37+
height: 100%;
38+
}
39+
.tooltip-container .btn-info-icon .cp-tooltip {
40+
pointer-events: none;
41+
background-color: rgba(0, 0, 0, 0.8);
42+
color: #fff;
43+
padding: 8px;
44+
border-radius: 4px;
45+
position: absolute;
46+
left: calc(100% + 12px);
47+
cursor: auto;
48+
font-size: 12px;
49+
text-align: left;
50+
width: 200px;
51+
opacity: 0;
52+
transform: scale(0.1);
53+
transition: opacity ease 0.1s, transform ease 0.1s;
54+
transform-origin: left;
55+
z-index: 100;
56+
font-weight: 400;
57+
line-height: 18px;
58+
-webkit-text-stroke: 0;
59+
}
60+
.top-cp-tooltip {
61+
top: 0;
62+
}
63+
.bottom-cp-tooltip {
64+
bottom: 0;
65+
}
66+
.tooltip-container .btn-info-icon .cp-tooltip::before {
67+
content: '';
68+
position: absolute;
69+
top: 50%;
70+
left: -5px;
71+
transform: rotate(90deg) translate(-50%);
72+
margin-left: -5px;
73+
border-width: 5px;
74+
border-style: solid;
75+
border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
76+
}
77+
.top-cp-tooltip::before {
78+
top: 10px !important;
79+
}
80+
.bottom-cp-tooltip::before {
81+
bottom: 0 !important;
82+
top: unset !important;
83+
}
84+
.tooltip-container .btn-info-icon:hover .cp-tooltip {
85+
opacity: 1;
86+
transform: scale(1);
87+
}
88+
89+
.tooltip-container .btn-info-icon .cp-tooltip-bottom {
90+
pointer-events: none;
91+
background-color: rgba(0, 0, 0, 0.8);
92+
color: #fff;
93+
padding: 8px;
94+
border-radius: 4px;
95+
position: absolute;
96+
top: calc(100% + 12px);
97+
cursor: auto;
98+
font-size: 12px;
99+
text-align: center;
100+
width: 200px;
101+
opacity: 0;
102+
transform: scale(0.1) translateY(-100%);
103+
transition: opacity ease 0.1s, transform ease 0.1s;
104+
transform-origin: bottom center;
105+
z-index: 100;
106+
font-weight: 400;
107+
line-height: 18px;
108+
-webkit-text-stroke: 0;
109+
}
110+
.tooltip-container .btn-info-icon .cp-tooltip-bottom::before {
111+
content: '';
112+
position: absolute;
113+
left: 50%;
114+
top: -10px;
115+
transform: rotate(180deg) translate(-50%);
116+
margin-left: -5px;
117+
border-width: 5px;
118+
border-style: solid;
119+
border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
120+
}
121+
122+
.tooltip-container .btn-info-icon:hover .cp-tooltip-bottom {
123+
opacity: 1;
124+
transform: scale(1) translateX(-5px);
125+
}
126+
.radio label.tooltip-container::after {
127+
top: 4px;
128+
}

‎resources/tooltip-crop.png‎

1.17 KB
Loading

‎resources/tooltip-fill.png‎

1.37 KB
Loading

‎resources/tooltip-fit.png‎

1022 Bytes
Loading

‎widget/controllers/widget.home.controller.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585

8686

8787
if (WidgetHome.data.content.carouselImages || WidgetHome.data.design.mode) {
88-
if( WidgetHome.data.design.mode==CAROUSAL_TYPE.MOBILESCEEN)
88+
if( WidgetHome.data.design.mode==CAROUSAL_TYPE.MOBILESCEEN || WidgetHome.data.design.mode==CAROUSAL_TYPE.FIT)
8989
WidgetHome.data.design.mode_gap=false;
9090
else
9191
WidgetHome.data.design.mode_gap=true;
@@ -128,7 +128,7 @@
128128

129129
WidgetHome.data.design.mode = event.data.design.mode;
130130

131-
if( WidgetHome.data.design.mode==CAROUSAL_TYPE.MOBILESCEEN)
131+
if( WidgetHome.data.design.mode==CAROUSAL_TYPE.MOBILESCEEN || WidgetHome.data.design.mode==CAROUSAL_TYPE.FIT)
132132
WidgetHome.data.design.mode_gap=false;
133133
else
134134
WidgetHome.data.design.mode_gap=true;

0 commit comments

Comments
 (0)