apostrophecms / apostrophecms/docs
[DOCS ISSUE] Page: Customizing the user interface
- Dominant language
- JavaScript
- Stars
- 6
- Forks
- 18
- Avg merge
- 5d 7h
- Merged PRs (30d)
- 4
Description
Sorry for troubling again, i was looking to make the editor interface more user friendly and i have managed to do it like that:
```
// modules/asset/ui/src/scss/_widgets.scss -> follows the structure from the A3-Boilerplate from the tutorial
/// more styles rules
.apos-area-widget-wrapper {
.apos-area-widget-inner {
.apos-area-widget-controls {
opacity: 0.3;
&.apos-is-visible {
opacity: 1;
}
}
}
}
.apos-button-group--vertical .apos-button-group__inner {
flex-direction: row !important;
}
/// more styles rules
```
But looking at the next info i'm not sure if i can do it in other way for also add new icons/buttons to the editor modal:
1. [Customizing the user interface](https://v3.docs.apostrophecms.org/guide/custom-ui.html#customizing-the-user-interface)
2. [Overriding standard Vue.js components through configuration](https://v3.docs.apostrophecms.org/guide/custom-ui.html#overriding-standard-vue-js-components-through-configuration)
3. [Custom schema field types](https://v3.docs.apostrophecms.org/guide/custom-schema-field-types.html#custom-schema-field-types)
There is any info about things like those?:
- Add a new option to the pieces list modal that allow publish/duplicate multiple selection.
- Add a new button to any widget editor modal (like the move up/down for contextual editing).
- Modify the widget modal for add tabs with the groups like the pieces.
I have taken a look to the source code from rich-text, image and others but i am not sure enough about where i can modify/add those kinds of things and when is recommended to work with vue.
Contributor guide
Assessment
This issue has not been assessed yet.