Merge branch 'gm-ui-alpha' into 'master'

Gm ui alpha

See merge request startinblox/applications/sib-app!20
This commit is contained in:
Jean-Baptiste Pasquier 2019-04-17 16:34:35 +00:00
commit 2b709b2033
22 changed files with 284 additions and 116 deletions

View File

@ -28,5 +28,6 @@ script(type="module" src="https://unpkg.com/@startinblox/core@0.6")
script(type="module" src="https://unpkg.com/@startinblox/router@0.6") script(type="module" src="https://unpkg.com/@startinblox/router@0.6")
script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1") script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
script(type="module" src="https://unpkg.com/@startinblox/component-notifications") script(type="module" src="https://unpkg.com/@startinblox/component-notifications")
script(type="module" src="https://unpkg.com/@startinblox/component-conversation")
script(type="module" src="https://unpkg.com/@startinblox/component-directory") script(type="module" src="https://unpkg.com/@startinblox/component-directory")

View File

@ -9,10 +9,11 @@ html(lang="en")
include dependencies.pug include dependencies.pug
body body
div.layer div.layer
header#header(role='banner') header#header.row(role='banner')
include header.pug include header.pug
#content .content.row
include menu-left.pug include menu-left.pug
main#mainContainer main#mainContainer
//- #dashboard(hidden) //- #dashboard(hidden)
include page-dashboard.pug include page-dashboard.pug

View File

@ -4,27 +4,23 @@
.form-view .form-view
sib-form( sib-form(
data-src=`${sdn}/circles/`, data-src=`${sdn}/circles/`,
range-owner=`${sdn}/members/`, range-owner=`${sdn}/users/`,
range-team=`${sdn}/members/` range-team=`${sdn}/members/`
data-fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID', data-fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
label-description='Description',
label-foaf:jabberID='Chatroom id',
label-name="Channel's name", label-name="Channel's name",
label-description='Description',
label-owner='Owner of this channel', label-owner='Owner of this channel',
label-foaf:jabberID='Chatroom id',
label-team='Member(s) of this channel', label-team='Member(s) of this channel',
value-description-text='You can write a short description like "Here, we are like Pinky and the Brain, we talk about strategy to conquer the world".', value-description-text='You can write a short description like "Here, we are like Pinky and the Brain, we talk about strategy to conquer the world".',
widget-description-text='hdapp-form-text',
value-team-text='Add any members as you want.',
widget-team-text='hdapp-form-text',
value-owner-text='The one who will admin this channel', value-owner-text='The one who will admin this channel',
widget-owner-text='hdapp-form-text', value-team-text='Add any members as you want.',
widget-description='sib-form-textarea', widget-description='sib-form-textarea',
widget-jabberRoom='sib-form-checkbox', widget-jabberRoom='sib-form-checkbox',
widget-team='sib-form-multiple-dropdown', widget-team='sib-form-multiple-dropdown'
) )

View File

@ -2,14 +2,17 @@ div.grid-layer
include templates/template-groups.pug include templates/template-groups.pug
include templates/template-skills.pug include templates/template-skills.pug
include templates/template-joboffers-filter.pug
include templates/template-joboffers-conversation.pug
div.grid-layer-main.containerV div.grid-layer-main.containerV
h2 New offers h2 New offers
span Here you can find and post offers span Here you can find and post offers
sib-display#offers-list( sib-display#offers-list(
data-src=`${sdn}/job-offers/`, data-src=`${sdn}/job-offers/`,
data-fields='user-thumb, creationDate, title, description, skills, send', data-fields='user-thumb, creationDate, title, description, skills, send, conversation',
set-conversation="@id"
set-user-thumb='author.account.picture, author.first_name, author.groups', set-user-thumb='author.account.picture, author.first_name, author.groups',
widget-author.account.picture='sib-display-img', widget-author.account.picture='sib-display-img',
widget-author.groups='groups-name', widget-author.groups='groups-name',
@ -20,19 +23,20 @@ div.grid-layer
action-send='member-chat', action-send='member-chat',
label-send='Send a private message', label-send='Send a private message',
widget-conversation='joboffers-conversation'
search-range-skills=`${sdn}/skills/`, search-range-skills=`${sdn}/skills/`,
search-fields='content, skills, open', search-fields='content, open, skills',
set-content='title, description', set-content='title, description',
search-label-content='Search by keyword', search-label-content='Search by keyword',
search-label-skills='Search by skills', search-label-skills='Search by skills',
search-label-open='Filter opened or closed offers',
search-widget-content='sib-form-placeholder-text', search-widget-content='sib-form-placeholder-text',
search-widget-skills='sib-form-placeholder-dropdown', search-widget-skills='sib-form-placeholder-dropdown',
search-widget-open='sib-form-placeholder-text' search-widget-open='joboffers-filter'
) )
div.grid-layer-links.containerV div.grid-layer-links.containerV
template#groups-list-template template#groups-list-template

View File

@ -2,37 +2,32 @@
h1 New project h1 New project
p.form-goal Here you can create your project, add members and assign them a job. p.form-goal Here you can create your project, add members and assign them a job.
.form-view .form-view
sib-form( sib-form.block(
data-src=`${sdn}/projects/`, data-src=`${sdn}/projects/`,
range-customer=`${sdn}/customers/`,
range-members=`${sdn}/members/`, range-members=`${sdn}/members/`,
range-team=`${sdn}/users/`, range-team=`${sdn}/users/`,
data-fields=`customer.name, name, customer.logo, description, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone, block-fee, jabberRoom, foaf:jabberID, block-team`, data-fields='block-project__info, block-project__fee, block-project__customer',
set-block-team=`team, members`,
set-block-fee=`businessProvider, businessProviderFee`,
label-customer.name='Business name',
label-name='Project name',
label-description='Project description',
label-customer.logo='Customer logo',
label-customer.companyRegister='Company register',
label-customer.address='Customer address',
label-customer.firstName='Contact firstname',
label-customer.lastName='Contact lastname',
label-customer.role='Contact role',
label-customer.email='Contact email',
label-customer.phone='Contact phone',
label-businessProvider='Business provider',
label-businessProviderFee='Fee (%)',
label-foaf:jabberID='Chatroom id',
label-team='Teammates',
label-members='Member role'
widget-jabberRoom='sib-form-checkbox', set-block-project__info='customer.name, name, customer.logo, description',
widget-description='sib-form-textarea', label-customer.name='Customer\'s name',
widget-team='sib-form-multiple-dropdown', label-name='Project\'s name',
widget-members='sib-form-multiple-dropdown', label-customer.logo='Customer\'s logo',
bind-resources label-description='Project description',
set-block-project__fee='fieldset-fee, businessProvider, businessProviderFee',
widget-fieldset-fee='template-legend-fee',
label-businessProvider='Business provider',
label-businessProviderFee='Amount of the contribution',
set-block-project__customer='fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone',
widget-fieldset-customer='template-legend-customer',
label-customer.companyRegister='Company register',
label-customer.address='Address',
label-customer.firstName='Name of the contact at the customer\'s premises',
label-customer.lastName='Firstname of the contact at the customer\'s premises',
label-customer.role='Role within the company',
label-customer.email='Email',
label-customer.phone='Phone'
) )

View File

@ -1,10 +1,52 @@
sib-widget(name='template-legend-fee')
template
span Fee
sib-widget(name='template-legend-customer')
template
span Customer information
sib-widget(name='template-legend-team')
template
span The team
.frame-form .frame-form
h1 Edit your project h1 Edit your project
p.form-goal Here you can edit your projet's details p.form-goal Here you can edit your projet's details
.form-view .form-view
sib-form.block( sib-form.block(
data-src=`${sdn}/projects/`,
range-members=`${sdn}/members/`,
range-team=`${sdn}/users/`, range-team=`${sdn}/users/`,
data-fields='block-project__info, block-project__fee, block-project__customer',
set-block-project__info='customer.name, name, customer.logo, description',
label-customer.name='Customer\'s name',
label-name='Project\'s name',
label-customer.logo='Customer\'s logo',
label-description='Project description',
set-block-project__fee='fieldset-fee, businessProvider, businessProviderFee',
widget-fieldset-fee='template-legend-fee',
label-businessProvider='Business provider',
label-businessProviderFee='Amount of the contribution',
set-block-project__customer='fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone',
widget-fieldset-customer='template-legend-customer',
label-customer.companyRegister='Company register',
label-customer.address='Address',
label-customer.firstName='Name of the contact at the customer\'s premises',
label-customer.lastName='Firstname of the contact at the customer\'s premises',
label-customer.role='Role within the company',
label-customer.email='Email',
label-customer.phone='Phone',
bind-resources bind-resources
) )
//-
set-block-project__team='fieldset-team, team',
widget-fieldset-team='template-legend-team',
widget-team='sib-form-multiple-dropdown',
(sib-form-multiple-dropdown ne fonctionne pas).

View File

@ -1,11 +1,11 @@
.frame .frame
include templates/template-business-provider.pug
include templates/template-customer.pug include templates/template-customer.pug
include templates/template-team.pug include templates/template-team.pug
sib-display( sib-display(
data-fields='block-title, infos, block-lead, block-fee, block-customer, block-team', data-fields='block-title, infos, block-lead, block-fee, block-customer, block-team',
extra-context='{"project-profile":"${sdn}/projects/"}'
set-block-title='const-title1, number, customer.name, const-title2, name, entitled, creationDate', set-block-title='const-title1, number, customer.name, const-title2, name, entitled, creationDate',
value-const-title1='N°', value-const-title1='N°',
@ -18,14 +18,9 @@
value-label-description='DESCRIPTION:', value-label-description='DESCRIPTION:',
widget-customer.logo='sib-display-img', widget-customer.logo='sib-display-img',
set-block-fee='label-fee, details-cell, details-business', set-block-fee='label-fee, businessProvider',
set-details-cell='cell-name, cell-fee, percentage',
set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage',
value-label-fee='FEE:', value-label-fee='FEE:',
value-cell-name='Happy Dev Paris:', widget-businessProvider='template-business-provider'
value-cell-fee='5',
value-percentage='%',
value-comma=', ',
set-block-customer='label-customer, customer', set-block-customer='label-customer, customer',
value-label-customer='CUSTOMER INFORMATIONS:' value-label-customer='CUSTOMER INFORMATIONS:'

View File

@ -12,6 +12,7 @@
appearance: none; appearance: none;
border-style: none; border-style: none;
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09); box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
color: $color-taupe-gray;
font-size: 1.36rem; font-size: 1.36rem;
line-height: 1.80; line-height: 1.80;
margin-top: 1.36rem; margin-top: 1.36rem;
@ -32,9 +33,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 14px 9px; background-size: 14px 9px;
box-sizing: border-box; box-sizing: border-box;
color: $color-taupe-gray;
display: inline-block; display: inline-block;
padding: 0.68rem;
width: 100%; width: 100%;
> option:not(:first-child) { > option:not(:first-child) {

View File

@ -18,7 +18,7 @@
#project-create, #project-create,
#project-edit { #project-edit {
flex: 1; flex: 1;
font-size: 1.7rem; font-size: 1.5rem;
h1 { h1 {
color: $color-purple-dark; color: $color-purple-dark;
@ -39,11 +39,12 @@
div[name^='block-'] { div[name^='block-'] {
display: flex; display: flex;
flex-direction: column;
> * {
margin-right: 4rem;
}
} }
@include styleTemplateFieldset('fee');
@include styleTemplateFieldset('customer');
@include styleTemplateFieldset('team');
sib-form-auto-completion, sib-form-auto-completion,
sib-form-checkbox, sib-form-checkbox,
@ -64,7 +65,7 @@
border: none; border: none;
color: $color-purple-dark; color: $color-purple-dark;
line-height: 1.5; line-height: 1.5;
width: 95%; width: 100%;
} }
input, input,
@ -86,6 +87,7 @@
label { label {
color: $color-dark-lava; color: $color-dark-lava;
font-weight: 600; font-weight: 600;
text-transform: initial;
} }
} }

View File

@ -9,10 +9,6 @@
padding: 1.6rem 0.64rem; padding: 1.6rem 0.64rem;
position: relative; position: relative;
z-index: 1; z-index: 1;
//position: relative;
//@include border-shadow(bottom);
//flex-grow: 0;
//flex-basis : 150px;
> * { > * {
padding: 0 2.5rem; padding: 0 2.5rem;

View File

@ -20,6 +20,7 @@
@import 'member-profile'; @import 'member-profile';
@import 'members'; @import 'members';
@import 'project-profile'; @import 'project-profile';
@import 'member-chat';
// @import 'members'; // @import 'members';
@import 'header'; @import 'header';

View File

@ -10,14 +10,23 @@
--sib-notifications-theme: #{$color-46-100-50}; --sib-notifications-theme: #{$color-46-100-50};
body { body {
/*Will help to make .content fit your height screen size. Part.1*/
background-color: $color-anti-flash-white; background-color: $color-anti-flash-white;
color: $color-text-base; color: $color-text-base;
display: flex;
flex-direction: column;
font-size: 1.6rem; font-size: 1.6rem;
margin: 0 auto; height: 100vh;
margin: 0;
overflow: hidden;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
} }
img {
max-width: 100%;
}
h1, h1,
h2, h2,
h3, h3,
@ -100,10 +109,12 @@ li {
overflow-x: hidden; overflow-x: hidden;
} }
/*
#content { #content {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
} }
*/
#mainContainer { #mainContainer {
flex-grow: 1; flex-grow: 1;
@ -222,3 +233,99 @@ member-info-groups {
@extend %group; @extend %group;
} }
/* NEW RESPONSIVE */
.right-sidebar {
overflow: hidden;
transition: width 0.3s;
}
.right-sidebar.js-right-sidebar-expanded {
width: 130px;
}
.right-sidebar.js-right-sidebar-collapsed {
width: 62px;
}
/*Define the basic row-column properties that construct the foundation*/
.row {
display: flex;
max-width: 100%;
}
.content {
/*Will help to make .content fit your height screen size. Part 2*/
flex-direction: row;
height: 100%;
overflow: hidden;
}
.col {
min-width: 0;
}
.block-grid {
display: flex;
flex-wrap: nowrap;
height: 100%;
}
/* Dividing into columns */
@mixin respond-to($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}
@else {
@warn "Sorry, no value could be retrieved from `#{$breakpoint}`."
+ "Available breakpoints are: #{map-keys($breakpoints)}.";
}
}
.small-2 {
@include respond-to('phone'){
display: block;
flex: 0 1 calc(100% / 12 * 2);
}
}
.small-shrink {
@include respond-to('phone') {
display: block;
flex: 0 1 auto;
}
}
.medium-auto {
@include respond-to('tablet') {
display: block;
flex: 1;
overflow: auto;
}
}
.small-12 {
@include respond-to('phone') {
display: block;
flex: 0 1 calc(100% / 12 * 12);
}
}
.small-auto {
@include respond-to ('phone') {
display: block;
flex: 1;
overflow: auto;
}
}

View File

@ -0,0 +1,3 @@
#member-chat {
width: 100%;
}

View File

@ -3,7 +3,6 @@
> div { > div {
nav { nav {
transition: all 0.5s; transition: all 0.5s;
> sib-router { > sib-router {

View File

@ -147,3 +147,14 @@
} }
} }
} }
@mixin styleTemplateFieldset($name) {
template-legend-#{$name} {
border-bottom: 1px solid $color-link-water;
color: $color-purple-dark;
font-size: 1.8rem;
font-weight: 600;
padding-bottom: 1rem;
}
}

View File

@ -58,6 +58,7 @@
[name='infos'] { [name='infos'] {
display: flex; display: flex;
justify-content: space-between;
[name='description'] { [name='description'] {
width: 90%; width: 90%;
@ -68,25 +69,27 @@
display: block; display: block;
height: 8.5vh; height: 8.5vh;
position: relative; position: relative;
text-align: center; text-align: end;
width: 15vw; width: 15vw;
} }
} }
[name='businessProvider'] {
ul {
list-style: none;
padding-left: 0;
[name^='details-'] { li {
display: flex;
font-size: 1.5rem; &:first-child {
margin-bottom: 0.85rem; margin-bottom: 0.5em;
}
[name='cell-name'],
[name='business-contribution'] { span {
font-weight: bold; font-weight: bold;
margin-right: 0.5rem; }
} }
[name='comma'] {
margin-right: 0.2em;
} }
} }
} }
@ -153,30 +156,10 @@
&::before { &::before {
color: $color-selective-yellow; color: $color-selective-yellow;
font-size: 2rem; font-size: 2.2rem;
padding: 0 1rem 0 0; padding: 0 1rem 0 0;
} }
} }
[name$='name'] {
@include mdi('account-outline');
&::before {
padding-left: 0.2em;
}
}
[name$='email'] {
@include icon('envelope');
}
[name$='phone'] {
@include mdi('cellphone-iphone');
&::before{
padding-left: 0.2em;
}
}
} }
} }
} }
@ -227,13 +210,13 @@
} }
span ~ sib-display { span ~ sib-display {
div { > div {
display: flex; display: flex;
margin-left: 1rem;
div[name='name'] { div[name='name'] {
@extend %group; @extend %group;
margin-left: 1rem;
} }
} }
} }

View File

@ -85,10 +85,6 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
@include mdi('atom'); @include mdi('atom');
} }
sib-multiple[name='user.groups'] {
@include mdi('account-outline');
}
[name$='email'] * { [name$='email'] * {
@include mdi('email-outline'); @include mdi('email-outline');
} }
@ -106,6 +102,11 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
color: $color-spun-pearl; color: $color-spun-pearl;
font-weight: 600; font-weight: 600;
margin: 2em 0 0.5em; margin: 2em 0 0.5em;
text-transform: uppercase;
> div {
padding-bottom: 1rem;
}
} }
%notification { %notification {
@ -145,5 +146,5 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
$breakpoints: ( $breakpoints: (
phone: 480px, phone: 480px,
tablet: 768px, tablet: 768px,
desktop: 1024px, desktop: 1024px
); ) !default;

View File

@ -0,0 +1,6 @@
sib-widget(name='template-business-provider')
template
ul
li #[span Happy Dev Paris:] 5%
li #[span Business provider:] ${value.name}, ${value.fee ? value.fee:0}%

View File

@ -13,7 +13,7 @@ sib-widget(name='customer-template')
div div
h5 Contact: h5 Contact:
ul ul
li(name='name') #[span ${value.firstName} ${value.lastName}], ${value.role} li(class='mdi-account-outline') #[span ${value.firstName} ${value.lastName}], ${value.role}
li(name='email') li(class='mdi-email-outline')
a(href='mailto:${value.email}') ${value.email} a(href='mailto:${value.email}') ${value.email}
li(name='phone') ${value.phone} li(class='mdi-cellphone-iphone') ${value.phone}

View File

@ -0,0 +1,3 @@
sib-widget
template
sib-conversation(data-src="${value}", id-suffix="threads")

View File

@ -0,0 +1,8 @@
sib-widget(name='joboffers-filter')
template
select
option(name='Offers',disabled) Offers
option(selected,name='Current offers') Current offers
option(name='Expired offers') Expired offers
option(name='All offers') All offers
option(name='My offers') Only my offers

View File

@ -1,11 +1,12 @@
sib-widget(name='team-template') sib-widget(name='team-template')
template template
sib-display( sib-display(
data-src="${value.user.account['@id']}", data-src="${value.user['@id']}"
data-fields='picture', data-fields='account.picture',
widget-picture='sib-display-img' widget-account.picture='sib-display-img'
) )
div div(name='user.thumb')
span ${value.user.name} span ${value.user.name}
sib-display( sib-display(
data-src="${value.user.groups['@id']}", data-src="${value.user.groups['@id']}",
@ -14,3 +15,17 @@ sib-widget(name='team-template')
) )
span ${value.name} span ${value.name}
//-
include templates/template-groups.pug
sib-widget(name='team-template')
template
sib-display(
data-src="${value.user['@id']}",
data-fields='account.picture, name, groups',
widget-account.picture='sib-display-img',
widget-groups='groups-name',
multiple-groups
)
span ${value.name}