Guided Processes - Check the "Add Process Form" & "Edit Process Form"

[Leo-Moertenhuber]

Hi @GiuseppeCSI - below is a list of my proposed updates

updates for "Add Process Form":

• please remove the gray background of the upper part of the form, the gray background should only indicate the input fields for the text
• number of possible characters moved above the input filed instead of below (for the process name and description)
• Text Formatting options moved below the input filed (description)
• please make sure that all input fields have the same width
• "translation bar" moved to the lower right side of the input field (description)
• the language selection moved to the lower end of the form (my thought is that the whole form should be filled and only then people can change the language)
• the "upload image icon" has now a separate input field (I feel it doesn´t fit with the text formatting options)
• "generated documents" has currently one row for itself, but with the newly added "image upload I think we can save some space if we have both "generated documents" and the "image Upload" in one row exactly like "User Tags" and "User Topics" -please have the "Comments" start at the same place as the rest of the form - at the moment it's too far left compared to the others)

updates for the "Edit Process Form":

• basically the same changes as above regarding the layout of the form
• at the moment inside every text field there is the title of the input field + the name actual name of the title. Please remove the duplicated title inside the field
• if possible turn the green publish indicator to an orange version

https://www.figma.com/file/i2iikyHbwCfngbNETXqHPK/MICADO-Migrant-APP---look-%26-feel?node-id=78%3A20

if anything is unclear let me know

[Leo-Moertenhuber]

Hi Giuseppe, just a small update / probably a correction.

I think I was maybe to quick to update the figma file regarding the seperated image upload button - I initially thought the images will be separated from the text but as I understand it now this isn´t the case, and the images will be included in the text. Ivan left me a comment since I proposed the same idea for the information centre.

basically don´t hurry with the implementation as I think it´s likely that we keep the image upload button with the text formatting options. I will leave another comment when we have a final decision.

Sorry for the back on forth with the feedback

[gi-dorio]

I implemented most of the minor changes, except for two:

1. number of possible characters on top: the characters counter is built-in in the input quasar component and it seems that its position cannot be decided. I will look more into it, but if not possible i wouldn't suggest adding new code to create a separate counter only to put it on top; 2.Text Formatting options moved below the input field (description): this requires a little change in the glossary editor component, so i would ask @ivchicano for help on this.

[ivchicano]

I will move the menu bar for options below the input field while fixing #88

[ivchicano]

I have moved the bar to the bottom side of the editor. Also I added a slot option to add the translate state button to the right. You can find it used in the EditElement component like in the following snippet:

<glossary-editor
  class="desc-editor q-mb-xl"
  data-cy="description_input"
  v-model="internalDescription"
  :maxCharLimit="description_max_length"
  ref="editor"
>
  <translate-state-button
    v-model="selectedTranslationState"
    :isForDefaultLanguage="langTab===$defaultLang"
    :objectId="elemId"
    :readonly="!(langTab===$defaultLang)"
    @micado-change="(a) => {selectedTranslationState = a.state}"
    class="q-my-sm"
  />
</glossary-editor>

[gioppoluca]

I have moved the bar to the bottom side of the editor. Also I added a slot option to add the translate state button to the right. You can find it used in the EditElement component like in the following snippet:

<glossary-editor
  class="desc-editor q-mb-xl"
  data-cy="description_input"
  v-model="internalDescription"
  :maxCharLimit="description_max_length"
  ref="editor"
>
  <translate-state-button
    v-model="selectedTranslationState"
    :isForDefaultLanguage="langTab===$defaultLang"
    :objectId="elemId"
    :readonly="!(langTab===$defaultLang)"
    @micado-change="(a) => {selectedTranslationState = a.state}"
    class="q-my-sm"
  />
</glossary-editor>

Mind that the translation state button is a single instance for the whole form so the slot che be good if only a the glossary is present but if there is more than one field the translationstate button has to be placed in the tabbed card. Also the tabbed card MUST contain only the translated content and NOT other fields like numeric one that are not part of the translation tables

[gioppoluca]

I implemented most of the minor changes, except for two:

1. number of possible characters on top: the characters counter is built-in in the input quasar component and it seems that its position cannot be decided. I will look more into it, but if not possible i wouldn't suggest adding new code to create a separate counter only to put it on top; 2.Text Formatting options moved below the input field (description): this requires a little change in the glossary editor component, so i would ask @ivchicano for help on this.

@Leo-Moertenhuber and @GiuseppeCSI please remember that when we have a QUASAR field that offer a feature we MUST adapt our design to be able to use that feature and we WILL NEVER change the provided functionality for a custom hack. In these cases design MUST find a compromise to ease development work. Plese apply this approach to all similar cases.

[Leo-Moertenhuber]

Alright - I am sorry if I proposed some custom changes. In this case please always tell me if future suggestions are not possible within the Quasar framework (sadly I have no real experience working with quasar so it's sometimes difficult for me to know which designs are going too far)

[Leo-Moertenhuber]

I think this should be my last update/ feedback for the guided processes forms:

• please move the "Word count" to the left below the label and have it in Nunito 400/14px (currently at 600/15px)
• currently when entering text in the description filed it is centered -> please have it left-justified
• if possible please have the translation bar on the same height as the text formatting options
• all labels should have 16px font size with Nunito 600

attaching this screenshot for an easier understanding

[ivchicano]

I have moved the bar to the bottom side of the editor. Also I added a slot option to add the translate state button to the right. You can find it used in the EditElement component like in the following snippet:

<glossary-editor
  class="desc-editor q-mb-xl"
  data-cy="description_input"
  v-model="internalDescription"
  :maxCharLimit="description_max_length"
  ref="editor"
>
  <translate-state-button
    v-model="selectedTranslationState"
    :isForDefaultLanguage="langTab===$defaultLang"
    :objectId="elemId"
    :readonly="!(langTab===$defaultLang)"
    @micado-change="(a) => {selectedTranslationState = a.state}"
    class="q-my-sm"
  />
</glossary-editor>

Mind that the translation state button is a single instance for the whole form so the slot che be good if only a the glossary is present but if there is more than one field the translationstate button has to be placed in the tabbed card. Also the tabbed card MUST contain only the translated content and NOT other fields like numeric one that are not part of the translation tables

Then what do you think of separating the editor from the styles menu into different components so that you can use inline styling or flex with the translation state button?

[gi-dorio]

Except for the translation button issue, the rest is done. We could close this if we decide to leave the translation button as it is.