Skip to content

Commit d5f7b61

Browse files
AlexVelezLlAlexVelezLl
committed
Match styles to figma designs
1 parent 313534e commit d5f7b61

2 files changed

Lines changed: 107 additions & 73 deletions

File tree

‎contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue‎

Lines changed: 85 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -8,75 +8,72 @@
88
@closePanel="onClose"
99
>
1010
<template #header>
11-
<h1 style="margin: 0">{{ getPanelTitle() }}</h1>
11+
<h1 class="side-panel-title">{{ getPanelTitle() }}</h1>
1212
</template>
1313

1414
<template #default>
15-
<div class="form-section">
15+
<div>
1616
<KRadioButtonGroup>
1717
<KRadioButton
1818
:label="modeLive$()"
1919
:buttonValue="PublishModes.LIVE"
2020
:currentValue="mode"
21+
:description="modeLiveDescription$()"
2122
@input="mode = PublishModes.LIVE"
2223
/>
23-
<div
24-
class="radio-description"
25-
:style="{ color: $themeTokens.annotation }"
26-
>
27-
{{ modeLiveDescription$() }}
28-
</div>
2924

3025
<!-- Live mode content nested under the radio button -->
3126
<div
3227
v-if="mode === PublishModes.LIVE"
3328
class="live-mode-content"
3429
style="margin-top: 16px; margin-left: 24px"
3530
>
36-
<div
37-
class="info-section"
38-
:style="{
39-
backgroundColor: $themeTokens.surface,
40-
border: `1px solid ${$themeTokens.outline}`,
41-
}"
42-
>
31+
<div class="live-publish-info">
4332
<KIcon
44-
icon="info"
45-
:color="$themeTokens.primary"
33+
class="info-icon"
34+
icon="infoOutline"
4635
/>
47-
<span>{{
48-
publishingInfo$({
49-
version: currentChannel.version + 1,
50-
})
51-
}}</span>
52-
</div>
36+
<div class="version-notes-wrapper">
37+
<div class="version-info">
38+
{{
39+
publishingInfo$({
40+
version: currentChannel.version + 1,
41+
})
42+
}}
43+
</div>
5344

54-
<div class="form-section">
55-
<KTextbox
56-
v-model="version_notes"
57-
:label="versionNotesLabel$()"
58-
:invalid="version_notes.length === 0"
59-
:invalidText="'Version notes are required'"
60-
:showInvalidText="showVersionNotesInvalidText"
61-
textArea
62-
:maxlength="250"
63-
@blur="onVersionNotesBlur"
64-
/>
65-
</div>
45+
<div class="version-notes-description">
46+
{{ versionNotesLabel$() }}
47+
</div>
6648

67-
<!-- Language selector -->
68-
<div
69-
v-if="showLanguageDropdown"
70-
class="form-section"
71-
>
72-
<KSelect
73-
v-model="language"
74-
:label="languageLabel$()"
75-
:invalid="showLanguageInvalidText"
76-
:invalidText="languageRequiredMessage$()"
77-
:options="languages"
78-
@change="onLanguageChange"
79-
/>
49+
<div class="form-section">
50+
<KTextbox
51+
v-model="version_notes"
52+
:label="versionDescriptionLabel$()"
53+
:invalid="version_notes.length === 0"
54+
:invalidText="'Version notes are required'"
55+
:showInvalidText="showVersionNotesInvalidText"
56+
textArea
57+
:maxlength="250"
58+
:appearanceOverrides="{ maxWidth: 'none' }"
59+
@blur="onVersionNotesBlur"
60+
/>
61+
</div>
62+
<!-- Language selector -->
63+
<div
64+
v-if="showLanguageDropdown"
65+
class="form-section"
66+
>
67+
<KSelect
68+
v-model="language"
69+
:label="languageLabel$()"
70+
:invalid="showLanguageInvalidText"
71+
:invalidText="languageRequiredMessage$()"
72+
:options="languages"
73+
@change="onLanguageChange"
74+
/>
75+
</div>
76+
</div>
8077
</div>
8178

8279
<div
@@ -92,6 +89,7 @@
9289
>
9390
<KIcon
9491
icon="warning"
92+
style="font-size: 20px"
9593
:color="$themePalette.yellow.v_500"
9694
/>
9795
<div class="warning-text">
@@ -103,13 +101,16 @@
103101
</div>
104102
<div
105103
class="warning-description"
106-
:style="{ color: $themeTokens.annotation }"
104+
:style="{ color: $themePalette.grey.v_800 }"
107105
>
108106
{{ incompleteResourcesDescription1$() }}
109107
</div>
110108
<div
111109
class="warning-description"
112-
:style="{ color: $themeTokens.annotation }"
110+
:style="{
111+
color: $themePalette.grey.v_800,
112+
marginTop: '16px',
113+
}"
113114
>
114115
{{ incompleteResourcesDescription2$() }}
115116
</div>
@@ -122,24 +123,16 @@
122123
:label="modeDraft$()"
123124
:buttonValue="PublishModes.DRAFT"
124125
:currentValue="mode"
126+
:description="modeDraftDescription$()"
125127
@input="mode = PublishModes.DRAFT"
126128
/>
127-
<div
128-
class="radio-description"
129-
:style="{ color: $themeTokens.annotation }"
130-
>
131-
{{ modeDraftDescription$() }}
132-
</div>
133129
</KRadioButtonGroup>
134130
</div>
135131
</template>
136132

137133
<template #bottomNavigation>
138134
<div class="footer">
139-
<KButton
140-
appearance="flat-button"
141-
@click="onClose"
142-
>
135+
<KButton @click="onClose">
143136
{{ cancelAction$() }}
144137
</KButton>
145138
<KButton
@@ -196,14 +189,15 @@
196189
197190
const {
198191
publishChannel$,
199-
publishLive$,
192+
publishAction$,
200193
saveDraft$,
201194
modeLive$,
202195
modeDraft$,
203196
versionNotesLabel$,
204197
modeLiveDescription$,
205198
modeDraftDescription$,
206199
publishingInfo$,
200+
versionDescriptionLabel$,
207201
incompleteResourcesWarning$,
208202
incompleteResourcesDescription1$,
209203
incompleteResourcesDescription2$,
@@ -263,7 +257,7 @@
263257
});
264258
265259
const submitText = computed(() => {
266-
return mode.value === PublishModes.DRAFT ? saveDraft$() : publishLive$();
260+
return mode.value === PublishModes.DRAFT ? saveDraft$() : publishAction$();
267261
});
268262
269263
const filterLanguages = filterFn => {
@@ -392,6 +386,7 @@
392386
modeLiveDescription$,
393387
modeDraftDescription$,
394388
publishingInfo$,
389+
versionDescriptionLabel$,
395390
incompleteResourcesWarning$,
396391
incompleteResourcesDescription1$,
397392
incompleteResourcesDescription2$,
@@ -413,7 +408,33 @@
413408
</script>
414409
415410
416-
<style scoped>
411+
<style scoped lang="scss">
412+
413+
.side-panel-title {
414+
margin: 0;
415+
font-size: 20px;
416+
}
417+
418+
.live-publish-info {
419+
display: flex;
420+
gap: 8px;
421+
422+
.info-icon {
423+
font-size: 20px;
424+
}
425+
426+
.version-notes-wrapper {
427+
width: 100%;
428+
429+
.version-info {
430+
margin-top: 2px;
431+
}
432+
433+
.version-notes-description {
434+
margin-top: 8px;
435+
}
436+
}
437+
}
417438
418439
.form-section {
419440
margin: 16px 0;
@@ -427,15 +448,9 @@
427448
428449
.footer {
429450
display: flex;
430-
gap: 8px;
451+
gap: 16px;
431452
justify-content: flex-end;
432453
width: 100%;
433-
padding: 12px 0;
434-
}
435-
436-
.radio-description {
437-
margin-bottom: 16px;
438-
margin-left: 24px;
439454
}
440455
441456
.info-section {

‎contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,50 +4,69 @@ export const communityChannelsStrings = createTranslator('CommunityChannelsStrin
44
// Publishing panel strings
55
publishChannel: {
66
message: 'Publish channel',
7+
context: 'The title of the panel to publish a channel',
78
},
8-
publishLive: {
9+
publishAction: {
910
message: 'Publish',
11+
context: 'The action button to publish a channel',
1012
},
1113
saveDraft: {
1214
message: 'Save draft',
15+
context: 'The action button to save a channel as a draft',
1316
},
1417
modeLive: {
1518
message: 'Live',
19+
context: 'Label to select live publishing mode',
1620
},
1721
modeDraft: {
1822
message: 'Draft (staging)',
23+
context: 'Label to select draft publishing mode',
1924
},
2025
versionNotesLabel: {
2126
message: "Describe what's new in this channel version",
27+
context: 'Label for the version notes text area',
28+
},
29+
versionDescriptionLabel: {
30+
message: 'Version description',
31+
context: 'Label for the version description text area',
2232
},
2333
modeLiveDescription: {
2434
message: 'This edition will be accessible to the public through the Kolibri public library.',
35+
context: 'Description for the live publishing mode',
2536
},
2637
modeDraftDescription: {
2738
message:
2839
'Your channel will be saved as a draft, allowing you to review or conduct quality checks without altering the published version on Kolibri public library.',
40+
context: 'Description for the draft publishing mode',
2941
},
3042
publishingInfo: {
3143
message: "You're publishing: Version {version}",
44+
context: 'Information about the version being published',
3245
},
3346
incompleteResourcesWarning: {
3447
message:
35-
'{count, number} {count, plural, one {incomplete resource} other {incomplete resources}}.',
48+
'{count, number} {count, plural, one {incomplete resource} other {incomplete resources}}',
49+
context: 'Warning about incomplete resources',
3650
},
3751
incompleteResourcesDescription1: {
3852
message:
3953
'Incomplete resources will not be published and made available for download in Kolibri.',
54+
context: 'Description for incomplete resources',
4055
},
4156
incompleteResourcesDescription2: {
4257
message: "Click 'Publish' to confirm that you would like to publish anyway.",
58+
context: 'Confirmation message for publishing incomplete resources',
4359
},
4460
cancelAction: {
45-
message: 'CANCEL',
61+
message: 'Cancel',
62+
context: 'The action button to cancel an ongoing operation',
4663
},
4764
languageLabel: {
4865
message: 'Language',
66+
context: 'Label for the language selection dropdown',
4967
},
5068
languageRequiredMessage: {
5169
message: 'Language is required',
70+
context: 'Error message when language selection is required',
5271
},
5372
});

0 commit comments

Comments
 (0)