feature: project-edit

src/views/project/page-project-edit.pug

@@ -1,40 +1,64 @@
-div.content-box__info
+solid-ac-checker(permission='acl:Read', bind-resources)
+  div.segment.padding-large.border-bottom.border-color-grey.clearfix
+    div.segment.lg-half.float-left
+      solid-display.text-xxlarge.text-letter-spacing-large(
+        bind-resources
+        fields='const-title1, number, customer.name, dash, name'
 
+        class-const-title1='text-color-heading text-bold text-uppercase'
+        class-number='text-color-heading text-bold text-uppercase word-spacing-right'
+        class-customer.name='text-color-heading text-bold text-uppercase'
+        class-dash='text-color-heading text-bold text-xlarge'
+        class-name=''
+
+        value-const-title1='N°'
+        value-dash=' - '
+      )
+    div.segment.lg-half.float-left.text-right
+      solid-link(class='backlink right', bind-resources, next='project-profile' data-trans='project.edit.backlink')
+
+div.segment.padding-large
   include ../../templates/hubl-user-avatar.pug
 
   solid-widget(name="project-edit-members-delete")
     template
       solid-ac-checker(permission="acl:Delete" data-src="${src}")
         solid-delete(
-          class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
+          class='button text-xsmall text-bold text-uppercase color-secondary bordered'
           data-src="${src}"
           data-label=''
           data-trans='data-label=project.edit.buttonDelete'
         )
 
-  solid-link(class='backlink right', bind-resources, next='project-profile' data-trans='project.edit.backlink')
-
   solid-ac-checker(permission='acl:Write', bind-resources)
-    h1(data-trans='project.edit.title')
-
     div#loader-project-edit.loader.loader-top
       div
       div
       div
       div
 
-    solid-form.form.button-register(
+    //- Add translation for description and captain in the translate file
+    solid-form.segment.clearfix.button-register(
       bind-resources
     
-      fields='line-1(customer.name, name)'
+      fields='customer.name, name, description, captain'
       required-customer.name
       required-name
+      required-captain
+      range-captain=`${endpoints.users || endpoints.get.users}`
 
       label-name=''
-      class-name='form-label is-light is-half-width input-text-like'
-
       label-customer.name=''
-      class-customer.name='form-label is-light is-half-width input-text-like'
+      label-description=''
+      label-captain=''
+
+      class-customer.name='segment margin-bottom-medium lg-half padding-right-small text-small text-semibold text-uppercase text-color-heading float-left'
+      class-name='segment margin-bottom-medium lg-half padding-left-small text-small text-semibold text-uppercase text-color-heading float-left'
+      class-description='segment margin-bottom-medium lg-full text-small text-semibold text-uppercase text-color-heading'
+      class-captain='segment margin-bottom-medium lg-half padding-right-small text-small text-semibold text-uppercase text-color-heading icon icon-magnify'
+
+      widget-description='solid-form-textarea'
+      widget-captain='solid-form-dropdown-autocompletion-label'
       
       partial=""
 
@@ -44,16 +68,16 @@ div.content-box__info
       data-trans='label-name=project.edit.labelName;label-customer.name=project.edit.labelCustomer;submit-button=project.edit.buttonSubmit'
     )
 
-  h2(data-trans='project.edit.subTitle')
+  h3.segment.padding-bottom-small.border-bottom.border-color-grey.text-color-heading.text-bold.text-letter-spacing-large(data-trans='project.edit.subTitle')
 
   solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
-    solid-form.block.select-add(
+    solid-form.block.segment.margin-bottom-xlarge.clearfix.button-register(
       bind-resources 
       nested-field='members'
       fields='user'
       range-user=`${endpoints.users || endpoints.get.users}`
 
-      class-user='team'
+      class-user='add-member'
       label-user=''
       widget-user='solid-form-dropdown-autocompletion'
 
@@ -63,22 +87,28 @@ div.content-box__info
 
   .table-wrapper
     .table
-      div.table-header.grey-color
+      div.table-header.bg-color-third.text-color-heading
-        div.w280(data-trans='project.edit.tableHeader1')
+        div.table-cell.w280(data-trans='project.edit.tableHeader1')
-        div.w162(data-trans='project.edit.tableHeader2')
+        div.table-cell.w162(data-trans='project.edit.tableHeader2')
 
       //-class='table-body'
       solid-display(
         class='table-body'
         bind-resources
         nested-field='members'
-        fields='classGroup(classGrid(user.account.picture, sup(user.name, user.groups), sub(user.communities))), self'
+        fields='classGroup(classGrid(user.account.picture, content(name-and-icon(user.name, user.groups), sub(atom, user.communities)))), self'
         loader-id='loader-project-edit'
 
-        class-classGroup='w280 cell border cell-with-id-card user-thumb is-spaced'
+        class-classGroup='table-cell w280'
-        class-user.account.picture='user-thumb__picture avatar'
+        class-self='table-cell w-162'
-        class-user.name='user-thumb__name'
+        class-classGrid='segment margin-left-xlarge user-thumb'
-        class-user.groups='user-thumb__groups'
+        class-user.account.picture='user-thumb-avatar'
+        class-content='user-thumb-content'
+        class-name-and-icon='user-thumb-content__name-and-icon'
+        class-user.name='name'
+        class-user.groups='tag color-primary'
+        class-sub='user-thumb-content__sub-text community'
+        class-atom='icon icon-primary mdi-atom'
         multiple-user.communities
         multiple-user.communities-fields="community.name"