feature: new circles-admin panel

This commit is contained in:
gaelle morin 2021-03-26 15:11:42 +01:00
parent 17cce1ea6b
commit b0d406c5fa
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
18 changed files with 283 additions and 130 deletions

View File

@ -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.",

View File

@ -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.",

View File

@ -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.",

2
src/scripts/masonry.js Normal file
View File

@ -0,0 +1,2 @@
var grid = document.querySelector('.masonry > div:nth-child(2)');
console.log(grid);

View File

@ -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;
}
}
}
}
}
}

View File

@ -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);
}
}
}
@media (max-width: 768px) {
&.sm-full {
input,
button {
width: 100%;
}
}
}
}

View File

@ -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

View File

@ -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`
)

View File

@ -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`
)

View File

@ -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})"
)

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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'
)

View File

@ -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

View File

@ -0,0 +1,3 @@
if componentSet.has('admin') && componentSet.has('circles')
solid-widget(name='hubl-admin-community-logo')
template ${value != "" ? `<img style="height:76px; max-width:100%;" src="${value}" alt="community's logo" />` : `<div style="height:76px;"></div>`}

View File

@ -0,0 +1,2 @@
solid-widget(name='hubl-community-logo')
template ${value != "" ? `<img src="${value}" />` : `<img src="/images/alien.webp" />`}