deblan/side_menu
deblan/side_menu
4
11
Fork 9
Code Issues 20 Pull requests 3 Projects Releases 137 Wiki Activity

migration from vue2 to vue3 #405

Merged
deblan merged 62 commits from feature/vue3 into develop 2025-04-16 19:56:03 +02:00
Conversation 0 Commits 62 Files changed 102 +197 -200
2 changed files with 197 additions and 200 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit a8ed3e1752 - Show all commits

increase internal integration of the standard menu

Prev Next
Simon Vieille 2025-04-14 22:43:09 +02:00
commit a8ed3e1752
Signed by: deblan
GPG key ID: 579388D585F70417

201
src/menus/StandardMenu.vue
View file

@ -16,7 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
<nav
class="cm--standardmenu app-menu show"
class="cm-standardmenu app-menu show"
:aria-label="t('core', 'Applications menu')"
>
<ul
@ -183,202 +183,3 @@ export default {
},
}
</script>
<style lang="scss" scoped>
$header-icon-size: 20px;
.app-menu {
width: 100%;
display: flex;
flex-shrink: 1;
flex-wrap: wrap;
}
.app-menu-main {
display: flex;
flex-wrap: nowrap;
.app-menu-entry {
width: 50px;
height: 50px;
position: relative;
display: flex;
&.app-menu-entry__active {
opacity: 1;
&::before {
content: ' ';
position: absolute;
pointer-events: none;
border-bottom-color: var(--color-main-background);
transform: translateX(-50%);
width: 12px;
height: 5px;
border-radius: 3px;
background-color: var(--color-primary-text);
left: 50%;
bottom: 6px;
display: block;
transition: all 0.1s ease-in-out;
opacity: 1;
}
.app-menu-entry--label {
font-weight: bold;
}
}
a {
width: calc(100% - 4px);
height: calc(100% - 4px);
margin: 2px;
color: var(--color-primary-text);
position: relative;
}
img {
transition: margin 0.1s ease-in-out;
width: $header-icon-size;
height: $header-icon-size;
padding: calc((100% - $header-icon-size) / 2);
box-sizing: content-box;
filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
}
.app-menu-entry--label {
opacity: 0;
position: absolute;
font-size: 12px;
color: var(--color-primary-text);
text-align: center;
left: 50%;
top: 45%;
display: block;
min-width: 100%;
transform: translateX(-50%);
transition: all 0.1s ease-in-out;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
letter-spacing: -0.5px;
}
&:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):hover,
&:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):focus-within {
opacity: 1;
.app-menu-entry--label {
opacity: 1;
font-weight: bolder;
bottom: 0;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
// Show labels
&:hover,
&:focus-within,
.app-menu-entry:hover,
.app-menu-entry:focus {
opacity: 1;
}
&:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):hover,
&:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):focus-within,
.app-menu-entry:not(.app-menu-entry__hidden-label):hover,
.app-menu-entry:not(.app-menu-entry__hidden-label):focus {
opacity: 1;
img {
margin-top: -8px;
}
.app-menu-entry--label {
opacity: 1;
bottom: 0;
}
&::before,
.app-menu-entry::before {
opacity: 0;
}
}
&.app-menu-main__show-hovered .app-menu-entry:hover,
&.app-menu-main__show-hovered .app-menu-entry:focus {
img {
margin-top: -8px;
}
.app-menu-entry--label {
opacity: 1;
bottom: 0;
}
&::before,
.app-menu-entry::before {
opacity: 0;
}
}
}
::v-deep .app-menu-more .button-vue--vue-tertiary {
opacity: 0.7;
margin: 3px;
filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
&:not([aria-expanded='true']) {
color: var(--color-main-text);
&:hover {
opacity: 1;
background-color: transparent !important;
}
}
&:focus-visible {
opacity: 1;
outline: none !important;
}
}
.app-menu-popover-entry {
.app-icon {
position: relative;
height: 44px;
width: 48px;
display: flex;
align-items: center;
justify-content: center;
filter: var(--background-invert-if-bright, var(--primary-invert-if-bright));
&.has-unread::after {
background-color: var(--color-main-text);
}
img {
width: $header-icon-size;
height: $header-icon-size;
}
}
}
.has-unread::after {
content: '';
width: 8px;
height: 8px;
background-color: var(--color-primary-element-text);
border-radius: 50%;
position: absolute;
display: block;
top: 10px;
right: 10px;
}
.unread-counter {
display: none;
}
</style>

196
src/scss/menu.scss
View file

@ -14,6 +14,7 @@
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
$header-icon-size: 20px;
#header {
.cm-opener {
@ -398,3 +399,198 @@
}
}
}
.cm-standardmenu {
width: 100%;
display: flex;
flex-shrink: 1;
flex-wrap: wrap;
.app-menu-main {
display: flex;
flex-wrap: nowrap;
.app-menu-entry {
width: 50px;
height: 50px;
position: relative;
display: flex;
&.app-menu-entry__active {
opacity: 1;
&::before {
content: ' ';
position: absolute;
pointer-events: none;
border-bottom-color: var(--color-main-background);
transform: translateX(-50%);
width: 12px;
height: 5px;
border-radius: 3px;
background-color: var(--color-primary-text);
left: 50%;
bottom: 6px;
display: block;
transition: all 0.1s ease-in-out;
opacity: 1;
}
.app-menu-entry--label {
font-weight: bold;
}
}
a {
width: calc(100% - 4px);
height: calc(100% - 4px);
margin: 2px;
color: var(--color-primary-text);
position: relative;
}
img {
transition: margin 0.1s ease-in-out;
width: $header-icon-size;
height: $header-icon-size;
padding: calc((100% - $header-icon-size) / 2);
box-sizing: content-box;
filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
}
.app-menu-entry--label {
opacity: 0;
position: absolute;
font-size: 12px;
color: var(--color-primary-text);
text-align: center;
left: 50%;
top: 45%;
display: block;
min-width: 100%;
transform: translateX(-50%);
transition: all 0.1s ease-in-out;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
letter-spacing: -0.5px;
}
&:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):hover,
&:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):focus-within {
opacity: 1;
.app-menu-entry--label {
opacity: 1;
font-weight: bolder;
bottom: 0;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
// Show labels
&:hover,
&:focus-within,
.app-menu-entry:hover,
.app-menu-entry:focus {
opacity: 1;
}
&:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):hover,
&:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):focus-within,
.app-menu-entry:not(.app-menu-entry__hidden-label):hover,
.app-menu-entry:not(.app-menu-entry__hidden-label):focus {
opacity: 1;
img {
margin-top: -8px;
}
.app-menu-entry--label {
opacity: 1;
bottom: 0;
}
&::before,
.app-menu-entry::before {
opacity: 0;
}
}
&.app-menu-main__show-hovered .app-menu-entry:hover,
&.app-menu-main__show-hovered .app-menu-entry:focus {
img {
margin-top: -8px;
}
.app-menu-entry--label {
opacity: 1;
bottom: 0;
}
&::before,
.app-menu-entry::before {
opacity: 0;
}
}
}
.app-menu-more .button-vue--vue-tertiary {
opacity: 0.7;
margin: 3px;
filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
&:not([aria-expanded='true']) {
color: var(--color-main-text);
&:hover {
opacity: 1;
background-color: transparent !important;
}
}
&:focus-visible {
opacity: 1;
outline: none !important;
}
}
.app-menu-popover-entry {
.app-icon {
position: relative;
height: 44px;
width: 48px;
display: flex;
align-items: center;
justify-content: center;
filter: var(--background-invert-if-bright, var(--primary-invert-if-bright));
&.has-unread::after {
background-color: var(--color-main-text);
}
img {
width: $header-icon-size;
height: $header-icon-size;
}
}
}
.has-unread::after {
content: '';
width: 8px;
height: 8px;
background-color: var(--color-primary-element-text);
border-radius: 50%;
position: absolute;
display: block;
top: 10px;
right: 10px;
}
.unread-counter {
display: none;
}
}