feature: add circle to a community

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

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 *",

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

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;
+    height: 76px;
-    width: 206px;
+    width: 100%;
-    max-width: 100%;
+    display: block;
+    div {
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
   }
 
   .tab.active {

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

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

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}`

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'

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

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 != "" ? `<img style="height:76px; max-width:100%;" src="${value}" alt="community's logo" />` : `<div style="height:76px;"></div>`}
+    template ${value != "" ? `<div \style="background-image:url(${value});" />` : `<div></div>`}