patch: left-menu - refactoring + styles on widget to remove a contact

This commit is contained in:
gaelle morin 2021-04-01 19:33:10 +02:00
parent 1eda33fab5
commit 377abe2c62
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
8 changed files with 139 additions and 74 deletions

6
package-lock.json generated
View File

@ -1159,9 +1159,9 @@
} }
}, },
"@startinblox/hubl-styling-framework": { "@startinblox/hubl-styling-framework": {
"version": "1.8.14", "version": "1.8.15",
"resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.14.tgz", "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.15.tgz",
"integrity": "sha512-ku6c9oJWUy3S0qG+s7aNp7mOrS6nxQJYis5jCC0Iq0cmRe44HzUk4Z6AuU4jC06xk5Ce+SEieeasi78Zcuczdw==" "integrity": "sha512-2bK5zsHOxI0wekAyIhI2MkD1FcWBuNnWpmrDigxHRrsO4kFDOGvIyIewW//5dZjwaL4aTgZzRFvEYb7kNSYYyg=="
}, },
"@types/q": { "@types/q": {
"version": "1.5.4", "version": "1.5.4",

View File

@ -45,7 +45,7 @@
] ]
}, },
"dependencies": { "dependencies": {
"@startinblox/hubl-styling-framework": "^1.8.14", "@startinblox/hubl-styling-framework": "^1.8.15",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"fs-extra": "^9.0.1", "fs-extra": "^9.0.1",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",

View File

@ -0,0 +1,7 @@
document.addEventListener("DOMContentLoaded", () => {
const searchField = document.querySelector('.menu-search');
console.log(searchField);
const leform = searchField.querySelector('form');
console.log(leform);
});

View File

@ -17,12 +17,6 @@ MenuTabs.forEach(menuTab => {
}); });
}); });
// const searchField = document.querySelector('.menu-search');
// console.log(searchField);
// const leform = searchField.querySelector('form');
// console.log(leform);
// auxiliary function closes the user profile menu // auxiliary function closes the user profile menu
function closeUserControls() { function closeUserControls() {
let userControls = Array.from(document.querySelectorAll(".user-controls")); let userControls = Array.from(document.querySelectorAll(".user-controls"));

View File

@ -9,6 +9,15 @@ nav#main__menu {
font-weight: bolder; font-weight: bolder;
} }
.badge {
float: right;
margin-right: 2px;
}
.icon {
padding: 3px;
}
.menu-search { .menu-search {
form { form {
@ -52,68 +61,64 @@ nav#main__menu {
button { button {
background: transparent; background: transparent;
} }
input:focus ~ button {
background-color: red !important;
}
} }
.menu-header { .menu-header {
/* Chevron animation */
.transform-up {
transform: rotateX(180deg);
}
.badge {
padding-top: 2px;
margin-right: 5px;
}
/* For the icon and the small sub-sub-menu*/
&:not(:hover) .menu-options, &:not(:hover) .menu-options,
&:not(:hover) .menu-admin { &:not(:hover) .menu-admin {
display: none; display: none;
} }
}
.transform-up { .menu-options {
transform: rotateX(180deg); float: right;
} }
.badge { .menu-admin {
padding-top: 2px; position: absolute;
margin-right: 5px; z-index: 3016;
} left: 48px;
bottom: 37px;
.icon {
padding: 3px; @media (max-width: 768px) {
} width: 100%;
left: 0;
.menu-admin { height: 9vh;
position: absolute; top: 0;
z-index: 3016; }
left: 48px;
bottom: 37px;
@media (max-width: 768px) {
width: 100%;
left: 0;
height: 9vh;
top: 0;
} }
} }
/* Styles for the small icon */ .sub-menu {
.sub-menu-icon {
margin-left: 3px; /* Styles for the small icon */
opacity: 0.8; .sub-menu-icon {
width: 12px; margin-left: 3px;
>div { opacity: 0.8;
line-height: 19px; width: 12px;
>div {
line-height: 19px;
}
}
.sub-menu-name {
margin-right: 15px;
margin-left: 3px;
vertical-align: middle;
} }
} }
.sub-menu-name {
margin-right: 15px;
margin-left: 3px;
vertical-align: middle;
}
.menu-options {
float: right;
}
/* Ellipsis */ /* Ellipsis */
.ellipsis { .ellipsis {
@ -137,16 +142,11 @@ nav#main__menu {
} }
} }
.menu-header>div:not(.transform-up)~.badge { .empty {
display: none; display: flex;
} flex-wrap: wrap;
padding-left: 13px;
.menu-header>div.transform-up~.badge { width: 87%;
display: block;
}
.badge {
float: right;
} }
.divider { .divider {
@ -155,13 +155,75 @@ nav#main__menu {
opacity: 0.2; opacity: 0.2;
} }
.empty {
display: flex; /* Header's general counter appear or disappear on click (JS animation) */
flex-wrap: wrap; .menu-header>div:not(.transform-up)~.badge {
padding-left: 13px; display: none;
width: 87%;
} }
.menu-header>div.transform-up~.badge {
display: block;
}
/* End */
/* The little cross icon on contacts' name appears or disapear + hover + styles */
.sub-menu__contacts>div>solid-display {
hubl-menu-contact-removed {
display: none;
}
}
.sub-menu__contacts>div>solid-display {
&:hover {
display: flex;
hubl-menu-fix-url-contact {
width: 100%;
background: #202B3C;
}
hubl-menu-contact-removed {
display: block;
background: #202B3C;
padding-top: 5px;
margin-left: auto;
padding-right: 10px;
.button-remove button::before {
font-size: 18px;
color: white;
}
}
}
}
/* End */
/* Modal to keep/remove a contact */
hubl-menu-contact-removed dialog {
border: none;
padding: 60px 30px;
text-align: center;
@media (max-width: 768px) {
width: 100vw;
}
p {
margin-bottom: 30px;
font-size: 16px;
}
&::before,
p::before,
div::before,
button::before {
display: none;
}
}
/* End */
&.jsLeftMenu { &.jsLeftMenu {
display: inline-block; display: inline-block;

View File

@ -77,13 +77,14 @@ solid-router#navbar-router(default-route='dashboard')
div div
div div
div div
solid-display.segment.full.whitespace-normal( solid-display.sub-menu__contacts.segment.full.children-full.whitespace-normal(
bind-user bind-user
nested-field='contacts' nested-field='contacts'
fields='contact' fields='contact, @id'
loader-id=`loader-${component.route}` loader-id=`loader-${component.route}`
empty-widget='hubl-menu-empty' empty-widget='hubl-menu-empty'
widget-contact='hubl-menu-fix-url-contact' widget-contact='hubl-menu-fix-url-contact'
widget-id='hubl-menu-contact-removed'
filtered-by="general-search" filtered-by="general-search"
order-asc="contact.username" order-asc="contact.username"
) )

View File

@ -25,6 +25,7 @@ include widgets/hubl-email-field.pug
include widgets/hubl-menu-empty.pug include widgets/hubl-menu-empty.pug
include widgets/hubl-menu-fix-url-circle.pug include widgets/hubl-menu-fix-url-circle.pug
include widgets/hubl-menu-fix-url-contact.pug include widgets/hubl-menu-fix-url-contact.pug
include widgets/hubl-menu-contact-removed.pug
include widgets/hubl-menu-fix-url-project.pug include widgets/hubl-menu-fix-url-project.pug
include widgets/hubl-menu-jabberid.pug include widgets/hubl-menu-jabberid.pug
include widgets/hubl-menu-publicprivate.pug include widgets/hubl-menu-publicprivate.pug

View File

@ -1,4 +1,4 @@
if componentSet.has('chat') if componentSet.has('chat')
solid-widget(name='hubl-menu-contact-removed') solid-widget(name='hubl-menu-contact-removed')
template ${value != "" ? ` template ${value != "" ? `
<solid-delete class="icon icon-small icon-white icon-close" data-src='${value}' data-label="" confirmation-type="confirm" confirmation-message="Contact retiré"></solid-delete>` : ""} <solid-delete class="button-remove icon children-icon-close" data-src='${value}' data-label="" confirmation-type="dialog" confirmation-message="Vous êtes sur le point de retirer ce contact. Etes-vous sûr ?" confirmation-submit-text="Oui, valider" confirmation-cancel-text="Non, c'est une erreur" confirmation-submit-class="segment sm-full text-center button text-xsmall text-bold text-uppercase reversed color-secondary bordered padding-right-medium padding-left-medium margin-right-xsmall sm-margin-right-none sm-margin-bottom-medium" confirmation-cancel-class="segment sm-full text-center button text-xsmall text-bold text-uppercase color-secondary bordered padding-right-medium padding-left-medium margin-left-xsmall sm-margin-left-none"></solid-delete>` : ""}