[DOCS ISSUE] Page: Customizing the user interface

[bmpj1]

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
2. Overriding standard Vue.js components through configuration
3. 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.

[boutell]

Hi @bmpj1 it's fair to say we don't have specific documentation on those particular types of extension yet. Labeling as enhancement.

[bmpj1]

Thanks, i'm trying to learn how to edit the vue components from apos and how does apos work with vue on apos.schema for add new custom fields extending the base ones with schema.addFieldType and apos.widgetType for how to use the vue components with that data (i followed the star rating but can't see the field on the editor modal but it appears when doing apos.util.log with a default value), still learning