autonomic-cooperative
/
hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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
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);
});

6
src/scripts/navigate-event.js
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
function closeUserControls() {
let userControls = Array.from(document.querySelectorAll(".user-controls"));

184
src/styles/left-nav/_index.scss
View File

@ -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;

5
src/views/partials/menu-left.pug
View File

@ -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"
)

1
src/views/partials/widgets.pug
View File

@ -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

2
src/views/partials/widgets/hubl-menu-contact-removed.pug
View File

@ -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>` : ""}