Skip to content

test options for custom icons and labels #4981

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
haroun merged 5 commits into from
Jul 7, 2025
Merged

test options for custom icons and labels #4981

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
32b2f44
test options for custom icons and labels
haroun Jun 13, 2025
93c0634
add checkbox help
haroun Jun 16, 2025
bc61229
fix choice label text position
haroun Jun 17, 2025
4ab562f
update changelog
haroun Jun 26, 2025
2f7b7a2
Merge branch 'main' into pro-7647-custom-meta-icon
haroun Jul 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
### Adds

* Adds keyboard shortcuts for manipulating widgets in areas. Includes Cut, Copy, Paste, Delete, and Duplicate.
* Automatic translation now supports a disclaimer and an help text for the checkbox. You can now set the disclaimer by setting `automaticTranslationDisclaimer` `i18n` key and the help text by setting `automaticTranslationCheckboxHelp` `i18n` key.

### Changes

Expand Down
2 changes: 2 additions & 0 deletions modules/@apostrophecms/i18n/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@
"at": "at",
"attachment": "Attachment",
"automaticTranslationCheckbox": "Translate text content",
"automaticTranslationCheckboxHelp": "",
"automaticTranslationDisclaimer": "",
"automaticTranslationErrMsg": "An error happened while getting available languages for translation. Translation will be skipped.",
"automaticTranslationErrorNoProvider": "Translation provider not found. Page \"{{ title }}\" was not translated.",
"automaticTranslationErrorTargets": "Badly formatted translation targets.",
Expand Down
12 changes: 10 additions & 2 deletions modules/@apostrophecms/i18n/ui/apos/components/AposI18nLocalize.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,12 +231,19 @@
{{ $t('apostrophe:automaticTranslationSettings') }}
</span>
</p>
<p
v-if="automaticTranslationDisclaimer"
class="apos-wizard__translation-disclaimer"
>
{{ automaticTranslationDisclaimer }}
</p>
<AposCheckbox
v-model="wizard.values.translateContent.data"
:field="{ name: 'translate' }"
:choice="{
value: wizard.values.translateContent.data,
label: $t('apostrophe:automaticTranslationCheckbox')
label: $t('apostrophe:automaticTranslationCheckbox'),
htmlHelp: $t('apostrophe:automaticTranslationCheckboxHelp')

@myovchev myovchev Jun 18, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we sure that i18n is not encoding HTML?

@haroun haroun Jun 26, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do it already and it seems to work, for example i18n/en.json#54

}"
data-apos-test="localizationTranslationCheck"
/>
Expand Down Expand Up @@ -449,7 +456,8 @@ export default {
translationEnabled: apos.modules['@apostrophecms/translation'].enabled,
translationErrMsg: null,
translationShowRetry: false,
translationShowLoader: false
translationShowLoader: false,
automaticTranslationDisclaimer: this.$t('apostrophe:automaticTranslationDisclaimer')
};
},
computed: {
Expand Down
2 changes: 1 addition & 1 deletion modules/@apostrophecms/submitted-draft/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ module.exports = {
},
modal: {
default: {
'@apostrophecms/command-menu:taskbar-manager': {
'@apostrophecms/command-menu:taskbar': {
label: 'apostrophe:commandMenuTaskbar',
commands: [
`${self.__meta.name}:taskbar-manager`
Expand Down
34 changes: 29 additions & 5 deletions modules/@apostrophecms/ui/ui/apos/components/AposCheckbox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,21 @@
:size="10"
/>
</span>
<span
<div
v-if="choice.label"
:class="{'apos-sr-only': field.hideLabel }"
class="apos-choice-label-text"
>
{{ $t(choice.label) }}
</span>
<span>
{{ $t(choice.label) }}
</span>
<!-- eslint-disable vue/no-v-html -->
<p
v-if="(choice.help || choice.htmlHelp)"
class="apos-choice-label-text--help apos-field__help"
v-html="$t(choice.help || choice.htmlHelp)"

@myovchev myovchev Jun 18, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choice help should not be rendered as HTML unlike htmlHelp. I think you need two separate entries and checks for this render.

@haroun haroun Jun 26, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code was carried over from AposInputWrapper.vue#105.

/>
</div>
</label>
</template>

Expand Down Expand Up @@ -104,7 +112,23 @@ export default {
</script>

<style lang="scss" scoped>
.apos-input-indicator {
border-radius: 3px;
.apos-input-indicator {
border-radius: 3px;
}

.apos-choice-label-text {
display: inline-flex;
flex-direction: column;
align-items: baseline;
}

.apos-field__help {
@include type-base;

& {
margin: 0 0 $spacing-base;
line-height: var(--a-line-tall);
color: var(--a-base-3);
}
}
</style>