patch: left-menu - refactoring + styles on widget to remove a contact
This commit is contained in:
gaelle morin
parent
1eda33fab5
commit
377abe2c62
6
package-lock.json
generated
6
package-lock.json
generated
@ -1159,9 +1159,9 @@
|
||||
}
|
||||
},
|
||||
"@startinblox/hubl-styling-framework": {
|
||||
"version": "1.8.14",
|
||||
"resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.14.tgz",
|
||||
"integrity": "sha512-ku6c9oJWUy3S0qG+s7aNp7mOrS6nxQJYis5jCC0Iq0cmRe44HzUk4Z6AuU4jC06xk5Ce+SEieeasi78Zcuczdw=="
|
||||
"version": "1.8.15",
|
||||
"resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.15.tgz",
|
||||
"integrity": "sha512-2bK5zsHOxI0wekAyIhI2MkD1FcWBuNnWpmrDigxHRrsO4kFDOGvIyIewW//5dZjwaL4aTgZzRFvEYb7kNSYYyg=="
|
||||
},
|
||||
"@types/q": {
|
||||
"version": "1.5.4",
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@startinblox/hubl-styling-framework": "^1.8.14",
|
||||
"@startinblox/hubl-styling-framework": "^1.8.15",
|
||||
"cross-env": "^7.0.3",
|
||||
"fs-extra": "^9.0.1",
|
||||
"normalize.css": "^8.0.1",
|
||||
|
||||
7
src/scripts/menu-search-control.js
Normal file
7
src/scripts/menu-search-control.js
Normal 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);
|
||||
});
|
||||
@ -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
|
||||
function closeUserControls() {
|
||||
let userControls = Array.from(document.querySelectorAll(".user-controls"));
|
||||
|
||||
@ -9,6 +9,15 @@ nav#main__menu {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.badge {
|
||||
float: right;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.menu-search {
|
||||
|
||||
form {
|
||||
@ -52,68 +61,64 @@ nav#main__menu {
|
||||
button {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input:focus ~ button {
|
||||
background-color: red !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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-admin {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.transform-up {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
.menu-options {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding-top: 2px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.menu-admin {
|
||||
position: absolute;
|
||||
z-index: 3016;
|
||||
left: 48px;
|
||||
bottom: 37px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
height: 9vh;
|
||||
top: 0;
|
||||
.menu-admin {
|
||||
position: absolute;
|
||||
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-icon {
|
||||
margin-left: 3px;
|
||||
opacity: 0.8;
|
||||
width: 12px;
|
||||
>div {
|
||||
line-height: 19px;
|
||||
.sub-menu {
|
||||
|
||||
/* Styles for the small icon */
|
||||
.sub-menu-icon {
|
||||
margin-left: 3px;
|
||||
opacity: 0.8;
|
||||
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 {
|
||||
|
||||
@ -137,16 +142,11 @@ nav#main__menu {
|
||||
}
|
||||
}
|
||||
|
||||
.menu-header>div:not(.transform-up)~.badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-header>div.transform-up~.badge {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.badge {
|
||||
float: right;
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 13px;
|
||||
width: 87%;
|
||||
}
|
||||
|
||||
.divider {
|
||||
@ -155,13 +155,75 @@ nav#main__menu {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 13px;
|
||||
width: 87%;
|
||||
|
||||
/* Header's general counter appear or disappear on click (JS animation) */
|
||||
.menu-header>div:not(.transform-up)~.badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: inline-block;
|
||||
|
||||
|
||||
@ -77,13 +77,14 @@ solid-router#navbar-router(default-route='dashboard')
|
||||
div
|
||||
div
|
||||
div
|
||||
solid-display.segment.full.whitespace-normal(
|
||||
solid-display.sub-menu__contacts.segment.full.children-full.whitespace-normal(
|
||||
bind-user
|
||||
nested-field='contacts'
|
||||
fields='contact'
|
||||
fields='contact, @id'
|
||||
loader-id=`loader-${component.route}`
|
||||
empty-widget='hubl-menu-empty'
|
||||
widget-contact='hubl-menu-fix-url-contact'
|
||||
widget-id='hubl-menu-contact-removed'
|
||||
filtered-by="general-search"
|
||||
order-asc="contact.username"
|
||||
)
|
||||
|
||||
@ -25,6 +25,7 @@ include widgets/hubl-email-field.pug
|
||||
include widgets/hubl-menu-empty.pug
|
||||
include widgets/hubl-menu-fix-url-circle.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-jabberid.pug
|
||||
include widgets/hubl-menu-publicprivate.pug
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
if componentSet.has('chat')
|
||||
solid-widget(name='hubl-menu-contact-removed')
|
||||
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>` : ""}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user