Skip to content

Commit

Permalink
feat: Remove subtitle from node name when edit mode - MEED-6833 - Mee…
Browse files Browse the repository at this point in the history 
…ds-io/MIPs#137 (#134)

This PR reviews the UI/UX when adding or editing a node from the site navigation drawer.
  • Loading branch information
@SaraBoutej
SaraBoutej committed Jul 9, 2024
1 parent 53ddf77 commit 05d5c1d
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 118 deletions.
3 changes: 3 additions & 0 deletions layout-webapp/src/main/resources/locale/portlet/SiteNavigation_en.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,12 @@ siteNavigation.label.moveDown=Move down
siteNavigation.drawer.addNode.title=Add node
siteNavigation.drawer.editNode.title=Edit node
siteNavigation.label.nodeLabel.title=Node Label
siteNavigation.label.nodeLabel.placeholder=Give a name to your item
siteNavigation.label.nodeLabel.description=The node name is also the page name
siteNavigation.label.nodeId.title=Node name
siteNavigation.label.nodeId.placeholder=Enter an ID that will be reminded in the URL
siteNavigation.label.icon.title=Node's icon
siteNavigation.label.icon.upload=Upload
siteNavigation.label.icon.description=The image is displayed with the node label in the platform's left navigation menu
siteNavigation.btn.deleteIcon.title=Delete Icon
siteNavigation.btn.changeIcon.title=Change Icon
Expand Down
22 changes: 11 additions & 11 deletions ...bapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationDrawer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,17 @@
color="white"
flat
dense>
<span
class="font-weight-bold">
{{ siteName }}
</span>
<v-spacer v-if="!$refs.siteNavigationDrawer?.expand" />
<v-btn
v-if="isMetaSite"
@click="createNode"
class="btn btn-primary ms-2">
{{ $t('siteNavigation.label.btn.createNode') }}
</v-btn>
<span
class="font-weight-bold">
{{ siteName }}
</span>
<v-spacer v-if="!$refs.siteNavigationDrawer?.expand" />
<v-btn
v-if="isMetaSite"
@click="createNode"
class="btn btn-primary ms-2">
{{ $t('siteNavigation.label.btn.createNode') }}
</v-btn>
<v-spacer v-if="$refs.siteNavigationDrawer?.expand" />
<select
id="siteNavigationDrawerFilterSelect"
Expand Down
192 changes: 85 additions & 107 deletions .../vue-app/common-layout-components/components/site-navigation/SiteNavigationNodeDrawer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,8 @@
<v-card-text class="d-flex pb-2">
<v-label>
<span class="text-color font-weight-bold text-start text-truncate-2">
{{ $t('siteNavigation.label.nodeLabel.title') }} *
{{ $t('siteNavigation.label.nodeLabel.title') }}
</span>
<p class="caption">{{ $t('siteNavigation.label.nodeLabel.description') }} </p>
</v-label>
</v-card-text>
<v-card-text class="d-flex py-0">
Expand All @@ -55,6 +54,7 @@
type="text"
required="required"
:rules="[nodeLabelRules.required]"
:placeholder="$t('siteNavigation.label.nodeLabel.placeholder')"
outlined
dense
@blur="blurOnNodeLabel">
Expand All @@ -68,124 +68,38 @@
</template>
</v-text-field>
</v-card-text>
<v-card-text class="d-flex flex-grow-1 pb-2">
<v-label>
<span class="text-color font-weight-bold text-start mr-6 text-truncate-2">
{{ $t('siteNavigation.label.nodeId.title') }} *
</span>
<p
v-if="nodeId && nodeId.length"
class="caption text-break mx-auto text-wrap text-left">
{{ nodeUrl }}
</p>
</v-label>
<v-card-text class="py-2">
<div class="d-flex align-center justify-space-between">
<div>
<span class="text-color font-weight-bold text-start mr-6 text-truncate-2 v-label">
{{ $t('siteNavigation.label.nodeId.title') }}
</span>
</div>
<v-switch
v-model="displayNodeName"
class="mt-0 me-0" />
</div>
</v-card-text>
<v-card-text class="d-flex py-0">
<v-card-text v-if="displayNodeName" class="d-flex pt-0">
<v-text-field
v-model="nodeId"
class="pt-0"
type="text"
required="required"
:rules="nodeIdRules"
:disabled="disableNodeId"
:placeholder="$t('siteNavigation.label.nodeId.placeholder')"
outlined
dense />
</v-card-text>
<v-card-text class="d-flex flex-grow-1 pb-2">
<v-label>
<span class="text-color font-weight-bold text-start mr-6 text-truncate-2">
{{ $t('siteNavigation.label.icon.title') }}
</span>
<p class="caption"> {{ $t('siteNavigation.label.icon.description') }} </p>
</v-label>
</v-card-text>
<v-card-text class="d-flex py-0 pb-8">
<div
class="d-flex flex-grow-1 full-width">
<div class="me-2 ms-auto">
<v-tooltip bottom>
<template #activator="{ on, attrs }">
<v-btn
v-on="on"
v-bind="attrs"
id="changeIconButton"
class="light-black-background border-color"
icon
outlined
dark
small
@click="openNodeIconPickerDrawer">
<v-icon size="13">fas fa-file-image</v-icon>
</v-btn>
</template>
<span>{{ $t('siteNavigation.btn.changeIcon.title') }}</span>
</v-tooltip>
</div>
</div>
</v-card-text>
<v-card-text class="flex-grow-1 align-center pb-8">
<v-icon
size="32"
color="black">
{{ icon }}
</v-icon>
</v-card-text>
<v-card-text class="d-flex flex-grow-1 pb-2">
<v-label>
<span class="text-color font-weight-bold pt-2">
{{ $t('siteNavigation.label.visibility.title') }}
</span>
</v-label>
<v-tooltip bottom>
<template #activator="{ on, attrs }">
<v-icon
v-on="on"
v-bind="attrs"
color="black"
size="24"
class="pl-2">
fa-info-circle
</v-icon>
</template>
<span>{{ $t('siteNavigation.label.visibility.info') }}</span>
</v-tooltip>
</v-card-text>
<v-card-text>
<div class="d-flex flex-row">
<v-switch
v-model="visible"
class="mt-0 me-1" />
<span class="caption pt-1">
{{ $t('siteNavigation.label.visibility.visible') }}
</span>
</div>
<div
class="d-flex flex-row"
v-if="visible">
<v-switch
v-model="isScheduled"
class="mt-0 me-1" />
<span class="caption pt-1">
{{ $t('siteNavigation.label.visibility.scheduleVisibility') }}
</span>
</div>
</v-card-text>
<v-card-text class="pt-0" v-if="visible && isScheduled">
<site-navigation-schedule-date-pickers
:start-schedule-date="startScheduleDate"
:end-schedule-date="endScheduleDate"
:start-schedule-time="startScheduleTime"
:end-schedule-time="endScheduleTime"
@change="updateDates" />
</v-card-text>
<v-card-text class="d-flex flex-grow-1 text-no-wrap text-left font-weight-bold pb-2">
<v-label>
<span class="text-color font-weight-bold">
{{ $t('siteNavigation.label.nodeType.title') }}
</span>
</v-label>
</v-card-text>
<v-card-text class="d-flex flex-row">
<v-card-text class="d-flex flex-row pt-0">
<div class="d-flex flex-column">
<v-radio-group
v-model="nodeType"
Expand Down Expand Up @@ -218,6 +132,72 @@
</v-radio-group>
</div>
</v-card-text>
<v-card-text class="d-flex flex-grow-1 pb-2 pt-0">
<v-label>
<span class="text-color font-weight-bold text-start mr-6 text-truncate-2">
{{ $t('siteNavigation.label.icon.title') }}
</span>
</v-label>
</v-card-text>
<v-card-text class="d-flex pt-2">
<div
class="d-flex flex-grow-1 full-width">
<v-icon
size="32"
class="icon-default-color">
{{ icon }}
</v-icon>
<v-tooltip bottom>
<template #activator="{ on, attrs }">
<v-btn
v-on="on"
v-bind="attrs"
id="changeIconButton"
class="btn btn-primary ms-3"
outlined
@click="openNodeIconPickerDrawer">
<span>{{ $t('siteNavigation.label.icon.upload') }}</span>
</v-btn>
</template>
<span>{{ $t('siteNavigation.btn.changeIcon.title') }}</span>
</v-tooltip>
</div>
</v-card-text>
<v-card-text class="d-flex flex-grow-1 pb-0">
<v-label>
<span class="text-color font-weight-bold pt-2">
{{ $t('siteNavigation.label.visibility.title') }}
</span>
</v-label>
</v-card-text>
<v-card-text class="pt-2">
<div class="d-flex align-center justify-space-between flex-row">
<span class="caption">
{{ $t('siteNavigation.label.visibility.visible') }}
</span>
<v-switch
v-model="visible"
class="mt-0 me-0" />
</div>
<div
class="d-flex align-center justify-space-between flex-row"
v-if="visible">
<span class="caption pt-1">
{{ $t('siteNavigation.label.visibility.scheduleVisibility') }}
</span>
<v-switch
v-model="isScheduled"
class="mt-0 me-0" />
</div>
</v-card-text>
<v-card-text class="pt-0" v-if="visible && isScheduled">
<site-navigation-schedule-date-pickers
:start-schedule-date="startScheduleDate"
:end-schedule-date="endScheduleDate"
:start-schedule-time="startScheduleTime"
:end-schedule-time="endScheduleTime"
@change="updateDates" />
</v-card-text>
</v-form>
</template>
<template slot="footer">
Expand Down Expand Up @@ -276,6 +256,7 @@ export default {
visible: true,
isScheduled: false,
disableNodeId: false,
displayNodeName: false,
nodeType: 'Group',
parentNavigationNodeUrl: '',
editMode: false,
Expand All @@ -300,7 +281,7 @@ export default {
},
computed: {
icon() {
return this.nodeIcon ? this.nodeIcon : 'fas fa-folder';
return this.nodeIcon ? this.nodeIcon : 'fas fa-project-diagram';
},
title() {
return this.editMode ? this.$t('siteNavigation.drawer.editNode.title') : this.$t('siteNavigation.drawer.addNode.title');
Expand All @@ -311,10 +292,6 @@ export default {
displayNextBtn() {
return this.editMode ? this.nodeType === 'pageOrLink' && !this.navigationNode.pageKey : this.nodeType === 'pageOrLink';
},
nodeUrl() {
const nodeuri = `${this.$t('siteNavigation.label.nodeId.description')}${this.parentNavigationNodeUrl}`;
return this.editMode ? nodeuri : `${nodeuri}/${this.nodeId}` ;
}
},
created() {
this.$root.$on('open-site-navigation-add-node-drawer', this.open);
Expand Down Expand Up @@ -365,6 +342,7 @@ export default {
this.nodeLabel = null;
this.visible = true;
this.isScheduled = false;
this.displayNodeName = false;
this.nodeType = 'Group';
this.disableNodeId = false;
this.editMode= false;
Expand Down

0 comments on commit 05d5c1d

Please sign in to comment.