Merge branch 'develop' into translations
This commit is contained in:
commit
16b166b1cf
|
@ -1,5 +1,5 @@
|
||||||
steps:
|
steps:
|
||||||
check-tag:
|
"Verify tag and app version":
|
||||||
image: alpine
|
image: alpine
|
||||||
commands:
|
commands:
|
||||||
- TAG=${CI_COMMIT_TAG/v//}
|
- TAG=${CI_COMMIT_TAG/v//}
|
||||||
|
@ -7,7 +7,7 @@ steps:
|
||||||
when:
|
when:
|
||||||
event: [tag]
|
event: [tag]
|
||||||
|
|
||||||
dependencies:
|
"Install dependencies":
|
||||||
image: node:16
|
image: node:16
|
||||||
pull: true
|
pull: true
|
||||||
commands:
|
commands:
|
||||||
|
@ -16,13 +16,13 @@ steps:
|
||||||
event: [tag, push, pull_request, manual]
|
event: [tag, push, pull_request, manual]
|
||||||
branch: [master, develop, feature/*, fix/*, bugfix/*, translations]
|
branch: [master, develop, feature/*, fix/*, bugfix/*, translations]
|
||||||
|
|
||||||
osv-detector:
|
"Check dependencies":
|
||||||
image: gitnet.fr/deblan/osv-detector:v0.10
|
image: gitnet.fr/deblan/osv-detector:v0.10
|
||||||
commands:
|
commands:
|
||||||
- osv-detector package-lock.json
|
- osv-detector package-lock.json
|
||||||
failure: ignore
|
failure: ignore
|
||||||
|
|
||||||
build-js:
|
"Build JS":
|
||||||
image: node:16
|
image: node:16
|
||||||
commands:
|
commands:
|
||||||
- npm run build
|
- npm run build
|
||||||
|
@ -30,7 +30,7 @@ steps:
|
||||||
event: [tag, push, pull_request, manual]
|
event: [tag, push, pull_request, manual]
|
||||||
branch: [master, develop, feature/*, fix/*, bugfix/*, translations]
|
branch: [master, develop, feature/*, fix/*, bugfix/*, translations]
|
||||||
|
|
||||||
build-translations:
|
"Build translations":
|
||||||
image: deblan/php:8.0
|
image: deblan/php:8.0
|
||||||
commands:
|
commands:
|
||||||
- php bin/generate_l10n.php
|
- php bin/generate_l10n.php
|
||||||
|
@ -38,7 +38,7 @@ steps:
|
||||||
event: [tag, push, pull_request, manual]
|
event: [tag, push, pull_request, manual]
|
||||||
branch: [master, develop, feature/*, fix/*, bugfix/*, translations]
|
branch: [master, develop, feature/*, fix/*, bugfix/*, translations]
|
||||||
|
|
||||||
create-signature:
|
"Create signature":
|
||||||
image: nextcloud:25
|
image: nextcloud:25
|
||||||
secrets: [app_certificate, app_public_certificate]
|
secrets: [app_certificate, app_public_certificate]
|
||||||
environment:
|
environment:
|
||||||
|
@ -73,7 +73,7 @@ steps:
|
||||||
# when:
|
# when:
|
||||||
# event: [pull_request]
|
# event: [pull_request]
|
||||||
|
|
||||||
create-package:
|
"Create package":
|
||||||
image: deblan/php:8.0
|
image: deblan/php:8.0
|
||||||
volumes:
|
volumes:
|
||||||
- /var/www/html/artifacts:/var/www/html/artifacts
|
- /var/www/html/artifacts:/var/www/html/artifacts
|
||||||
|
@ -89,7 +89,7 @@ steps:
|
||||||
when:
|
when:
|
||||||
event: [tag]
|
event: [tag]
|
||||||
|
|
||||||
push-release:
|
"Push release":
|
||||||
image: plugins/gitea-release
|
image: plugins/gitea-release
|
||||||
volumes:
|
volumes:
|
||||||
- /var/www/html/artifacts:/var/www/html/artifacts
|
- /var/www/html/artifacts:/var/www/html/artifacts
|
||||||
|
|
|
@ -1,5 +1,9 @@
|
||||||
## [Unreleased]
|
## [Unreleased]
|
||||||
|
|
||||||
|
## 3.11.6
|
||||||
|
### Fixed
|
||||||
|
* add --background-invert-if-bright in top menu (fix #326)
|
||||||
|
|
||||||
## 3.11.5
|
## 3.11.5
|
||||||
### Fixed
|
### Fixed
|
||||||
* add missing label on buttons for accessiblity (fix #311)
|
* add missing label on buttons for accessiblity (fix #311)
|
||||||
|
|
|
@ -32,7 +32,7 @@ Notice
|
||||||
Because I believe in a free and decentralized Internet, [Gitnet](https://gitnet.fr) is **self-hosted at home**.
|
Because I believe in a free and decentralized Internet, [Gitnet](https://gitnet.fr) is **self-hosted at home**.
|
||||||
In case of downtime, you can download **Custom Menu** from [here](https://kim.deblan.fr/~side_menu/).
|
In case of downtime, you can download **Custom Menu** from [here](https://kim.deblan.fr/~side_menu/).
|
||||||
]]></description>
|
]]></description>
|
||||||
<version>3.11.5</version>
|
<version>3.11.6</version>
|
||||||
<licence>agpl</licence>
|
<licence>agpl</licence>
|
||||||
<author mail="contact@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
|
<author mail="contact@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
|
||||||
<namespace>SideMenu</namespace>
|
<namespace>SideMenu</namespace>
|
||||||
|
|
|
@ -83,6 +83,12 @@
|
||||||
padding-left: 12px !important;
|
padding-left: 12px !important;
|
||||||
margin-left: 5px !important;
|
margin-left: 5px !important;
|
||||||
margin-left: 3px !important;
|
margin-left: 3px !important;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-menu-opener span {
|
||||||
|
position: relative;
|
||||||
|
left: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.side-menu-opener:active, .side-menu-opener:focus {
|
.side-menu-opener:active, .side-menu-opener:focus {
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
"stylelint:fix": "./node_modules/.bin/stylelint src --fix"
|
"stylelint:fix": "./node_modules/.bin/stylelint src --fix"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.24.0",
|
"axios": "^1.6.7",
|
||||||
"trim": "^1.0.1",
|
"trim": "^1.0.1",
|
||||||
"vue": "^2.6.11"
|
"vue": "^2.6.11"
|
||||||
},
|
},
|
||||||
|
|
3
renovate.json
Normal file
3
renovate.json
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://docs.renovatebot.com/renovate-schema.json"
|
||||||
|
}
|
|
@ -21,7 +21,10 @@
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<nav class="app-menu show">
|
<nav
|
||||||
|
class="app-menu show"
|
||||||
|
:aria-label="t('core', 'Applications menu')"
|
||||||
|
>
|
||||||
<ul
|
<ul
|
||||||
class="app-menu-main"
|
class="app-menu-main"
|
||||||
:class="{ 'app-menu-main__hidden-label': hiddenLabels === 1, 'app-menu-main__show-hovered': hiddenLabels === 2 }"
|
:class="{ 'app-menu-main__hidden-label': hiddenLabels === 1, 'app-menu-main__show-hovered': hiddenLabels === 2 }"
|
||||||
|
@ -165,6 +168,7 @@ $header-icon-size: 20px;
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-menu-main {
|
.app-menu-main {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
@ -174,7 +178,6 @@ $header-icon-size: 20px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
opacity: .7;
|
|
||||||
|
|
||||||
&.app-menu-entry__active {
|
&.app-menu-entry__active {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
@ -214,7 +217,8 @@ $header-icon-size: 20px;
|
||||||
width: $header-icon-size;
|
width: $header-icon-size;
|
||||||
height: $header-icon-size;
|
height: $header-icon-size;
|
||||||
padding: calc((100% - $header-icon-size) / 2);
|
padding: calc((100% - $header-icon-size) / 2);
|
||||||
filter: var(--primary-invert-if-bright);
|
box-sizing: content-box;
|
||||||
|
filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-menu-entry--label {
|
.app-menu-entry--label {
|
||||||
|
@ -223,8 +227,8 @@ $header-icon-size: 20px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--color-primary-text);
|
color: var(--color-primary-text);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
bottom: -5px;
|
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
top: 45%;
|
||||||
display: block;
|
display: block;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
@ -232,6 +236,7 @@ $header-icon-size: 20px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
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):hover,
|
||||||
|
@ -239,11 +244,11 @@ $header-icon-size: 20px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
.app-menu-entry--label {
|
.app-menu-entry--label {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
font-weight: bold;
|
font-weight: bolder;
|
||||||
font-size: 14px;
|
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: auto;
|
width: 100%;
|
||||||
overflow: visible;
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -260,8 +265,10 @@ $header-icon-size: 20px;
|
||||||
&:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):focus-within,
|
&: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):hover,
|
||||||
.app-menu-entry:not(.app-menu-entry__hidden-label):focus {
|
.app-menu-entry:not(.app-menu-entry__hidden-label):focus {
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-top: -6px;
|
margin-top: -8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-menu-entry--label {
|
.app-menu-entry--label {
|
||||||
|
@ -277,7 +284,7 @@ $header-icon-size: 20px;
|
||||||
&.app-menu-main__show-hovered .app-menu-entry:hover,
|
&.app-menu-main__show-hovered .app-menu-entry:hover,
|
||||||
&.app-menu-main__show-hovered .app-menu-entry:focus {
|
&.app-menu-main__show-hovered .app-menu-entry:focus {
|
||||||
img {
|
img {
|
||||||
margin-top: -6px;
|
margin-top: -8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-menu-entry--label {
|
.app-menu-entry--label {
|
||||||
|
@ -292,38 +299,42 @@ $header-icon-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .app-menu-more .button-vue--vue-tertiary {
|
::v-deep .app-menu-more .button-vue--vue-tertiary {
|
||||||
color: var(--color-primary-text);
|
|
||||||
opacity: .7;
|
opacity: .7;
|
||||||
margin: 3px;
|
margin: 3px;
|
||||||
|
filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
|
||||||
|
|
||||||
&:hover {
|
&:not([aria-expanded="true"]) {
|
||||||
opacity: 1;
|
color: var(--color-primary-element-text);
|
||||||
background-color: transparent !important;
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
background-color: transparent !important;
|
outline: none !important;
|
||||||
border-radius: var(--border-radius);
|
}
|
||||||
outline: none;
|
|
||||||
box-shadow: 0 0 0 2px var(--color-primary-text);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-menu-popover-entry {
|
.app-menu-popover-entry {
|
||||||
.app-icon {
|
.app-icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 44px;
|
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 {
|
&.has-unread::after {
|
||||||
background-color: var(--color-main-text);
|
background-color: var(--color-main-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
filter: var(--background-invert-if-bright);
|
|
||||||
width: $header-icon-size;
|
width: $header-icon-size;
|
||||||
height: $header-icon-size;
|
height: $header-icon-size;
|
||||||
padding: calc((50px - $header-icon-size) / 2);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -332,7 +343,7 @@ $header-icon-size: 20px;
|
||||||
content: "";
|
content: "";
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
background-color: var(--color-primary-text);
|
background-color: var(--color-primary-element-text);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
@ -15,11 +15,18 @@ 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/>.
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<button class="side-menu-opener side-menu-closer"></button>
|
<button class="side-menu-opener side-menu-closer" :arial-label="label">
|
||||||
|
<span v-text="label"></span>
|
||||||
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'CloserButton',
|
name: 'CloserButton',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
label: t('side_menu', 'Close the menu'),
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -15,7 +15,9 @@ 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/>.
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<button class="side-menu-opener" :arial-label="label"></button>
|
<button class="side-menu-opener" :arial-label="label">
|
||||||
|
<span v-text="label"></span>
|
||||||
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -23,7 +25,7 @@ export default {
|
||||||
name: 'OpenerButton',
|
name: 'OpenerButton',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
label: t('side_menu', 'Toggle menu'),
|
label: t('side_menu', 'Toggle the menu'),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -95,4 +95,4 @@
|
||||||
"Hide labels on mouse over": ""
|
"Hide labels on mouse over": ""
|
||||||
"Except the hovered app": ""
|
"Except the hovered app": ""
|
||||||
"Search": ""
|
"Search": ""
|
||||||
"Toggle menu": ""
|
"Toggle the menu": ""
|
||||||
|
|
|
@ -3,7 +3,13 @@ module.exports = (tagName, attributes) => {
|
||||||
|
|
||||||
if (typeof attributes === 'object') {
|
if (typeof attributes === 'object') {
|
||||||
for (let i in attributes) {
|
for (let i in attributes) {
|
||||||
element.setAttribute(i, attributes[i])
|
if (i === 'text') {
|
||||||
|
element.textContent = attributes[i]
|
||||||
|
} else if (i === 'html') {
|
||||||
|
element.innerHTML = attributes[i]
|
||||||
|
} else {
|
||||||
|
element.setAttribute(i, attributes[i])
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -16,7 +16,8 @@ if ($_['always-displayed']) {
|
||||||
const sideMenuContainer = SMcreateElement('div', {id: 'side-menu-container'})
|
const sideMenuContainer = SMcreateElement('div', {id: 'side-menu-container'})
|
||||||
const sideMenuOpener = SMcreateElement('button', {
|
const sideMenuOpener = SMcreateElement('button', {
|
||||||
'class': 'side-menu-opener',
|
'class': 'side-menu-opener',
|
||||||
'arial-label': t('side_menu', 'Toggle menu')
|
'arial-label': t('side_menu', 'Toggle the menu'),
|
||||||
|
'html': `<span>${t('side_menu', 'Toggle the menu')}</span>`
|
||||||
})
|
})
|
||||||
const sideMenu = SMcreateElement('div', {id: 'side-menu'})
|
const sideMenu = SMcreateElement('div', {id: 'side-menu'})
|
||||||
|
|
||||||
|
@ -38,6 +39,15 @@ if ($_['always-displayed']) {
|
||||||
sideMenu.setAttribute('data-sidewithcategories', '1')
|
sideMenu.setAttribute('data-sidewithcategories', '1')
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
|
const sideMenuFocus = () => {
|
||||||
|
let a = document.querySelector('#side-menu .side-menu-app.active a')
|
||||||
|
|| document.querySelector('#side-menu .side-menu-app a')
|
||||||
|
|
||||||
|
if (a) {
|
||||||
|
a.focus()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
document.querySelector('body').addEventListener('side-menu.apps', (e) => {
|
document.querySelector('body').addEventListener('side-menu.apps', (e) => {
|
||||||
const apps = e.detail.apps;
|
const apps = e.detail.apps;
|
||||||
|
|
||||||
|
@ -80,22 +90,6 @@ if ($_['always-displayed']) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
sideMenuFocus = () => {
|
|
||||||
let a = document.querySelector('.side-menu-app.active a', sideMenu)
|
|
||||||
|
|
||||||
if (!a) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (a.length === 0) {
|
|
||||||
a = sideMenu.querySelector('.side-menu-app:first-child a')
|
|
||||||
}
|
|
||||||
|
|
||||||
if (a.length > 0) {
|
|
||||||
a.focus()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
<?php if ($_['opener-hover']): ?>
|
<?php if ($_['opener-hover']): ?>
|
||||||
const sideMenuMouseLeave = () => {
|
const sideMenuMouseLeave = () => {
|
||||||
sideMenu.classList.remove('open')
|
sideMenu.classList.remove('open')
|
||||||
|
@ -127,14 +121,8 @@ if ($_['always-displayed']) {
|
||||||
|
|
||||||
headerMenuOpener.addEventListener('click', () => {
|
headerMenuOpener.addEventListener('click', () => {
|
||||||
sideMenu.classList.add('open')
|
sideMenu.classList.add('open')
|
||||||
|
|
||||||
const a = sideMenu.querySelector('.side-menu-app.active a')
|
|
||||||
|
|
||||||
if (a !== null) {
|
|
||||||
a.focus()
|
|
||||||
}
|
|
||||||
|
|
||||||
headerMenuOpener.blur()
|
headerMenuOpener.blur()
|
||||||
|
sideMenuFocus()
|
||||||
})
|
})
|
||||||
|
|
||||||
for (let opener of sideMenuOpener) {
|
for (let opener of sideMenuOpener) {
|
||||||
|
|
|
@ -241,6 +241,7 @@ $labelReset = 'Reset to default';
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<?php if (!$_['force']): ?>
|
<?php if (!$_['force']): ?>
|
||||||
<button id="side-menu-save" class="btn btn-info" arial-label="<?php p($l->t('Save')); ?>">
|
<button id="side-menu-save" class="btn btn-info" arial-label="<?php p($l->t('Save')); ?>">
|
||||||
|
<?php p($l->t('Save')); ?>
|
||||||
<progress max="100" value="0" id="side-menu-save-progress"></progress>
|
<progress max="100" value="0" id="side-menu-save-progress"></progress>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue