Skip to content

Commit 3f5e77b

Browse files
CookiezaursCookiezaurs
authored
Merge pull request #6139 from Countly/SER-1405-design-drawer-component-vertical-alignment-is-not-correct
[SER-1405] Design drawer component vertical alignment is not correct
2 parents dd48431 + f267e21 commit 3f5e77b

File tree

4 files changed

+43
-33
lines changed

4 files changed

+43
-33
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
Features:
33
- [dashboards] Added the option to set a refresh rate for dashboards, allowing data to update more frequently for selected dashboards.
44
- [crashed] Fix unescaped SDK logs
5+
- [ui] Fix alignment of drawers title and close icon
56

67
## Version 24.05.29
78
Fixes:

‎frontend/express/public/javascripts/countly/vue/components/drawer.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
'is-open': this.isOpened,
6363
'has-sidecars': this.hasSidecars
6464
};
65+
// NOTE: currentScreenMode variable seems to be not defined it should be defined or removed
6566
classes["cly-vue-drawer--" + this.currentScreenMode + "-screen"] = true;
6667
if (this.currentScreenMode === 'half') {
6768
classes["cly-vue-drawer--half-screen-" + this.size] = true;

‎frontend/express/public/javascripts/countly/vue/templates/drawer.html‎

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -20,25 +20,35 @@
2020
</div>
2121
<div class="cly-vue-drawer__header" :class="{ 'is-full-screen': currentScreenMode === 'full'}">
2222
<div class="cly-vue-drawer__title">
23-
<div v-if="currentScreenMode !== 'full'">
24-
<div v-if="hasBackLink" class="cly-vue-drawer__title-container bu-is-flex bu-is-justify-content-space-between">
25-
<div class="bu-is-flex bu-is-flex-direction-column bu-is-justify-content-center bu-p-1 bu-ml-5 bu-mt-5">
26-
<a style="cursor: pointer;" @click="doClose" :data-test-id="testId + '-drawer-back-link'">
27-
<span class="text-medium bu-is-capitalized"><i class="fas fa-arrow-left bu-pr-3"></i>{{i18n('plugins.back')}}</span>
28-
</a>
29-
</div>
30-
<div class="bu-is-flex" :style="hasBackLink.style" :class="{ 'bu-is-justify-content-flex-start': hasBackLink, 'bu-is-justify-content-center': !hasBackLink }">
31-
<h3 :data-test-id="testId + '-header-title'" class="cly-vue-drawer__title-header">{{title}}</h3>
32-
</div>
33-
<span :data-test-id="testId + '-close-button'" class="cly-vue-drawer__close-button bu-p-1 bu-mr-5" v-on:click="doClose">
34-
<i class="ion-ios-close-empty"></i>
35-
</span>
36-
</div>
37-
<div v-else class="cly-vue-drawer__title-container bu-is-flex bu-is-justify-content-space-between">
38-
<h3 :data-test-id="testId + '-header-title'" class="cly-vue-drawer__title-header">{{title}}</h3>
39-
<span :data-test-id="testId + '-close-button'" class="cly-vue-drawer__close-button" v-on:click="doClose">
40-
<i class="ion-ios-close-empty"></i>
23+
<div
24+
v-if="currentScreenMode !== 'full'"
25+
class="cly-vue-drawer__title-container bu-is-flex bu-is-justify-content-space-between"
26+
:class="{ 'bu-is-align-items-center': !hasBackLink }"
27+
>
28+
<a
29+
v-if="hasBackLink"
30+
:data-test-id="testId + '-drawer-back-link'"
31+
style="cursor: pointer;"
32+
@click="doClose"
33+
>
34+
<span class="text-medium bu-is-capitalized">
35+
<i class="fas fa-arrow-left bu-pr-3" />
36+
{{ i18n('plugins.back') }}
4137
</span>
38+
</a>
39+
<h3
40+
class="cly-vue-drawer__title-header"
41+
:data-test-id="testId + '-header-title'"
42+
:style="hasBackLink.style"
43+
>
44+
{{ title }}
45+
</h3>
46+
<div
47+
class="cly-vue-drawer__close-button"
48+
:data-test-id="testId + '-close-button'"
49+
@click="doClose"
50+
>
51+
<i class="ion-ios-close-empty" />
4252
</div>
4353
</div>
4454
<div v-if="isMultiStep" class="bu-columns bu-is-gapless bu-is-mobile cly-vue-drawer__subtitle">
@@ -51,7 +61,7 @@ <h3 :data-test-id="testId + '-header-title'" class="cly-vue-drawer__title-header
5161
<span class="index text-small" :data-test-id="testId + '-current-step-index-' + (i + 1)" :class="{'color-white': i === currentStepIndex}">{{i + 1}}</span>
5262
<span class="done-icon text-small color-white bu-pt-0" :data-test-id="testId + '-current-step-index-img-container' + (i + 1)">
5363
<img :data-test-id="testId + '-step-' + (i + 1)" src="images/icons/check-icon.svg">
54-
</span>
64+
</span>
5565
</div>
5666
<div :data-test-id="testId + '-' + (currentContent && currentContent.name ? currentContent.name.toLowerCase().replace(/[\s&]+/g, '-') + '-label' : 'content-label')" class="cly-vue-drawer__step-title text-small font-weight-bold color-cool-gray-40">{{currentContent.name}}</div>
5767
</div>
@@ -100,4 +110,4 @@ <h3>{{title}}</h3>
100110
</div>
101111
</div>
102112
</div>
103-
</transition>
113+
</transition>

‎frontend/express/public/stylesheets/vue/clyvue.scss‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1809,31 +1809,29 @@
18091809
box-sizing: border-box;
18101810
}
18111811

1812+
// .cly-vue-drawer__title-container
18121813
&__title-container {
1813-
width: 100%;
1814-
margin-bottom: 24px;
1815-
}
1816-
1817-
&__title-header {
1818-
margin-top: 24px;
1819-
margin-left: 32px;
1814+
margin: 24px 32px;
18201815
}
18211816

18221817
&__subtitle {
18231818
margin-left: 32px !important;
18241819
margin-bottom: 24px !important;
18251820
}
18261821

1822+
// .cly-vue-drawer__close-button
18271823
&__close-button {
1824+
display: flex;
1825+
align-items: center;
1826+
justify-content: center;
1827+
18281828
font-size: 30px;
18291829
color: #81868D;
18301830
transition: color 1s;
18311831
cursor: pointer;
1832-
//width: 30px;
1833-
height: 15px;
1834-
//margin-block: auto;
1835-
margin-right: 32px;
1836-
margin-top: 24px;
1832+
height: 20px;
1833+
1834+
// .cly-vue-drawer__close-button:hover
18371835
&:hover {
18381836
color: #333;
18391837
transition: color 1s;
@@ -4189,4 +4187,4 @@
41894187
position: unset;
41904188
top:0;
41914189
}
4192-
}
4190+
}

0 commit comments

Comments
 (0)