apostrophecms / apostrophecms/docs

[DOCS ISSUE] Page: Customizing the user interface

Open
#198 2 comments 0 reactions 0 assignees View on GitHub
enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.