Commit 5cb53e15 authored by pacome's avatar pacome

[client/angled-project] quick fix on modal style for teams

parent c2e38076
......@@ -2,139 +2,169 @@ import { DIV, NODISPLAY, H2, SPAN } from 'sdi/components/elements';
import { ModalRender, ModalClose } from 'sdi/components/modal';
import { makeLabel, makeIcon } from '../buttons';
import tr from 'sdi/locale';
import { inputText, CLEAR_INPUT_TEXT } from 'angled-core/../sdi/components/input';
import { getTeamInputFilter, getTeamFilteredContact, getFormInputTeamMembers, getTeamFilteredContactExists } from 'angled-core/queries/ui';
import { setTeamInputFilter, setFormInputTeamMembers } from 'angled-core/events/ui';
import {
inputText,
CLEAR_INPUT_TEXT
} from 'angled-core/../sdi/components/input';
import {
getTeamInputFilter,
getTeamFilteredContact,
getFormInputTeamMembers,
getTeamFilteredContactExists
} from 'angled-core/queries/ui';
import {
setTeamInputFilter,
setFormInputTeamMembers
} from 'angled-core/events/ui';
import { Contact } from 'angled-core/ref';
import { createTeam, createContact } from 'angled-core/events/ref';
import { getContactList } from 'angled-core/queries/ref';
import { fromNullable } from 'fp-ts/lib/Option';
import { stringToParagraphs } from 'angled-core/../sdi/util';
const addTeamMembers =
(c: Contact) => {
const currentTeamMembers = [];
getFormInputTeamMembers().map(tm => currentTeamMembers.push(tm));
currentTeamMembers.push(c);
setFormInputTeamMembers(currentTeamMembers);
};
const removeTeamMembers =
(c: Contact) => {
const currentTeamMembers: Contact[] = [];
getFormInputTeamMembers().map((tm) => {
if (tm.id !== c.id) {
currentTeamMembers.push(tm);
}
});
setFormInputTeamMembers(currentTeamMembers);
};
const createTeamButton = makeLabel('save', 1, () => tr.angled('saveAndContinue'));
const cancelButton = makeLabel('cancel', 2, () => tr.angled('cancel'));
const addTeamMembers = (c: Contact) => {
const currentTeamMembers = [];
getFormInputTeamMembers().map(tm => currentTeamMembers.push(tm));
currentTeamMembers.push(c);
setFormInputTeamMembers(currentTeamMembers);
};
const removeTeamMembers = (c: Contact) => {
const currentTeamMembers: Contact[] = [];
getFormInputTeamMembers().map(tm => {
if (tm.id !== c.id) {
currentTeamMembers.push(tm);
}
});
setFormInputTeamMembers(currentTeamMembers);
};
const createTeamButton = makeLabel('save', 1, () =>
tr.angled('saveAndContinue')
);
const cancelButton = makeLabel('cancel', 2, () => tr.angled('cancel'));
const header = () => H2({}, tr.angled('createTeam'));
const footer =
(close: ModalClose) =>
DIV({ className: 'modal__footer--wrapper' },
cancelButton(() => {
setTeamInputFilter(CLEAR_INPUT_TEXT);
setFormInputTeamMembers([]);
close();
}),
createTeamButton(() => {
createTeam(getFormInputTeamMembers().map(c => c.id), 'bidders', 'bidders_team');
setTeamInputFilter(CLEAR_INPUT_TEXT);
close();
}),
);
const renderFilterInput = () => inputText(getTeamInputFilter, setTeamInputFilter, { placeholder: tr.angled('filterContact') });
const renderContact =
(c: Contact) => DIV({
key: `contact-filtered-${c.id}`,
className: 'contact',
onClick: () => addTeamMembers(c),
}, c.name);
const renderCreateContact =
() => {
const filter = getTeamInputFilter().trim();
if (getTeamFilteredContactExists() || filter.length === 0) {
return NODISPLAY();
}
const footer = (close: ModalClose) =>
DIV(
{ className: 'modal__footer--wrapper' },
cancelButton(() => {
setTeamInputFilter(CLEAR_INPUT_TEXT);
setFormInputTeamMembers([]);
close();
}),
createTeamButton(() => {
createTeam(
getFormInputTeamMembers().map(c => c.id),
'bidders',
'bidders_team'
);
setTeamInputFilter(CLEAR_INPUT_TEXT);
close();
})
);
const createButton = makeLabel('add', 2, () => tr.angled('createNewContact'));
return (
DIV({},
DIV({ className: 'helptext' },
stringToParagraphs(`${tr.angled('createTeamCreateContact')} "${filter}" ?`),
),
createButton(() => {
createContact(filter)
.then(() =>
fromNullable(getContactList().find(c => c.name === filter))
.map((c) => {
setTeamInputFilter(CLEAR_INPUT_TEXT);
addTeamMembers(c);
}));
}),
)
);
};
const renderFilteredTitle =
() => {
const filter = getTeamInputFilter().trim();
if (filter.length > 0) {
return (
H2({}, tr.angled('filterResult') + ` "${filter}"`));
}
const renderFilterInput = () =>
inputText(getTeamInputFilter, setTeamInputFilter, {
placeholder: tr.angled('filterContact')
});
const renderContact = (c: Contact) =>
DIV(
{
key: `contact-filtered-${c.id}`,
className: 'contact',
onClick: () => addTeamMembers(c)
},
c.name
);
const renderCreateContact = () => {
const filter = getTeamInputFilter().trim();
if (getTeamFilteredContactExists() || filter.length === 0) {
return NODISPLAY();
};
}
const createButton = makeLabel('add', 2, () =>
tr.angled('createNewContact')
);
const renderFilteredContacts =
() => DIV({ className: 'filtered-result' },
return DIV(
{},
DIV(
{ className: 'helptext' },
stringToParagraphs(
`${tr.angled('createTeamCreateContact')} "${filter}" ?`
)
),
createButton(() => {
createContact(filter).then(() =>
fromNullable(getContactList().find(c => c.name === filter)).map(
c => {
setTeamInputFilter(CLEAR_INPUT_TEXT);
addTeamMembers(c);
}
)
);
})
);
};
const renderFilteredTitle = () => {
const filter = getTeamInputFilter().trim();
if (filter.length > 0) {
return H2({}, tr.angled('filterResult') + ` "${filter}"`);
}
return NODISPLAY();
};
const renderFilteredContacts = () =>
DIV(
{ className: 'filtered-result' },
getTeamFilteredContact().map(renderContact),
renderCreateContact(),
renderCreateContact()
);
const buttonRemoveContact = makeIcon('reset', 3, 'times');
const renderSelectedContact =
(c: Contact) => DIV({
key: `contact-filtered-${c.id}`,
className: 'contact-selected',
},
SPAN({}, buttonRemoveContact(() => removeTeamMembers(c))),
SPAN({}, c.name),
);
const renderSelectedContacts =
() =>
DIV({}, getFormInputTeamMembers().map(renderSelectedContact));
const body = () => DIV({},
DIV({ className: 'helptext' }, stringToParagraphs(tr.angled('helptext:createTeam'))),
DIV({ className: 'modal-column__wrapper' },
DIV({ className: 'column select-contact' },
H2({ className: 'head-title' }, tr.angled('selectTeamMembers')),
renderFilterInput(),
renderFilteredTitle(),
renderFilteredContacts(),
),
DIV({ className: 'column' },
H2({ className: 'head-title' }, tr.angled('team')),
renderSelectedContacts(),
const renderSelectedContact = (c: Contact) =>
DIV(
{
key: `contact-filtered-${c.id}`,
className: 'contact-selected'
},
SPAN(
{},
buttonRemoveContact(() => removeTeamMembers(c))
),
),
);
SPAN({}, c.name)
);
const renderSelectedContacts = () =>
DIV({}, getFormInputTeamMembers().map(renderSelectedContact));
const body = () =>
DIV(
{ className: 'modal__content--body' },
DIV(
{ className: 'helptext' },
stringToParagraphs(tr.angled('helptext:createTeam'))
),
DIV(
{ className: 'modal-column__wrapper' },
DIV(
{ className: 'column select-contact' },
H2({ className: 'head-title' }, tr.angled('selectTeamMembers')),
renderFilterInput(),
renderFilteredTitle(),
renderFilteredContacts()
),
DIV(
{ className: 'column' },
H2({ className: 'head-title' }, tr.angled('team')),
renderSelectedContacts()
)
)
);
export const render: ModalRender = { header, footer, body };
.modal-column__wrapper {
display: flex;
.column {
flex: 1;
margin-right: @margin;
&:last-child {
margin-right: 0px;
}
.head-title {
color: @inactiveColor;
margin-bottom: @margin;
}
}
}
.modal__footer--wrapper {
display: flex;
justify-content: space-between;
}
// specific Team creation Modal
// specific Team creation Modal
.modal-column__wrapper {
.select-contact {
......@@ -37,4 +14,4 @@
.filtered-result {
margin-top: @margin;
}
}
\ No newline at end of file
}
......@@ -41,6 +41,10 @@
border-bottom: 1px solid @disabledColor;
padding-bottom: 7.5px;
}
.unit--read:not(:first-child) {
padding-top: 7.5px;
}
}
.unit--read.unit {
......
// text color is defined in ./colors.less
// default textcolor is @textColor.
//fonts
@gui-font: 'u001';
@gui-font-size: 0.9rem;
// @cond-gui-font-size : 0.8rem; // JUNK ?? To be sorted
/******** FONT WEIGHTS ********/
// we could need some fallback
// when a font-family has fewer
// we could need some fallback
// when a font-family has fewer
// weight options
@fwBlack: @fwBold;
......@@ -22,8 +20,6 @@
@fwLight: @fwRegular;
@fwExtraLight: @fwRegular;
/******** FONT SIZES ********/
.textExtraLarge(@color: @textColor) {
......@@ -88,7 +84,6 @@
padding: 0.2em 0;
}
// Hover
.activeTextHover(@Color: @activeColor) {
......@@ -133,8 +128,7 @@
}
}
// general mixin
// general mixin
.activeText() {
.activeTextBase();
......@@ -157,28 +151,20 @@
}
}
/******** INPUT ********/
.textInput(@color: @textColor) {
font-weight: 400; // regular
font-size: @gui-font-size * 1.2;
color: @color;
}
/******** Junk - TO BE SORTED ********/
@content-font: @gui-font; // ???
@content-font-size: @gui-font-size; // ???
// UTILS - TEXT & TYPO - to be sorted - potential junk here..
// UTILS - TEXT & TYPO - to be sorted - potential junk here..
.word-wrap() {
overflow-wrap: break-word;
......@@ -208,9 +194,6 @@
}
.text-shadow(@color) {
text-shadow:
-1px -1px 0 @color,
1px -1px 0 @color,
-1px 1px 0 @color,
text-shadow: -1px -1px 0 @color, 1px -1px 0 @color, -1px 1px 0 @color,
1px 1px 0 @color;
}
\ No newline at end of file
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment