From b0d406c5faa578a162148a770cf537c208ef27c3 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Fri, 26 Mar 2021 15:11:42 +0100 Subject: [PATCH 01/17] feature: new circles-admin panel --- src/locales/en.json | 8 +- src/locales/es.json | 8 +- src/locales/fr.json | 9 +- src/scripts/masonry.js | 2 + src/styles/admin-circles/_index.scss | 58 +++++++ src/styles/index.scss | 14 +- src/views/page-admin.pug | 11 +- .../admin/page-admin-circles-join.pug | 46 ++++++ .../admin/page-admin-circles-leave.pug | 57 +++++++ .../partials/admin/page-admin-circles.pug | 141 ++++-------------- src/views/partials/menu-left.pug | 1 + src/views/partials/widgets.pug | 3 + ...ubl-admin-circle-counter-alternate-fix.pug | 12 ++ .../hubl-admin-circle-counter-alternate.pug | 7 +- .../widgets/hubl-admin-circle-name.pug | 19 +++ ...bl-admin-circle-user-counter-alternate.pug | 12 ++ .../widgets/hubl-admin-community-logo.pug | 3 + .../partials/widgets/hubl-community-logo.pug | 2 + 18 files changed, 283 insertions(+), 130 deletions(-) create mode 100644 src/scripts/masonry.js create mode 100644 src/styles/admin-circles/_index.scss create mode 100644 src/views/partials/admin/page-admin-circles-join.pug create mode 100644 src/views/partials/admin/page-admin-circles-leave.pug create mode 100644 src/views/partials/widgets/hubl-admin-circle-counter-alternate-fix.pug create mode 100644 src/views/partials/widgets/hubl-admin-circle-name.pug create mode 100644 src/views/partials/widgets/hubl-admin-circle-user-counter-alternate.pug create mode 100644 src/views/partials/widgets/hubl-admin-community-logo.pug create mode 100644 src/views/partials/widgets/hubl-community-logo.pug diff --git a/src/locales/en.json b/src/locales/en.json index 63e888d..e1e7d5c 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -102,12 +102,12 @@ "buttonMobile": "MENU", "subTitle": "Circles", "buttonCreate": " Create a circle", - "tableHeader1": "Name", - "tableHeader2": "Admins", - "tableHeader3": "Join", "buttonQuit": "Leave", "buttonJoin": "Join", - "searchBy": "Find a circle by name" + "searchBy": "Find a circle", + "searchButton": "search", + "tabJoin": "Discover circles", + "tabLeave": "My circles" }, "left": { "paragraphQuit": "You left this circle.", diff --git a/src/locales/es.json b/src/locales/es.json index e3c964a..7b3d815 100644 --- a/src/locales/es.json +++ b/src/locales/es.json @@ -102,12 +102,12 @@ "buttonMobile": "MENÚ", "subTitle": "Círculos", "buttonCreate": "Crear un círculo", - "tableHeader1": "Nombre", - "tableHeader2": "Administradorxs", - "tableHeader3": "Unirse", "buttonQuit": "Salir", "buttonJoin": "Unirse", - "searchBy": "Busca un círculo por nombre " + "searchBy": "Busca un círculo", + "searchButton": "Buscar", + "tabJoin": "Descubrir los círculos", + "tabLeave": "Mis círculos" }, "left": { "paragraphQuit": "Dejaste este círculo.", diff --git a/src/locales/fr.json b/src/locales/fr.json index b4b04db..e9b080b 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -91,7 +91,6 @@ "labelDescription": "Description du cercle", "descriptionHelp": "Vous pouvez utiliser Markdown", "labelSubtitle": "Sous-titre du cercle *", - "labelStatus": "Statut *", "subTitle": "Liste des membres :", "tableHeader1": "Nom", "tableHeader2": "Accès", @@ -103,12 +102,12 @@ "buttonMobile": "MENU", "subTitle": "Cercles", "buttonCreate": "Créer un cercle", - "tableHeader1": "Nom", - "tableHeader2": "Administrateurs", - "tableHeader3": "Rejoindre", "buttonQuit": "Quitter", "buttonJoin": "Rejoindre", - "searchBy": "Rechercher un cercle par nom" + "searchBy": "Trouver un cercle", + "searchButton": "Rechercher", + "tabJoin": "Découvrir des cercles", + "tabLeave": "Mes cercles" }, "left": { "paragraphQuit": "Tu as quitté ce cercle.", diff --git a/src/scripts/masonry.js b/src/scripts/masonry.js new file mode 100644 index 0000000..6bdab5f --- /dev/null +++ b/src/scripts/masonry.js @@ -0,0 +1,2 @@ +var grid = document.querySelector('.masonry > div:nth-child(2)'); +console.log(grid); \ No newline at end of file diff --git a/src/styles/admin-circles/_index.scss b/src/styles/admin-circles/_index.scss new file mode 100644 index 0000000..628b774 --- /dev/null +++ b/src/styles/admin-circles/_index.scss @@ -0,0 +1,58 @@ +#admin-circles { + + .masonry>div:nth-child(1) { + /* change from directory (nth-child(2))*/ + display: flex !important; + flex-wrap: wrap; + align-items: center; + + .circle-subtitle-custom { + height: 32px; + } + } + + .segment.hover:hover { + box-shadow: 0 0 16px 0 rgba(46, 63, 88, 0.34); + bottom: 2px; + } + + hubl-admin-circle-name:hover { + text-decoration: underline; + } + + hubl-community-logo { + max-height: 76px; + width: 206px; + max-width: 100%; + } + + .tab.active { + font-weight: bold; + border-bottom: 5px solid var(--color-third); + padding-bottom: 10px; + } + + @media (max-width: 768px) { + + .tabs { + + &>li { + color: #3C3F57; + font-size: 13px; + letter-spacing: 0.18px; + line-height: 17px; + + &>.tab { + border-radius: 5px; + box-shadow: 0 0 6px 0 rgba(46, 63, 88, 0.17); + + &.active { + color: var(--color-primary); + border: 1px solid var(--color-primary); + box-shadow: none; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index e6edfdd..474a68e 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -42,6 +42,7 @@ solid-display>div { @import 'chat'; @import 'forms'; @import 'communities'; +@import 'admin-circles'; nav#main__menu { @media (min-width: 768.01px) { @@ -125,4 +126,15 @@ hubl-create-contact { color: var(--color-secondary); } } -} \ No newline at end of file + + @media (max-width: 768px) { + + &.sm-full { + + input, + button { + width: 100%; + } + } + } +} diff --git a/src/views/page-admin.pug b/src/views/page-admin.pug index 805c28b..8f2e94f 100644 --- a/src/views/page-admin.pug +++ b/src/views/page-admin.pug @@ -8,7 +8,16 @@ data-view=`admin-${component.route}` no-render ) - include partials/admin/page-admin-circles.pug + - var page = 'join'; + include partials/admin/page-admin-circles-join.pug + div( + id=`admin-${component.route}-leave` + hidden + data-view=`admin-${component.route}-leave` + no-render + ) + - var page = 'leave'; + include partials/admin/page-admin-circles-leave.pug div( id=`admin-${component.route}-create` hidden diff --git a/src/views/partials/admin/page-admin-circles-join.pug b/src/views/partials/admin/page-admin-circles-join.pug new file mode 100644 index 0000000..6c73d66 --- /dev/null +++ b/src/views/partials/admin/page-admin-circles-join.pug @@ -0,0 +1,46 @@ +solid-widget(name=`hubl-admin-circle-join-button`) + template + solid-form( + class='join-button sm-full text-xsmall' + data-src='${value}' + + fields='user.username' + value-user.username='hubl-workaround-493' + widget-user.username='solid-form-hidden' + + submit-button='' + submit-widget="button" + data-trans='submit-button=circle.list.buttonJoin' + ) + hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${value}') + hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${value}') + hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${value}') + hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${value}') + hubl-reactivity(bind-user nested-field="circles" target-src='${value}') + +include page-admin-circles.pug + +div.segment.full.padding-small.padding-top-xsmall.sm-padding-xsmall.whitespace-normal + solid-display( + class='segment full children children-third sm-children-full children-margin-bottom-medium sm-children-margin-bottom-xsmall children-padding-right-xsmall children-padding-left-xsmall sm-children-padding-none sm-whitespace-normal masonry pagination' + data-src=`${getComponent('circles').endpoints.get}joinable/` + fields='segment1(segment2(community.community.logo), segment3(name, subtitle, counter, members))' + filtered-by=`admin-circle-filter-${page}` + order-by='name' + paginate-by='4' + loader-id=`loader-admin-circles-${page}` + + class-segment1='segment hover bg-color-white shadow border-rounded-xxsmall full text-top whitespace-normal' + class-segment2='segment block padding-xlarge text-center' + class-segment3='segment full padding-xlarge padding-top-medium sm-padding-medium border-top border-color-grey text-center whitespace-normal' + class-name='segment block one-line-ellipsis text-xlarge text-bold text-color-heading margin-bottom-xsmall whitespace-normal' + class-subtitle='segment two-lines-ellipsis margin-bottom-xlarge sm-margin-bottom-medium whitespace-normal circle-subtitle-custom' + class-counter='segment block margin-bottom-large whitespace-normal' + + widget-community.community.logo='hubl-admin-community-logo' + action-name=`${getRoute(`circles`, true)}-information` + widget-name='hubl-admin-circle-name' + action-counter="counter" + widget-counter='hubl-admin-circle-counter-alternate' + widget-members=`hubl-admin-circle-join-button` + ) diff --git a/src/views/partials/admin/page-admin-circles-leave.pug b/src/views/partials/admin/page-admin-circles-leave.pug new file mode 100644 index 0000000..9dad818 --- /dev/null +++ b/src/views/partials/admin/page-admin-circles-leave.pug @@ -0,0 +1,57 @@ +solid-widget(name=`leave-circle-reactivity`) + template + hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${value}') + hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${value}') + hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${value}') + hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${value}') + hubl-reactivity(bind-user nested-field="circles" target-src='${value}') + +solid-widget(name=`hubl-admin-circle-leave-button`) + template + solid-delete( + class='segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered' + data-src="${src}" + data-label='' + data-trans='data-label=circle.list.buttonQuit' + ) + hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${src}') + hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${src}') + hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${src}') + hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${src}') + hubl-reactivity(bind-user nested-field="circles" target-src='${src}') + solid-display( + data-src="${src}" + fields="circle" + widget-circle=`leave-circle-reactivity` + hidden + ) + +include page-admin-circles.pug + +div.segment.full.padding-small.padding-top-xsmall.sm-padding-xsmall.whitespace-normal + solid-display( + bind-user + nested-field='circles' + class='segment full children children-third sm-children-full children-margin-bottom-medium sm-children-margin-bottom-xsmall children-padding-right-xsmall children-padding-left-xsmall sm-children-padding-none sm-whitespace-normal masonry pagination' + fields='segment1(segment2(circle.community.community.logo), segment3(circle.name, circle.subtitle, counter, leaveButton))' + filtered-by=`admin-circle-filter-${page}` + order-by='name' + paginate-by='4' + loader-id=`loader-admin-circles-${page}` + + class-segment1='segment hover bg-color-white shadow border-rounded-xxsmall full text-top whitespace-normal' + class-segment2='segment block padding-xlarge text-center' + class-segment3='segment full padding-xlarge padding-top-medium sm-padding-medium border-top border-color-grey text-center whitespace-normal' + class-circle.name='segment block one-line-ellipsis text-xlarge text-bold text-color-heading margin-bottom-xsmall whitespace-normal' + class-circle.subtitle='segment two-lines-ellipsis margin-bottom-xlarge sm-margin-bottom-medium whitespace-normal circle-subtitle-custom' + class-counter='segment block margin-bottom-large whitespace-normal' + + widget-circle.community.community.logo='hubl-admin-community-logo' + action-circle.name=`${getRoute(`circles`, true)}-information` + widget-circle.name='hubl-admin-circle-fix-url-name' + action-counter="counter" + widget-counter='hubl-admin-circle-counter-alternate-fix' + action-leaveButton="joinButton" + widget-leaveButton=`hubl-admin-circle-leave-button` + ) + \ No newline at end of file diff --git a/src/views/partials/admin/page-admin-circles.pug b/src/views/partials/admin/page-admin-circles.pug index 174ece0..36a7a93 100644 --- a/src/views/partials/admin/page-admin-circles.pug +++ b/src/views/partials/admin/page-admin-circles.pug @@ -1,15 +1,15 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title') -div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-normal.whitespace-normal +div.segment.full.padding-small.padding-top-medium.padding-bottom-xsmall.sm-padding-xsmall.sm-padding-top-xxsmall.whitespace-normal - div#loader-admin-circles.loader.loader-top + div(id=`loader-admin-circles-${page}`).loader.loader-top div div div div - div.segment.full.margin-bottom-xlarge.whitespace-normal + div.segment.full.margin-bottom-medium.padding-right-xsmall.padding-left-xsmall.sm-padding-none.whitespace-normal div.segment.half.sm-full h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='circle.list.subTitle') div.segment.half.sm-full.text-right @@ -20,119 +20,36 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-normal.whitespac data-trans='circle.list.buttonCreate' ) - solid-form-search.form.search-form( - id="admin-circle-filter" + solid-form-search.form.search-form.search-button( + id=`admin-circle-filter-${page}` fields='name' label-name='' widget-name='solid-form-label-text' - class-name="segment margin-bottom-medium third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading" + class-name="segment margin-bottom-medium sm-margin-bottom-none padding-left-xsmall third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading" submit-button="" submit-widget="button" - data-trans='label-name=circle.list.searchBy;submit-button=goButton' + data-trans='label-name=circle.list.searchBy;submit-button=circle.list.searchButton' ) - .segment.table-wrapper - .table - - div.table-header.bg-color-third.text-color-heading - div.segment.table-cell.third(data-trans='circle.list.tableHeader1') - div.segment.table-cell.third(data-trans='circle.list.tableHeader2') - div.segment.table-cell.third(data-trans='circle.list.tableHeader3') - - solid-widget(name=`leave-circle-reactivity`) - template - hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${value}') - hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${value}') - hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${value}') - hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${value}') - hubl-reactivity(bind-user nested-field="circles" target-src='${value}') - - solid-widget(name=`hubl-admin-circle-leave-button`) - template - solid-delete( - class='segment text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered' - data-src="${src}" - data-label='' - data-trans='data-label=circle.list.buttonQuit' - ) - hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${src}') - hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${src}') - hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${src}') - hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${src}') - hubl-reactivity(bind-user nested-field="circles" target-src='${src}') - solid-display( - data-src="${src}" - fields="circle" - widget-circle=`leave-circle-reactivity` - hidden - ) - - solid-display( - class='table-body' - filtered-by="admin-circle-filter" - bind-user - nested-field='circles' - fields='cell1(name(circle.name), counter, circle.subtitle), cell2(circle.owner), cell3(leaveButton)' - loader-id='loader-admin-circles' - - class-cell1='segment table-cell third whitespace-normal' - class-cell2='segment table-cell third text-center text-left' - class-cell3='segment table-cell third text-center' - - action-circle.name='circle.name' - widget-circle.name='hubl-admin-circle-link-alternate' - class-circle.subtitle='segment full text-ellipsis' - - action-leaveButton="joinButton" - widget-leaveButton=`hubl-admin-circle-leave-button` - widget-circle.owner='hubl-circle-owner' - action-counter="counter" - widget-counter="hubl-admin-circle-counter-alternate" - - order-by="circle.name" - ) - - solid-widget(name=`hubl-admin-circle-join-button`) - template - solid-form( - class='join-button text-xsmall' - data-src='${value}' - - fields='user.username' - value-user.username='hubl-workaround-493' - widget-user.username='solid-form-hidden' - - submit-button='' - submit-widget="button" - data-trans='submit-button=circle.list.buttonJoin' - ) - hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${value}') - hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${value}') - hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${value}') - hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${value}') - hubl-reactivity(bind-user nested-field="circles" target-src='${value}') - - solid-display( - class='table-body' - filtered-by="admin-circle-filter" - - data-src=`${getComponent('circles').endpoints.get}joinable/` - fields='cell1(name, counter, subtitle), cell2(owner), cell3(members)' - loader-id='loader-admin-circles' - - class-cell1='segment table-cell third whitespace-normal' - class-cell2='segment table-cell third text-center text-left' - class-cell3='segment table-cell third text-center' - - class-name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline text-ellipsis admin-name-ellipsis' - action-name='name' - widget-name='hubl-admin-circle-link' - class-subtitle='segment full text-ellipsis' - - widget-owner='hubl-circle-owner' - widget-members=`hubl-admin-circle-join-button` - action-counter="counter" - widget-counter="hubl-admin-circle-counter" - - order-by="name" - ) + ul(class='segment full margin-top-xsmall sm-margin-top-none padding-right-xsmall padding-left-xsmall sm-padding-none whitespace-normal tabs') + li(class='segment sm-full text-xlarge text-color-heading text-letter-spacing-large margin-right-medium sm-margin-right-none sm-margin-bottom-xsmall') + solid-link(class='segment sm-full sm-padding-xsmall tab' next=`admin-${getRoute('circles', true)}`)&attributes({'class': page == 'join' ? 'active' : false}) + span(class='segment lg-hidden icon icon-globe icon-margin-right-xsmall') + span(data-trans='circle.list.tabJoin') + solid-display( + class="margin-left-xxsmall" + data-src=`${getComponent('circles').endpoints.get}joinable/` + fields="" + counter-template="(${counter})" + ) + li(class='segment sm-full text-xlarge text-color-heading text-letter-spacing-large margin-left-medium sm-margin-left-none') + solid-link(class='segment sm-full sm-padding-xsmall tab' next=`admin-${getRoute('circles', true)}-leave`)&attributes({'class': page == 'leave' ? 'active' : false}) + span(class='segment lg-hidden icon icon-check icon-margin-right-xsmall') + span(data-trans='circle.list.tabLeave') + solid-display( + class="margin-left-xxsmall" + bind-user + nested-field="circles" + fields="" + counter-template="(${counter})" + ) diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug index d56be78..3b285ac 100644 --- a/src/views/partials/menu-left.pug +++ b/src/views/partials/menu-left.pug @@ -19,6 +19,7 @@ solid-router#navbar-router(default-route='dashboard') div.menu-chevron.segment div.menu-icon.icon-arrow-right-circle solid-route(name=`admin-${component.route}-create`) + solid-route(name=`admin-${component.route}-leave`) else div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading div.segment.margin-right-xxsmall diff --git a/src/views/partials/widgets.pug b/src/views/partials/widgets.pug index e9be69b..b3dbc1c 100644 --- a/src/views/partials/widgets.pug +++ b/src/views/partials/widgets.pug @@ -1,11 +1,14 @@ //- Import your widgets from the `widget`folder here include widgets/hubl-action-community.pug +include widgets/hubl-admin-circle-counter-alternate-fix.pug include widgets/hubl-admin-circle-counter-alternate.pug include widgets/hubl-admin-circle-counter.pug include widgets/hubl-admin-circle-link-alternate.pug include widgets/hubl-admin-circle-link.pug +include widgets/hubl-admin-circle-name.pug include widgets/hubl-admin-community-counter.pug +include widgets/hubl-admin-community-logo.pug include widgets/hubl-admin-project-counter-alternate.pug include widgets/hubl-admin-project-counter.pug include widgets/hubl-admin-project-link-alternate.pug diff --git a/src/views/partials/widgets/hubl-admin-circle-counter-alternate-fix.pug b/src/views/partials/widgets/hubl-admin-circle-counter-alternate-fix.pug new file mode 100644 index 0000000..abef1e3 --- /dev/null +++ b/src/views/partials/widgets/hubl-admin-circle-counter-alternate-fix.pug @@ -0,0 +1,12 @@ +if componentSet.has('admin') && componentSet.has('circles') + solid-widget(name='hubl-admin-circle-counter-alternate-fix') + template + div + span.icon.icon-people.icon-third.icon-large.margin-right-xsmall + solid-display( + fields='' + data-src="${src}" + nested-field="circle.members" + counter-template="\\\${counter}" + ) + span members diff --git a/src/views/partials/widgets/hubl-admin-circle-counter-alternate.pug b/src/views/partials/widgets/hubl-admin-circle-counter-alternate.pug index d7c9ae1..a825573 100644 --- a/src/views/partials/widgets/hubl-admin-circle-counter-alternate.pug +++ b/src/views/partials/widgets/hubl-admin-circle-counter-alternate.pug @@ -1,11 +1,12 @@ if componentSet.has('admin') && componentSet.has('circles') solid-widget(name='hubl-admin-circle-counter-alternate') template - div(style='float:right') + div + span.icon.icon-people.icon-third.icon-large.margin-right-xsmall solid-display( fields='' data-src="${src}" - nested-field="circle.members" + nested-field="members" counter-template="\\\${counter}" ) - span.icon.icon-people.icon-xsmall.margin-right-xxsmall + span members diff --git a/src/views/partials/widgets/hubl-admin-circle-name.pug b/src/views/partials/widgets/hubl-admin-circle-name.pug new file mode 100644 index 0000000..4ab5f4a --- /dev/null +++ b/src/views/partials/widgets/hubl-admin-circle-name.pug @@ -0,0 +1,19 @@ +if componentSet.has('admin') && componentSet.has('circles') + solid-widget(name='hubl-admin-circle-name') + template + solid-link( + data-src="${src || value}" + next=`${getRoute(`circles`, true)}-information` + ) + solid-display( + data-src="${src || value}" + fields="name" + ) + + solid-widget(name='hubl-admin-circle-fix-url-name') + template + solid-display( + data-src="${src}" + fields="circle" + widget-circle='hubl-admin-circle-name' + ) diff --git a/src/views/partials/widgets/hubl-admin-circle-user-counter-alternate.pug b/src/views/partials/widgets/hubl-admin-circle-user-counter-alternate.pug new file mode 100644 index 0000000..e0f196a --- /dev/null +++ b/src/views/partials/widgets/hubl-admin-circle-user-counter-alternate.pug @@ -0,0 +1,12 @@ +if componentSet.has('admin') && componentSet.has('circles') + solid-widget(name='hubl-admin-circle-user-counter-alternate') + template + div + span.icon.icon-people.icon-third.icon-large.margin-right-xsmall + solid-display( + fields='' + data-src="${src}" + nested-field="circle.members" + counter-template="\\\${counter}" + ) + span members diff --git a/src/views/partials/widgets/hubl-admin-community-logo.pug b/src/views/partials/widgets/hubl-admin-community-logo.pug new file mode 100644 index 0000000..5df05e9 --- /dev/null +++ b/src/views/partials/widgets/hubl-admin-community-logo.pug @@ -0,0 +1,3 @@ +if componentSet.has('admin') && componentSet.has('circles') + solid-widget(name='hubl-admin-community-logo') + template ${value != "" ? `community's logo` : `
`} \ No newline at end of file diff --git a/src/views/partials/widgets/hubl-community-logo.pug b/src/views/partials/widgets/hubl-community-logo.pug new file mode 100644 index 0000000..63d9d63 --- /dev/null +++ b/src/views/partials/widgets/hubl-community-logo.pug @@ -0,0 +1,2 @@ +solid-widget(name='hubl-community-logo') + template ${value != "" ? `` : ``} \ No newline at end of file From aba9fd508df58b0839436e3c6bb80522e9018e64 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Fri, 26 Mar 2021 16:16:15 +0100 Subject: [PATCH 02/17] patch: search-button style added --- src/styles/index.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/styles/index.scss b/src/styles/index.scss index 474a68e..4af8d42 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -138,3 +138,9 @@ hubl-create-contact { } } } + +.form.search-button :not(.add-member)+button[type=submit] { + background-color: #E9F2FF; + border: none; + color: #0068FF; +} From a8789efa66c3426be1c6e28433ec5aea8330d6e2 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Fri, 26 Mar 2021 16:45:32 +0100 Subject: [PATCH 03/17] patch: masonry.js removed --- src/scripts/masonry.js | 2 -- 1 file changed, 2 deletions(-) delete mode 100644 src/scripts/masonry.js diff --git a/src/scripts/masonry.js b/src/scripts/masonry.js deleted file mode 100644 index 6bdab5f..0000000 --- a/src/scripts/masonry.js +++ /dev/null @@ -1,2 +0,0 @@ -var grid = document.querySelector('.masonry > div:nth-child(2)'); -console.log(grid); \ No newline at end of file From cb583684d97f909e08490ce1e16a042ed3556a1f Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Fri, 26 Mar 2021 23:15:27 +0100 Subject: [PATCH 04/17] patch: unused styles and widgets removed --- src/styles/admin-circles/_index.scss | 2 +- .../hubl-admin-circle-user-counter-alternate.pug | 12 ------------ src/views/partials/widgets/hubl-community-logo.pug | 2 -- 3 files changed, 1 insertion(+), 15 deletions(-) delete mode 100644 src/views/partials/widgets/hubl-admin-circle-user-counter-alternate.pug delete mode 100644 src/views/partials/widgets/hubl-community-logo.pug diff --git a/src/styles/admin-circles/_index.scss b/src/styles/admin-circles/_index.scss index 628b774..07968e8 100644 --- a/src/styles/admin-circles/_index.scss +++ b/src/styles/admin-circles/_index.scss @@ -20,7 +20,7 @@ text-decoration: underline; } - hubl-community-logo { + hubl-admin-community-logo { max-height: 76px; width: 206px; max-width: 100%; diff --git a/src/views/partials/widgets/hubl-admin-circle-user-counter-alternate.pug b/src/views/partials/widgets/hubl-admin-circle-user-counter-alternate.pug deleted file mode 100644 index e0f196a..0000000 --- a/src/views/partials/widgets/hubl-admin-circle-user-counter-alternate.pug +++ /dev/null @@ -1,12 +0,0 @@ -if componentSet.has('admin') && componentSet.has('circles') - solid-widget(name='hubl-admin-circle-user-counter-alternate') - template - div - span.icon.icon-people.icon-third.icon-large.margin-right-xsmall - solid-display( - fields='' - data-src="${src}" - nested-field="circle.members" - counter-template="\\\${counter}" - ) - span members diff --git a/src/views/partials/widgets/hubl-community-logo.pug b/src/views/partials/widgets/hubl-community-logo.pug deleted file mode 100644 index 63d9d63..0000000 --- a/src/views/partials/widgets/hubl-community-logo.pug +++ /dev/null @@ -1,2 +0,0 @@ -solid-widget(name='hubl-community-logo') - template ${value != "" ? `` : ``} \ No newline at end of file From f7efb3dd47fa5ddc8004c296d9f7b2b5ceff1467 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Mon, 29 Mar 2021 09:41:58 +0200 Subject: [PATCH 05/17] patch: useless paddings removed --- src/views/partials/admin/page-admin-circles.pug | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/views/partials/admin/page-admin-circles.pug b/src/views/partials/admin/page-admin-circles.pug index 36a7a93..01ac554 100644 --- a/src/views/partials/admin/page-admin-circles.pug +++ b/src/views/partials/admin/page-admin-circles.pug @@ -1,7 +1,7 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title') -div.segment.full.padding-small.padding-top-medium.padding-bottom-xsmall.sm-padding-xsmall.sm-padding-top-xxsmall.whitespace-normal +div.segment.full.padding-large.padding-top-medium.padding-bottom-xsmall.sm-padding-xsmall.sm-padding-top-xxsmall.whitespace-normal div(id=`loader-admin-circles-${page}`).loader.loader-top div @@ -9,7 +9,7 @@ div.segment.full.padding-small.padding-top-medium.padding-bottom-xsmall.sm-paddi div div - div.segment.full.margin-bottom-medium.padding-right-xsmall.padding-left-xsmall.sm-padding-none.whitespace-normal + div.segment.full.margin-bottom-medium.sm-padding-none.whitespace-normal div.segment.half.sm-full h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='circle.list.subTitle') div.segment.half.sm-full.text-right @@ -25,13 +25,13 @@ div.segment.full.padding-small.padding-top-medium.padding-bottom-xsmall.sm-paddi fields='name' label-name='' widget-name='solid-form-label-text' - class-name="segment margin-bottom-medium sm-margin-bottom-none padding-left-xsmall third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading" + class-name="segment margin-bottom-medium sm-margin-bottom-none third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading" submit-button="" submit-widget="button" data-trans='label-name=circle.list.searchBy;submit-button=circle.list.searchButton' ) - ul(class='segment full margin-top-xsmall sm-margin-top-none padding-right-xsmall padding-left-xsmall sm-padding-none whitespace-normal tabs') + ul(class='segment full margin-top-xsmall sm-margin-top-none sm-padding-none whitespace-normal tabs') li(class='segment sm-full text-xlarge text-color-heading text-letter-spacing-large margin-right-medium sm-margin-right-none sm-margin-bottom-xsmall') solid-link(class='segment sm-full sm-padding-xsmall tab' next=`admin-${getRoute('circles', true)}`)&attributes({'class': page == 'join' ? 'active' : false}) span(class='segment lg-hidden icon icon-globe icon-margin-right-xsmall') From a60278b43c45b8ed82c601f590c0c557b7afedf7 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 29 Mar 2021 17:08:50 +0200 Subject: [PATCH 06/17] feature: add circle to a community --- src/locales/en.json | 2 ++ src/locales/es.json | 2 ++ src/locales/fr.json | 2 ++ src/styles/admin-circles/_index.scss | 23 +++++++++++++++---- src/styles/index.scss | 7 +----- .../admin/page-admin-circles-create.pug | 13 +++++++---- .../admin/page-admin-circles-join.pug | 2 +- .../admin/page-admin-circles-leave.pug | 2 +- .../partials/circle/page-circle-edit.pug | 13 ++++++++--- .../widgets/hubl-admin-community-logo.pug | 2 +- 10 files changed, 48 insertions(+), 20 deletions(-) diff --git a/src/locales/en.json b/src/locales/en.json index e1e7d5c..83be2d6 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -75,6 +75,7 @@ "backlink": "Back", "title": " Create a circle", "labelStatus": "Circle status", + "labelCommunity": "Circle's community *", "labelName": "Circle name *", "labelSubtitle": "Circle headline *", "labelDescription": "Circle description", @@ -86,6 +87,7 @@ "backlink": "Back", "title": "Edit your circle", "labelStatus": "Circle status *", + "labelCommunity": "Circle's community *", "labelName": "Circle name *", "labelOwner": "Admin *", "labelDescription": "Circle description", diff --git a/src/locales/es.json b/src/locales/es.json index 7b3d815..2092c19 100644 --- a/src/locales/es.json +++ b/src/locales/es.json @@ -75,6 +75,7 @@ "backlink": "Atrás", "title": "Crear un círculo", "labelStatus": "Estado del círculo", + "labelCommunity": "Comunidad del círculo *", "labelName": "Nombre del círculo *", "labelSubtitle": "Subtítulo del círculo *", "labelDescription": "Descripción del círculo", @@ -86,6 +87,7 @@ "backlink": "Atrás", "title": "Modificá tu círculo", "labelStatus": "Estado del círculo *", + "labelCommunity": "Comunidad del círculo *", "labelName": "Nombre del círculo *", "labelOwner": "Administrador/a *", "labelSubtitle": "Subtítulo del círculo *", diff --git a/src/locales/fr.json b/src/locales/fr.json index e9b080b..3195dfe 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -75,6 +75,7 @@ "backlink": "Retour", "title": "Créer un cercle", "labelStatus": "Statut du cercle", + "labelCommunity": "Communauté du cercle *", "labelName": "Nom du cercle *", "labelSubtitle": "Sous-titre du cercle *", "labelDescription": "Description du cercle", @@ -86,6 +87,7 @@ "backlink": "Retour", "title": "Modifie ton cercle", "labelStatus": "Statut du cercle *", + "labelCommunity": "Communauté du cercle *", "labelName": "Nom du cercle *", "labelOwner": "Administrateur ou administratrice *", "labelDescription": "Description du cercle", diff --git a/src/styles/admin-circles/_index.scss b/src/styles/admin-circles/_index.scss index 07968e8..a08a058 100644 --- a/src/styles/admin-circles/_index.scss +++ b/src/styles/admin-circles/_index.scss @@ -1,4 +1,11 @@ -#admin-circles { +#admin-circles, +#admin-circles-leave { + + .form.search-button :not(.add-member)+button[type=submit] { + background-color: #E9F2FF; + border: none; + color: var(--color-secondary); + } .masonry>div:nth-child(1) { /* change from directory (nth-child(2))*/ @@ -21,9 +28,17 @@ } hubl-admin-community-logo { - max-height: 76px; - width: 206px; - max-width: 100%; + height: 76px; + width: 100%; + display: block; + div { + display: block; + width: 100%; + height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + } } .tab.active { diff --git a/src/styles/index.scss b/src/styles/index.scss index 4af8d42..5f1d26d 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -109,6 +109,7 @@ hubl-create-contact { /* And no I can't add that stupid icon because it'a an input. */ /* But now, with 0.16, it's a button and you can :D */ .join-button { + input, button { padding: 9px 20px; @@ -138,9 +139,3 @@ hubl-create-contact { } } } - -.form.search-button :not(.add-member)+button[type=submit] { - background-color: #E9F2FF; - border: none; - color: #0068FF; -} diff --git a/src/views/partials/admin/page-admin-circles-create.pug b/src/views/partials/admin/page-admin-circles-create.pug index 0158dce..effa98e 100644 --- a/src/views/partials/admin/page-admin-circles-create.pug +++ b/src/views/partials/admin/page-admin-circles-create.pug @@ -14,27 +14,32 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac solid-form.form( data-src=`${getComponent('circles').endpoints.post}` - fields='status, linebreak, name, subtitle, description, help' + fields='status, community, name, subtitle, description, help' required-status + required-community required-name required-subtitle loader-id=`loader-admin-${getComponent('circles').uniq}` class-status='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal' - class-linebreak='segment half sm-hidden' + class-community='segment margin-bottom-medium half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal' class-name='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading' class-subtitle='segment margin-bottom-medium half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading' class-description='segment margin-bottom-xxsmall full text-small text-semibold text-uppercase text-color-heading' class-help='segment full text-small margin-bottom-medium padding-left-small' - label-status='' + label-community='' label-name='' label-subtitle='' label-description='' label-help='' + range-community='store://user.communities' + option-label-community="community.name" + widget-status='hubl-status' + widget-community='solid-form-dropdown-autocompletion-label' widget-linebreak='solid-form-hidden' widget-description='solid-form-richtext-label' @@ -45,5 +50,5 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac submit-button='' submit-widget="button" - data-trans='label-status=circle.create.labelStatus;label-name=circle.create.labelName;label-description=circle.create.labelDescription;submit-button=circle.create.buttonSubmit;label-subtitle=circle.create.labelSubtitle;label-help=circle.create.descriptionHelp' + data-trans='label-status=circle.create.labelStatus;label-community=circle.create.labelCommunity;label-name=circle.create.labelName;label-description=circle.create.labelDescription;submit-button=circle.create.buttonSubmit;label-subtitle=circle.create.labelSubtitle;label-help=circle.create.descriptionHelp' ) diff --git a/src/views/partials/admin/page-admin-circles-join.pug b/src/views/partials/admin/page-admin-circles-join.pug index 6c73d66..2da159b 100644 --- a/src/views/partials/admin/page-admin-circles-join.pug +++ b/src/views/partials/admin/page-admin-circles-join.pug @@ -22,7 +22,7 @@ include page-admin-circles.pug div.segment.full.padding-small.padding-top-xsmall.sm-padding-xsmall.whitespace-normal solid-display( - class='segment full children children-third sm-children-full children-margin-bottom-medium sm-children-margin-bottom-xsmall children-padding-right-xsmall children-padding-left-xsmall sm-children-padding-none sm-whitespace-normal masonry pagination' + class='segment full children children-quarter sm-children-full children-margin-bottom-medium sm-children-margin-bottom-xsmall children-padding-right-xsmall children-padding-left-xsmall sm-children-padding-none sm-whitespace-normal masonry pagination' data-src=`${getComponent('circles').endpoints.get}joinable/` fields='segment1(segment2(community.community.logo), segment3(name, subtitle, counter, members))' filtered-by=`admin-circle-filter-${page}` diff --git a/src/views/partials/admin/page-admin-circles-leave.pug b/src/views/partials/admin/page-admin-circles-leave.pug index 9dad818..1ba1a7a 100644 --- a/src/views/partials/admin/page-admin-circles-leave.pug +++ b/src/views/partials/admin/page-admin-circles-leave.pug @@ -32,7 +32,7 @@ div.segment.full.padding-small.padding-top-xsmall.sm-padding-xsmall.whitespace-n solid-display( bind-user nested-field='circles' - class='segment full children children-third sm-children-full children-margin-bottom-medium sm-children-margin-bottom-xsmall children-padding-right-xsmall children-padding-left-xsmall sm-children-padding-none sm-whitespace-normal masonry pagination' + class='segment full children children-quarter sm-children-full children-margin-bottom-medium sm-children-margin-bottom-xsmall children-padding-right-xsmall children-padding-left-xsmall sm-children-padding-none sm-whitespace-normal masonry pagination' fields='segment1(segment2(circle.community.community.logo), segment3(circle.name, circle.subtitle, counter, leaveButton))' filtered-by=`admin-circle-filter-${page}` order-by='name' diff --git a/src/views/partials/circle/page-circle-edit.pug b/src/views/partials/circle/page-circle-edit.pug index 43ceeba..be7d998 100644 --- a/src/views/partials/circle/page-circle-edit.pug +++ b/src/views/partials/circle/page-circle-edit.pug @@ -25,11 +25,12 @@ div.segment.full.padding-large.whitespace-normal solid-form.form( bind-resources - fields='name, subtitle, description, status, owner' + fields='name, subtitle, description, status, community, owner' required-status required-name required-owner required-subtitle + required-community range-owner=`${component.endpoints.owners}` label-name='' @@ -37,27 +38,33 @@ div.segment.full.padding-large.whitespace-normal label-description='' label-subtitle='' label-status='' + label-community='' label-help='' class-name='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading' class-subtitle='segment margin-bottom-medium half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading' class-description='segment margin-bottom-medium full text-small text-semibold text-uppercase text-color-heading' class-status='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal' - class-owner='segment margin-bottom-medium half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal' + class-community='segment margin-bottom-medium half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal' + class-owner='hidden' class-help='segment full text-small margin-bottom-medium padding-left-small' widget-status='hubl-status' widget-description='solid-form-richtext-label' widget-help='solid-form-hidden-label' + widget-community='solid-form-dropdown-autocompletion-label' widget-owner='solid-form-dropdown-autocompletion-label' + range-community='store://user.communities' + option-label-community="community.name" + partial='' submit-button='' submit-widget="button" next=`${component.route}-information` - 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;label-subtitle=circle.edit.labelSubtitle;label-help=circle.edit.descriptionHelp' + data-trans='label-status=circle.edit.labelStatus;label-community=circle.edit.labelCommunity;label-name=circle.edit.labelName;label-owner=circle.edit.labelOwner;label-description=circle.edit.labelDescription;submit-button=circle.edit.buttonSubmit;label-subtitle=circle.edit.labelSubtitle;label-help=circle.edit.descriptionHelp' ) h3.segment.full.padding-bottom-small.border-bottom.border-color-grey.text-color-heading.text-bold.text-letter-spacing-large(data-trans='circle.edit.subTitle') diff --git a/src/views/partials/widgets/hubl-admin-community-logo.pug b/src/views/partials/widgets/hubl-admin-community-logo.pug index 5df05e9..8db707e 100644 --- a/src/views/partials/widgets/hubl-admin-community-logo.pug +++ b/src/views/partials/widgets/hubl-admin-community-logo.pug @@ -1,3 +1,3 @@ if componentSet.has('admin') && componentSet.has('circles') solid-widget(name='hubl-admin-community-logo') - template ${value != "" ? `community's logo` : `
`} \ No newline at end of file + template ${value != "" ? `
` : `
`} \ No newline at end of file From 844972bff56d96e0b6f4920daa7ba04c806360e9 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 29 Mar 2021 17:24:10 +0200 Subject: [PATCH 07/17] fix: text-disable-selection --- src/views/page-admin.pug | 4 ++-- src/views/partials/admin/page-admin-circles.pug | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/views/page-admin.pug b/src/views/page-admin.pug index 8f2e94f..6ae6973 100644 --- a/src/views/page-admin.pug +++ b/src/views/page-admin.pug @@ -10,7 +10,7 @@ ) - var page = 'join'; include partials/admin/page-admin-circles-join.pug - div( + div.text-disable-selection( id=`admin-${component.route}-leave` hidden data-view=`admin-${component.route}-leave` @@ -18,7 +18,7 @@ ) - var page = 'leave'; include partials/admin/page-admin-circles-leave.pug - div( + div.text-disable-selection( id=`admin-${component.route}-create` hidden data-view=`admin-${component.route}-create` diff --git a/src/views/partials/admin/page-admin-circles.pug b/src/views/partials/admin/page-admin-circles.pug index 01ac554..2cf0519 100644 --- a/src/views/partials/admin/page-admin-circles.pug +++ b/src/views/partials/admin/page-admin-circles.pug @@ -31,7 +31,7 @@ div.segment.full.padding-large.padding-top-medium.padding-bottom-xsmall.sm-paddi data-trans='label-name=circle.list.searchBy;submit-button=circle.list.searchButton' ) - ul(class='segment full margin-top-xsmall sm-margin-top-none sm-padding-none whitespace-normal tabs') + ul(class='segment full margin-top-xsmall sm-margin-top-none sm-padding-none whitespace-normal tabs text-disable-selection') li(class='segment sm-full text-xlarge text-color-heading text-letter-spacing-large margin-right-medium sm-margin-right-none sm-margin-bottom-xsmall') solid-link(class='segment sm-full sm-padding-xsmall tab' next=`admin-${getRoute('circles', true)}`)&attributes({'class': page == 'join' ? 'active' : false}) span(class='segment lg-hidden icon icon-globe icon-margin-right-xsmall') From 1633d93c61bcc0b644a76fb02db994c26754e9cc Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 29 Mar 2021 17:29:45 +0200 Subject: [PATCH 08/17] fix: icon on buttons --- src/styles/admin-circles/_index.scss | 19 +++++++++++++++++++ src/styles/index.scss | 19 +++++++++++++++++++ 2 files changed, 38 insertions(+) diff --git a/src/styles/admin-circles/_index.scss b/src/styles/admin-circles/_index.scss index a08a058..d02c585 100644 --- a/src/styles/admin-circles/_index.scss +++ b/src/styles/admin-circles/_index.scss @@ -5,6 +5,25 @@ background-color: #E9F2FF; border: none; color: var(--color-secondary); + + &:before { + font-size: 15px; + margin-right: 6px; + content: "\e079"; + font-family: simple-line-icons; + font-style: normal; + font-weight: 400; + speak: none; + display: inline-block; + text-decoration: inherit; + width: 1em; + text-align: center; + font-variant: normal; + text-transform: none; + line-height: 1em; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } } .masonry>div:nth-child(1) { diff --git a/src/styles/index.scss b/src/styles/index.scss index 5f1d26d..16342bc 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -122,6 +122,25 @@ hubl-create-contact { color: white; border: 1px solid var(--color-secondary); + &:before { + font-size: 15px; + margin-right: 6px; + content: "\e079"; + font-family: simple-line-icons; + font-style: normal; + font-weight: 400; + speak: none; + display: inline-block; + text-decoration: inherit; + width: 1em; + text-align: center; + font-variant: normal; + text-transform: none; + line-height: 1em; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + &:hover { background: white; color: var(--color-secondary); From 3699ac128fba78f407927928fe2b04c4dd1075a0 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 29 Mar 2021 17:34:51 +0200 Subject: [PATCH 09/17] fix: widget --- .../hubl-admin-circle-counter-alternate-fix.pug | 14 +++++--------- .../hubl-admin-circle-counter-alternate.pug | 2 +- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/views/partials/widgets/hubl-admin-circle-counter-alternate-fix.pug b/src/views/partials/widgets/hubl-admin-circle-counter-alternate-fix.pug index abef1e3..dc2e1a0 100644 --- a/src/views/partials/widgets/hubl-admin-circle-counter-alternate-fix.pug +++ b/src/views/partials/widgets/hubl-admin-circle-counter-alternate-fix.pug @@ -1,12 +1,8 @@ if componentSet.has('admin') && componentSet.has('circles') solid-widget(name='hubl-admin-circle-counter-alternate-fix') template - div - span.icon.icon-people.icon-third.icon-large.margin-right-xsmall - solid-display( - fields='' - data-src="${src}" - nested-field="circle.members" - counter-template="\\\${counter}" - ) - span members + solid-display( + fields='circle' + data-src="${src}" + widget-circle="hubl-admin-circle-counter-alternate" + ) diff --git a/src/views/partials/widgets/hubl-admin-circle-counter-alternate.pug b/src/views/partials/widgets/hubl-admin-circle-counter-alternate.pug index a825573..1eecc0f 100644 --- a/src/views/partials/widgets/hubl-admin-circle-counter-alternate.pug +++ b/src/views/partials/widgets/hubl-admin-circle-counter-alternate.pug @@ -5,7 +5,7 @@ if componentSet.has('admin') && componentSet.has('circles') span.icon.icon-people.icon-third.icon-large.margin-right-xsmall solid-display( fields='' - data-src="${src}" + data-src="${src || value}" nested-field="members" counter-template="\\\${counter}" ) From 904108801b0a254ea0365fde4582dbddaf5fb8f6 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 29 Mar 2021 17:40:44 +0200 Subject: [PATCH 10/17] feature: title on card --- src/views/partials/widgets/hubl-admin-circle-name.pug | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/views/partials/widgets/hubl-admin-circle-name.pug b/src/views/partials/widgets/hubl-admin-circle-name.pug index 4ab5f4a..99c0836 100644 --- a/src/views/partials/widgets/hubl-admin-circle-name.pug +++ b/src/views/partials/widgets/hubl-admin-circle-name.pug @@ -1,4 +1,10 @@ if componentSet.has('admin') && componentSet.has('circles') + solid-widget(name='hubl-admin-circle-name-title') + template + div( + title="\${value}" + ) ${value} + solid-widget(name='hubl-admin-circle-name') template solid-link( @@ -8,6 +14,8 @@ if componentSet.has('admin') && componentSet.has('circles') solid-display( data-src="${src || value}" fields="name" + widget-name="hubl-admin-circle-name-title" + class-name="segment block one-line-ellipsis" ) solid-widget(name='hubl-admin-circle-fix-url-name') From 9031272c6aa70a8bf88e204a0a7eb75db5dfc6a6 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 29 Mar 2021 17:42:53 +0200 Subject: [PATCH 11/17] update: styling framework --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 935f8bd..3eeb2a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1159,9 +1159,9 @@ } }, "@startinblox/hubl-styling-framework": { - "version": "1.8.10", - "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.10.tgz", - "integrity": "sha512-3mT3H9Wgrgvja0JVu9TLEuvz1OtTeiN0UHuZx5IPLFDk5njGoDldElFEr3nw+BOMY1nJzSb8kHqW5cyIsP80cQ==" + "version": "1.8.12", + "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.12.tgz", + "integrity": "sha512-BtB6OSSfMgVQMwYFk9DGIRV6Uazasw/BHFoW1cmnlXszD3lQdbMrIKTd3AQI2/tEacTVIUqcXJ+pWt6g0djbeQ==" }, "@types/q": { "version": "1.5.4", diff --git a/package.json b/package.json index cfebc9f..9f5a3bb 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ ] }, "dependencies": { - "@startinblox/hubl-styling-framework": "^1.8.10", + "@startinblox/hubl-styling-framework": "^1.8.12", "cross-env": "^7.0.3", "fs-extra": "^9.0.1", "normalize.css": "^8.0.1", From 1f34edc6284deddb902b11905b4f1ca8ef672e13 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Mon, 29 Mar 2021 18:08:35 +0200 Subject: [PATCH 12/17] fix: 2-lines-ellipsis moved --- src/views/partials/widgets/hubl-admin-circle-name.pug | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/views/partials/widgets/hubl-admin-circle-name.pug b/src/views/partials/widgets/hubl-admin-circle-name.pug index 99c0836..1ea5363 100644 --- a/src/views/partials/widgets/hubl-admin-circle-name.pug +++ b/src/views/partials/widgets/hubl-admin-circle-name.pug @@ -1,7 +1,7 @@ if componentSet.has('admin') && componentSet.has('circles') solid-widget(name='hubl-admin-circle-name-title') template - div( + div.segment.block.one-line-ellipsis( title="\${value}" ) ${value} @@ -15,7 +15,6 @@ if componentSet.has('admin') && componentSet.has('circles') data-src="${src || value}" fields="name" widget-name="hubl-admin-circle-name-title" - class-name="segment block one-line-ellipsis" ) solid-widget(name='hubl-admin-circle-fix-url-name') From 35fd5ba76e181a40161d30726b0be355e3d01181 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Mon, 29 Mar 2021 18:20:43 +0200 Subject: [PATCH 13/17] fix: additional class removed --- src/views/partials/admin/page-admin-circles-join.pug | 2 +- src/views/partials/admin/page-admin-circles-leave.pug | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/partials/admin/page-admin-circles-join.pug b/src/views/partials/admin/page-admin-circles-join.pug index 2da159b..3de69c6 100644 --- a/src/views/partials/admin/page-admin-circles-join.pug +++ b/src/views/partials/admin/page-admin-circles-join.pug @@ -33,7 +33,7 @@ div.segment.full.padding-small.padding-top-xsmall.sm-padding-xsmall.whitespace-n class-segment1='segment hover bg-color-white shadow border-rounded-xxsmall full text-top whitespace-normal' class-segment2='segment block padding-xlarge text-center' class-segment3='segment full padding-xlarge padding-top-medium sm-padding-medium border-top border-color-grey text-center whitespace-normal' - class-name='segment block one-line-ellipsis text-xlarge text-bold text-color-heading margin-bottom-xsmall whitespace-normal' + class-name='segment block text-xlarge text-bold text-color-heading margin-bottom-xsmall whitespace-normal' class-subtitle='segment two-lines-ellipsis margin-bottom-xlarge sm-margin-bottom-medium whitespace-normal circle-subtitle-custom' class-counter='segment block margin-bottom-large whitespace-normal' diff --git a/src/views/partials/admin/page-admin-circles-leave.pug b/src/views/partials/admin/page-admin-circles-leave.pug index 1ba1a7a..36e709d 100644 --- a/src/views/partials/admin/page-admin-circles-leave.pug +++ b/src/views/partials/admin/page-admin-circles-leave.pug @@ -42,7 +42,7 @@ div.segment.full.padding-small.padding-top-xsmall.sm-padding-xsmall.whitespace-n class-segment1='segment hover bg-color-white shadow border-rounded-xxsmall full text-top whitespace-normal' class-segment2='segment block padding-xlarge text-center' class-segment3='segment full padding-xlarge padding-top-medium sm-padding-medium border-top border-color-grey text-center whitespace-normal' - class-circle.name='segment block one-line-ellipsis text-xlarge text-bold text-color-heading margin-bottom-xsmall whitespace-normal' + class-circle.name='segment block text-xlarge text-bold text-color-heading margin-bottom-xsmall whitespace-normal' class-circle.subtitle='segment two-lines-ellipsis margin-bottom-xlarge sm-margin-bottom-medium whitespace-normal circle-subtitle-custom' class-counter='segment block margin-bottom-large whitespace-normal' From 1fd6a40abe706fa8c1d4093f309ff3df39240d9e Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Mon, 29 Mar 2021 18:25:05 +0200 Subject: [PATCH 14/17] fix: style duplicated --- src/styles/index.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/styles/index.scss b/src/styles/index.scss index 16342bc..f6a3305 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -158,3 +158,8 @@ hubl-create-contact { } } } + +/* Style that already exists in the framework but strangely I can't find it in the inspector. So I duplicate it here */ +.two-lines-ellipsis { + display: -webkit-box !important; +} From c693cc90600d0d81ee6cc47404117fa02db53910 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 30 Mar 2021 12:54:27 +0200 Subject: [PATCH 15/17] fix: pagination --- src/views/partials/admin/page-admin-circles-join.pug | 2 +- src/views/partials/admin/page-admin-circles-leave.pug | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/partials/admin/page-admin-circles-join.pug b/src/views/partials/admin/page-admin-circles-join.pug index 3de69c6..dc2d540 100644 --- a/src/views/partials/admin/page-admin-circles-join.pug +++ b/src/views/partials/admin/page-admin-circles-join.pug @@ -27,7 +27,7 @@ div.segment.full.padding-small.padding-top-xsmall.sm-padding-xsmall.whitespace-n fields='segment1(segment2(community.community.logo), segment3(name, subtitle, counter, members))' filtered-by=`admin-circle-filter-${page}` order-by='name' - paginate-by='4' + paginate-by='20' loader-id=`loader-admin-circles-${page}` class-segment1='segment hover bg-color-white shadow border-rounded-xxsmall full text-top whitespace-normal' diff --git a/src/views/partials/admin/page-admin-circles-leave.pug b/src/views/partials/admin/page-admin-circles-leave.pug index 36e709d..43a75b2 100644 --- a/src/views/partials/admin/page-admin-circles-leave.pug +++ b/src/views/partials/admin/page-admin-circles-leave.pug @@ -36,7 +36,7 @@ div.segment.full.padding-small.padding-top-xsmall.sm-padding-xsmall.whitespace-n fields='segment1(segment2(circle.community.community.logo), segment3(circle.name, circle.subtitle, counter, leaveButton))' filtered-by=`admin-circle-filter-${page}` order-by='name' - paginate-by='4' + paginate-by='20' loader-id=`loader-admin-circles-${page}` class-segment1='segment hover bg-color-white shadow border-rounded-xxsmall full text-top whitespace-normal' From 60b9e542942d309084509031478c3c247989e6df Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 30 Mar 2021 11:36:44 +0000 Subject: [PATCH 16/17] fix: typo --- src/locales/en.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/locales/en.json b/src/locales/en.json index 83be2d6..f097c39 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -75,7 +75,7 @@ "backlink": "Back", "title": " Create a circle", "labelStatus": "Circle status", - "labelCommunity": "Circle's community *", + "labelCommunity": "Circle community *", "labelName": "Circle name *", "labelSubtitle": "Circle headline *", "labelDescription": "Circle description", @@ -87,7 +87,7 @@ "backlink": "Back", "title": "Edit your circle", "labelStatus": "Circle status *", - "labelCommunity": "Circle's community *", + "labelCommunity": "Circle community *", "labelName": "Circle name *", "labelOwner": "Admin *", "labelDescription": "Circle description", From 4860b20e20e4be6643aaaa0c5f8c1ea3d015ee3b Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 30 Mar 2021 21:10:05 +0200 Subject: [PATCH 17/17] minor: i18n component writing - #1050 --- README.md | 119 +++++++++++++++++++++++++------------------------- src/index.pug | 14 +++--- 2 files changed, 66 insertions(+), 67 deletions(-) diff --git a/README.md b/README.md index ecb59f9..c58877a 100644 --- a/README.md +++ b/README.md @@ -120,14 +120,7 @@ On `config.json`: "css": "/path/to/custom.css", "i18n": { "lang": "fr", - "force": "false", - "files": [ - { - "name": "yourCustomLangName", - "file": "/path/to/file.json" - }, - ... - ] + "force": "false" } } } @@ -139,8 +132,6 @@ Where: * `client.css` is an URL to a distant CSS that'll be the last one loaded by the Hubl * `client.i18n.lang` is the fallback langage in case the visitor's browser one does not contain the string * `client.i18n.force` allows to ignore the visitor's browser langage and force the `client.i18n.lang` one -* `client.i18n.files[].name` allows to use custom client lang file. -* `client.i18n.files[].file` is the path the the json lang file ### Allow to login to your application @@ -159,56 +150,6 @@ Where: * `authority` is the OpenID Provider. Usually, if you use `djangoldp_account` it's the same as your djangoldp server. -### Custom lang files - -Each client can overwrite langs files with their own or even create custom langs. - -#### Overwrite langs - -On `config.json`: - -```json -{ - "client": { - "i18n": { - "files": [ - { - "name": "fr", - "file": "/path/to/custom-fr.json" - } - ] - } - } -} -``` - -#### Custom langs - -Needs `client.i18n.force` to `true` and `client.i18n.lang` to the custom lang name. - -Your custom JSON file **must** contain every keys, from the template and from every bloxes, prefixed by the blox namespace. See example on `src/locales/fr.json`. - -On `config.json`: - -```json -{ - "client": { - "i18n": { - "lang": "pirate", - "force": "true", - "files": [ - { - "name": "pirate", - "file": "/path/to/yarr.json" - } - ] - } - } -} -``` - -Setting custom langs will not allow user to choose their own lang. - ## Optional modules ### Adding modules @@ -405,6 +346,64 @@ You can get only future events by using: "get": "http://server.url/events/future/", ``` +### Internationalization + +Each client can overwrite langs files with their own or even create custom langs. + +#### Overwrite langs + +On `config.json`: + +```json + { + "type": "lang", + "parameters": { + "name": "fr", + "file": "/path/to/fr.json" + }, + "route": false + } +``` + +Where: + +* `parameters.name` allows to use custom client lang file. +* `parameters.file` is the path the the json lang file + +#### Custom langs + +Needs `client.i18n.force` to `true` and `client.i18n.lang` to the custom lang name. + +Your custom JSON file **must** contain every keys, from the template and from every bloxes, prefixed by the blox namespace. See example on `src/locales/fr.json`. + +On `config.json`: + +```json + "client": { + "i18n": { + "lang": "pirate", + "force": "true" + } + }, + "components": [ + { + "type": "i18n", + "parameters": { + "name": "pirate", + "file": "/path/to/yarr.json" + }, + "route": false + } + ] +``` + +Where: + +* `parameters.name` allows to use custom client lang file. +* `parameters.file` is the path the the json lang file + +Setting custom langs will not allow user to choose their own lang. + ### Job Offers Job Offers includes a job board with conversation. To activate them diff --git a/src/index.pug b/src/index.pug index 6e6d152..e36d8b2 100644 --- a/src/index.pug +++ b/src/index.pug @@ -175,6 +175,13 @@ html(lang="en") if component.type == "notification" include views/partials/notifications.pug + if component.type == "lang" + hubl-lang( + hidden + lang=component.parameters.name + file=component.parameters.file + ) + if componentSet.has('profileDirectory') .scrollbar-content( id=`${getRoute("profileDirectory", true)}-profile` @@ -220,13 +227,6 @@ html(lang="en") hidden lang=client.i18n.lang?client.i18n.lang:"fr" )&attributes({"force": client.i18n.force}) - if client.i18n.files - for clientI18n in client.i18n.files - hubl-lang( - hidden - lang=clientI18n.name - file=clientI18n.file - ) div( id="swal-content-text"