autonomic-cooperative
/
hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: left-menu - icons alignment + feature: circle-edit and -profile

This commit is contained in:
gaelle morin 2021-01-08 23:31:48 +01:00
parent 6d04fc377a
commit dbc5ceea94
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
11 changed files with 71 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@ -8,7 +8,7 @@
"version": "1.0.0", "version": "1.0.0",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@startinblox/hubl-styling-framework": "^1.0.20", "@startinblox/hubl-styling-framework": "^1.0.21",
"fs-extra": "^9.0.1", "fs-extra": "^9.0.1",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"parcel-bundler": "^1.12.4", "parcel-bundler": "^1.12.4",
@ -1442,9 +1442,9 @@
} }
}, },
"node_modules/@startinblox/hubl-styling-framework": { "node_modules/@startinblox/hubl-styling-framework": {
"version": "1.0.20", "version": "1.0.21",
"resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.20.tgz", "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.21.tgz",
"integrity": "sha512-Q9pFi2pzTkNQYHyKKmNJb53ddP2Ldx63HwZgODounK1EQ9CYPD9SJHDhHBT1ueGkde7fljipSXyLdgw54Odz+g==" "integrity": "sha512-LaKWMXwK4LNKgvsuVNLTSlNU2aoUk0VQgjfX0XSSPQskudIe675tS+hVRmCMH2Wtl2/MyWvscyYqX+2//zXnCQ=="
}, },
"node_modules/@types/q": { "node_modules/@types/q": {
"version": "1.5.4", "version": "1.5.4",
@ -10603,9 +10603,9 @@
} }
}, },
"@startinblox/hubl-styling-framework": { "@startinblox/hubl-styling-framework": {
"version": "1.0.20", "version": "1.0.21",
"resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.20.tgz", "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.21.tgz",
"integrity": "sha512-Q9pFi2pzTkNQYHyKKmNJb53ddP2Ldx63HwZgODounK1EQ9CYPD9SJHDhHBT1ueGkde7fljipSXyLdgw54Odz+g==" "integrity": "sha512-LaKWMXwK4LNKgvsuVNLTSlNU2aoUk0VQgjfX0XSSPQskudIe675tS+hVRmCMH2Wtl2/MyWvscyYqX+2//zXnCQ=="
}, },
"@types/q": { "@types/q": {
"version": "1.5.4", "version": "1.5.4",

2
package.json
View File

@ -45,7 +45,7 @@
] ]
}, },
"dependencies": { "dependencies": {
"@startinblox/hubl-styling-framework": "^1.0.20", "@startinblox/hubl-styling-framework": "^1.0.21",
"fs-extra": "^9.0.1", "fs-extra": "^9.0.1",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"parcel-bundler": "^1.12.4", "parcel-bundler": "^1.12.4",

4
src/locales/en.json
View File

@ -80,8 +80,8 @@
"labelStatus": "Circle status", "labelStatus": "Circle status",
"labelName": "Circle name *", "labelName": "Circle name *",
"labelOwner": "Admin *", "labelOwner": "Admin *",
"labelDescription": "Circle headline *", "labelDescription": "Circle headline",
"subTitle": "Members list :", "subTitle": "Members list",
"tableHeader1": "Name", "tableHeader1": "Name",
"tableHeader2": "Access", "tableHeader2": "Access",
"buttonSubmit": "Save", "buttonSubmit": "Save",

4
src/locales/es.json
View File

@ -80,8 +80,8 @@
"labelStatus": "Estado del círculo", "labelStatus": "Estado del círculo",
"labelName": "Nombre del círculo *", "labelName": "Nombre del círculo *",
"labelOwner": "Administrador/a *", "labelOwner": "Administrador/a *",
"labelDescription": "Subtítulo del círculo *", "labelDescription": "Subtítulo del círculo",
"subTitle": "Listado de miembrxs: ", "subTitle": "Listado de miembrxs",
"tableHeader1": "Nombre", "tableHeader1": "Nombre",
"tableHeader2": "Acceso", "tableHeader2": "Acceso",
"buttonSubmit": "Guardar", "buttonSubmit": "Guardar",

4
src/locales/fr.json
View File

@ -80,8 +80,8 @@
"labelStatus": "Statut du cercle", "labelStatus": "Statut du cercle",
"labelName": "Nom du cercle *", "labelName": "Nom du cercle *",
"labelOwner": "Administrateur ou administratrice *", "labelOwner": "Administrateur ou administratrice *",
"labelDescription": "Sous-titre du cercle *", "labelDescription": "Sous-titre du cercle",
"subTitle": "Liste des membres :", "subTitle": "Liste des membres",
"tableHeader1": "Nom", "tableHeader1": "Nom",
"tableHeader2": "Accès", "tableHeader2": "Accès",
"buttonSubmit": "Enregistrer", "buttonSubmit": "Enregistrer",

10
src/styles/index.scss
View File

@ -30,11 +30,21 @@ solid-display>div {
width: 50%; width: 50%;
} }
.w33 {
width: 33.333%;
}
.w66 {
width: 66.666%;
}
.text-left { .text-left {
text-align: left; text-align: left;
} }
@import 'header/_index'; @import 'header/_index';
@import 'left-nav/_index'; @import 'left-nav/_index';
@import 'content/_index'; @import 'content/_index';

10
src/styles/left-nav/_index.scss
View File

@ -31,18 +31,16 @@ nav {
.sub-menu-icon { .sub-menu-icon {
margin-left: 3px; margin-left: 3px;
margin-right: 3px; margin-right: 3px;
margin-top: 1px;
opacity: 0.8; opacity: 0.8;
width: 12px; width: 12px;
>div {
div { line-height: 19px;
font-family: simple-line-icons;
font-size: 12px;
} }
} }
.sub-menu-name { .sub-menu-name {
margin-right: 15px; margin-right: 15px;
vertical-align: middle;
} }
@ -59,9 +57,11 @@ nav {
@media(min-width: 1024px) { @media(min-width: 1024px) {
display: block; display: block;
line-height: 19px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
width: 100%;
} }
} }
} }

2
src/views/partials/admin/page-admin-circles.pug
View File

@ -34,7 +34,7 @@ solid-router(default-route='admin-circle-list', hidden)
div.segment.margin-bottom-medium.clearfix div.segment.margin-bottom-medium.clearfix
div.segment.lg-half.float-left div.segment.lg-half.float-left
h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='circle.list.subTitle') h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='circle.list.subTitle')
div.segment.lg-half.float-left.text-right.padding-top-xxsmall div.segment.lg-half.float-left.text-right.padding-top-xxxsmall.padding-bottom-xxxsmall
solid-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append') solid-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append')
solid-link( solid-link(
class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-plus' class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-plus'

61
src/views/partials/circle/page-circle-edit.pug
View File

@ -1,6 +1,6 @@
solid-ac-checker(permission='acl:Read', bind-resources) solid-ac-checker(permission='acl:Read', bind-resources)
div.segment.padding-large.border-bottom.border-color-grey.clearfix div.segment.lg-full.padding-large.border-bottom.border-color-grey
div.segment.lg-half.float-left div.segment.lg-half
solid-display.text-xxlarge.text-letter-spacing-large( solid-display.text-xxlarge.text-letter-spacing-large(
bind-resources bind-resources
fields='name, dash, description' fields='name, dash, description'
@ -10,10 +10,10 @@ solid-ac-checker(permission='acl:Read', bind-resources)
class-name='text-color-heading text-bold' class-name='text-color-heading text-bold'
class-dash='text-color-heading text-bold' class-dash='text-color-heading text-bold'
) )
div.segment.lg-half.float-left.text-right div.segment.lg-half.text-right
solid-link(class="backlink right", bind-resources, next='circle-profile' data-trans='circle.edit.backlink') solid-link(class="backlink right", bind-resources, next='circle-profile' data-trans='circle.edit.backlink')
div.segment.padding-large div.segment.lg-full.padding-large.whitespace-normal
solid-widget(name="circle-edit-members-delete") solid-widget(name="circle-edit-members-delete")
template template
@ -25,6 +25,9 @@ div.segment.padding-large
data-trans='data-label=circle.edit.buttonDelete' data-trans='data-label=circle.edit.buttonDelete'
) )
solid-widget(name='hubl-circle-edit-admin')
template ${value ? "Administrateur" : ""}
solid-ac-checker(permission='acl:Write', bind-resources) solid-ac-checker(permission='acl:Write', bind-resources)
div#loader-circle-edit.loader.loader-top div#loader-circle-edit.loader.loader-top
div div
@ -32,14 +35,13 @@ div.segment.padding-large
div div
div div
solid-form.segment.clearfix.button-register( solid-form.form(
bind-resources bind-resources
fields='name, description, status, owner' fields='name, description, status, owner'
required-status required-status
required-name required-name
required-owner required-owner
required-description
range-owner=`${endpoints.users || endpoints.get.users}` range-owner=`${endpoints.users || endpoints.get.users}`
label-status='' label-status=''
@ -50,12 +52,11 @@ div.segment.padding-large
label-description='' label-description=''
class-name='segment margin-bottom-medium lg-half padding-right-small text-small text-semibold text-uppercase text-color-heading' class-name='segment margin-bottom-medium lg-half padding-right-small text-small text-semibold text-uppercase text-color-heading'
class-description='segment margin-bottom-medium lg-full text-small text-semibold text-uppercase text-color-heading' class-description='segment margin-bottom-medium lg-half padding-left-small text-small text-semibold text-uppercase text-color-heading'
class-status='segment margin-bottom-medium lg-half padding-right-small text-small text-semibold text-uppercase text-color-heading icon icon-magnify float-left' class-status='segment margin-bottom-medium lg-half padding-right-small text-small text-semibold text-uppercase text-color-heading whitespace-normal'
class-owner='segment margin-bottom-medium lg-half padding-left-small text-small text-semibold text-uppercase text-color-heading float-left' class-owner='segment margin-bottom-medium lg-half padding-left-small text-small text-semibold text-uppercase text-color-heading whitespace-normal'
widget-owner='solid-form-dropdown-autocompletion-label' widget-owner='solid-form-dropdown-autocompletion-label'
widget-description='solid-form-textarea'
partial='' partial=''
@ -65,10 +66,10 @@ div.segment.padding-large
data-trans='label-status=circle.edit.labelStatus;label-name=circle.edit.labelName;label-owner=circle.edit.labelOwner;label-description=circle.edit.labelDescription;submit-button=circle.edit.buttonSubmit' data-trans='label-status=circle.edit.labelStatus;label-name=circle.edit.labelName;label-owner=circle.edit.labelOwner;label-description=circle.edit.labelDescription;submit-button=circle.edit.buttonSubmit'
) )
h3.segment.padding-bottom-small.border-bottom.border-color-grey.text-color-heading.text-bold.text-letter-spacing-large(data-trans='circle.edit.subTitle') h3.segment.lg-full.padding-bottom-small.border-bottom.border-color-grey.text-color-heading.text-bold.text-letter-spacing-large(data-trans='circle.edit.subTitle')
solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members') solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
solid-form.block.segment.margin-bottom-xlarge.clearfix.button-register( solid-form.block.segment.margin-bottom-xlarge.form(
bind-resources bind-resources
nested-field='members' nested-field='members'
fields='user' fields='user'
@ -84,37 +85,39 @@ div.segment.padding-large
.table-wrapper .table-wrapper
.table .table
div.table-header.bg-color-third.text-color-heading div.table-header.bg-color-third.text-color-heading
div.table-cell.w280(data-trans='circle.edit.tableHeader1') div.table-cell.w66(data-trans='circle.edit.tableHeader1')
div.table-cell.w162(data-trans='circle.edit.tableHeader2') div.table-cell.w33(data-trans='circle.edit.tableHeader2')
solid-display( solid-display(
class='table-body' class='table-body'
bind-resources bind-resources
nested-field='members' nested-field='members'
fields='classGroup(classGrid(user.account.picture, content(name-and-icon(user.name, user.groups), sub(atom, user.communities)))), self' fields='cell(segment1(user.account.picture), segment2(line1(user.name, is_admin), line2(atom, user.communities))), self'
loader-id='loader-circle-edit' loader-id='loader-circle-edit'
class-classGroup='table-cell w-280' class-cell='table-cell w66 labelled-avatar two-lines text-left'
class-self='table-cell w-162' class-self='table-cell w33'
class-classGrid='segment margin-left-xlarge user-thumb'
class-user.account.picture='user-thumb-avatar' class-segment1='segment'
class-content='user-thumb-content' class-user.account.picture='avatar'
class-name-and-icon='user-thumb-content__name-and-icon'
class-user.name='name' class-segment2='segment lg-three-quarter margin-left-xsmall'
class-user.groups='tag color-primary' class-line1='block'
class-sub='user-thumb-content__sub-text community' class-user.name='text-semibold text-color-heading text-sub'
class-atom='icon icon-primary mdi-atom' class-is_admin='segment margin-left-medium tag color-primary'
class-line2='block'
class-atom='icon icon-large icon-third mdi-atom margin-right-xxsmall'
class-user.communities='lg-full'
multiple-user.communities multiple-user.communities
multiple-user.communities-fields="community.name" multiple-user.communities-fields="community.name"
widget-user.account.picture='hubl-user-avatar' widget-user.account.picture='hubl-user-avatar'
widget-is_admin='hubl-circle-edit-admin'
multiple-user.groups
multiple-user.groups-fields='name'
action-self='self' action-self='self'
widget-self='circle-edit-members-delete' widget-self='circle-edit-members-delete'
) )
//- Only to show the table grid //- Only to show the table grid
div.table-cell.w162 div.table-cell.w33

4
src/views/partials/circle/page-circle-profile.pug
View File

@ -34,8 +34,6 @@ solid-router(default-route='circle-profile', hidden)
fields='creationDateSet(title, creationDate)' fields='creationDateSet(title, creationDate)'
loader-id='loader-circle-profile' loader-id='loader-circle-profile'
class-title='word-spacing-right'
value-title='' value-title=''
data-trans='value-title=circle.profile.creationDate' data-trans='value-title=circle.profile.creationDate'
@ -96,7 +94,7 @@ solid-router(default-route='circle-profile', hidden)
hubl-inherit-user-id="search-value-user" hubl-inherit-user-id="search-value-user"
) )
h3.text-color-heading.text-bold.text-letter-spacing-large(data-trans='circle.profile.subTitle') h3.text-color-heading.text-bold.text-uppercase.text-letter-spacing-large(data-trans='circle.profile.subTitle')
solid-widget(name='hubl-circle-user-admin') solid-widget(name='hubl-circle-user-admin')
template ${value ? "Administrateur" : ""} template ${value ? "Administrateur" : ""}

14
src/views/partials/menu-left.pug
View File

@ -10,7 +10,9 @@ solid-widget(name='hubl-menu-jabberid')
solid-widget(name='hubl-menu-publicprivate') solid-widget(name='hubl-menu-publicprivate')
template template
div ${value == 'Public' ? '#' : ''} div.text-simple-line-icons(
class="${value == 'Public' ? 'text-large': 'text-xsmall'}"
) ${value == 'Public' ? '#' : ''}
solid-widget(name='hubl-create-contact') solid-widget(name='hubl-create-contact')
template template
@ -50,13 +52,13 @@ solid-widget(name='hubl-menu-fix-url-circle')
solid-display.segment.lg-full.text-color-white.heading-active.bg-color-heading.hover.active( solid-display.segment.lg-full.text-color-white.heading-active.bg-color-heading.hover.active(
data-src='${value}' data-src='${value}'
fields='segment(status, circle(name, jabberID), badge)' fields='segment(status, circle(name, jabberID), badge)'
class-segment="segment lg-full padding-top-xxsmall padding-right-small padding-left-medium" class-segment="segment lg-full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"
class-status='segment text-top sub-menu-icon' class-status='segment text-top sub-menu-icon'
class-circle='segment lg-three-quarter sub-menu-name' class-circle='segment lg-three-quarter sub-menu-name'
class-name='segment ellipsis-content' class-name='ellipsis-content'
class-badge='segment badge' class-badge='segment badge'
@ -74,14 +76,14 @@ solid-widget(name='hubl-menu-fix-url-project')
solid-display.segment.lg-full.text-color-white.heading-active.bg-color-heading.hover.active( solid-display.segment.lg-full.text-color-white.heading-active.bg-color-heading.hover.active(
data-src='${value}' data-src='${value}'
fields='segment(status, project(customer.name, name, jabberID), badge)' fields='segment(status, project(customer.name, name, jabberID), badge)'
class-segment="segment lg-full padding-top-xxsmall padding-right-small padding-left-medium" class-segment="segment lg-full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"
class-status='segment text-top sub-menu-icon' class-status='segment text-top sub-menu-icon'
class-project='segment lg-three-quarter sub-menu-name' class-project='segment lg-three-quarter sub-menu-name'
class-customer.name='segment ellipsis-content' class-customer.name='ellipsis-content'
class-name='segment ellipsis-content' class-name='ellipsis-content'
class-badge='segment badge text-top' class-badge='segment badge text-top'