mirror/galene
1
Fork 0
mirror of https://github.com/jech/galene.git synced 2024-12-22 23:35:46 +01:00
Code Activity

use button instead of wrong elements

Browse source
This commit is contained in:
jjsa 2024-12-18 13:15:09 +01:00
parent 22e7526c18
commit fd63d5ef71
3 changed files with 63 additions and 156 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

118
static/galene.css
View file

@ -1,13 +1,7 @@
button { button {
background: none; background: none;
border: 0; border: 0;
} color: inherit;
.screenreader {
width: 0px;
height: 0px;
overflow: hidden;
margin: 0;
} }
.nav-fixed .topnav { .nav-fixed .topnav {
@ -129,7 +123,7 @@ button {
line-height: .7; line-height: .7;
} }
.sidenav .user-logout button:hover { .sidenav .user-logout a:hover {
color: #ab0659; color: #ab0659;
} }
@ -281,12 +275,12 @@ button {
} }
.full-width { .full-width {
/*width: calc(100vw - 200px);*/ width: calc(100vw - 200px);
height: calc(var(--vh, 1vh) * 100 - 56px); height: calc(var(--vh, 1vh) * 100 - 56px);
} }
.full-width-active { .full-width-active {
/* width: 100vw;*/ width: 100vw;
} }
.container { .container {
@ -324,6 +318,7 @@ button {
resize: none; resize: none;
overflow: hidden; overflow: hidden;
padding: 5px; padding: 5px;
outline: none;
border: none; border: none;
text-indent: 5px; text-indent: 5px;
box-shadow: none; box-shadow: none;
@ -451,13 +446,6 @@ textarea.form-reply {
white-space: pre-wrap; white-space: pre-wrap;
} }
.message button {
margin: 1em;
padding: .4em .8em;
border-radius: .7em;
background: #a1ceff;
}
.video-container { .video-container {
height: calc(var(--vh, 1vh) * 100 - 56px); height: calc(var(--vh, 1vh) * 100 - 56px);
position: relative; position: relative;
@ -485,7 +473,7 @@ textarea.form-reply {
} }
.collapse-video { .collapse-video {
left: calc(-100vw); left: 30px;
right: inherit; right: inherit;
} }
@ -536,7 +524,6 @@ textarea.form-reply {
background: linear-gradient(180deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 70%) 100%); background: linear-gradient(180deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 70%) 100%);
} }
.peer:focus-within > .video-controls, .peer:focus-within > .top-video-controls,
.peer:hover > .video-controls, .peer:hover > .top-video-controls { .peer:hover > .video-controls, .peer:hover > .top-video-controls {
opacity: 1; opacity: 1;
} }
@ -548,10 +535,6 @@ textarea.form-reply {
cursor: pointer; cursor: pointer;
} }
.peer button i {
color: #eaeaea;
}
.video-controls span:last-child, .top-video-controls span:last-child { .video-controls span:last-child, .top-video-controls span:last-child {
margin-right: 0; margin-right: 0;
} }
@ -606,7 +589,6 @@ textarea.form-reply {
transition: opacity .5s ease-out; transition: opacity .5s ease-out;
} }
.video-controls .volume:focus-within,
.video-controls .volume:hover { .video-controls .volume:hover {
--ov: 1; --ov: 1;
--dv: inline; --dv: inline;
@ -687,7 +669,7 @@ textarea.form-reply {
} }
.nav-cancel, .muted, .nav-cancel label, .muted label { .nav-cancel, .muted, .nav-cancel label, .muted label {
color: #d03e3e; color: #d03e3e
} }
.nav-cancel:hover, .muted:hover, .nav-cancel label:hover, .muted label:hover { .nav-cancel:hover, .muted:hover, .nav-cancel label:hover, .muted label:hover {
@ -699,7 +681,7 @@ textarea.form-reply {
font-size: 25px; font-size: 25px;
} }
#openside .nav-more { .nav-more {
padding-top: 5px; padding-top: 5px;
margin-left: 0; margin-left: 0;
} }
@ -810,25 +792,21 @@ h1 {
} }
#filterselect { #filterselect {
width: 8em;
text-align-last: center; text-align-last: center;
margin-right: 0.4em; margin-right: 0.4em;
} }
#sendselect { #sendselect {
width: 8em;
text-align-last: center; text-align-last: center;
margin-right: 0.4em; margin-right: 0.4em;
} }
#simulcastselect { #simulcastselect {
width: 8em;
text-align-last: center; text-align-last: center;
margin-right: 0.4em; margin-right: 0.4em;
} }
#requestselect { #requestselect {
width: 8em;
text-align-last: center; text-align-last: center;
} }
@ -892,6 +870,14 @@ h1 {
overflow-y: hidden; overflow-y: hidden;
} }
#input:focus {
outline: none;
}
#inputbutton:focus {
outline: none;
}
#resizer { #resizer {
width: 4px; width: 4px;
margin-left: -4px; margin-left: -4px;
@ -989,10 +975,6 @@ h1 {
color: #c2a4e0; color: #c2a4e0;
} }
.sidenav button:hover {
color: #c2a4e0;
}
.sidenav .closebtn { .sidenav .closebtn {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
@ -1135,22 +1117,9 @@ header .collapse:hover {
} }
/* Shrinking the sidebar from 200px to 0px */ /* Shrinking the sidebar from 200px to 0px */
#sidebarnav {
display: none;
width: 250px;
}
#sidebarnav[open=true] {
display: block;
}
#left-sidebar.active { #left-sidebar.active {
display: none; min-width: 0;
} max-width: 0;
#left-sidebar:not(.active) {
display: block;
width:200px;
} }
#left-sidebar .sidebar-header strong { #left-sidebar .sidebar-header strong {
@ -1185,21 +1154,17 @@ header .collapse:hover {
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
white-space: pre; white-space: pre;
display: block;
width: 100%; width: 100%;
text-align: left; text-align: left;
} }
#left-sidebar.active #users > button { #left-sidebar.active #users > div {
padding: 10px 5px !important; padding: 10px 5px !important;
} }
#users > button:hover { #users > div:hover {
background-color: #f2f2f2; background-color: #f2f2f2;
} }
#users > button:focus, #users > button:focus-visible {
outline-offset: -2px;
}
#users > button::before { #users > button::before {
content: "\f111"; content: "\f111";
@ -1274,10 +1239,6 @@ header .collapse:hover {
display: none; display: none;
} }
.video-on #chat {
display: none;
}
.video-container { .video-container {
position: fixed; position: fixed;
height: calc(var(--vh, 1vh) * 100 - 56px); height: calc(var(--vh, 1vh) * 100 - 56px);
@ -1308,7 +1269,7 @@ header .collapse:hover {
flex: 100%; flex: 100%;
width: 100vw; width: 100vw;
/* chat is always visible here */ /* chat is always visible here */
display: block /*!important*/; display: block !important;
} }
.coln-right { .coln-right {
@ -1320,7 +1281,6 @@ header .collapse:hover {
width: 100vw; width: 100vw;
} }
/*
#left-sidebar.active { #left-sidebar.active {
min-width: 200px; min-width: 200px;
max-width: 200px; max-width: 200px;
@ -1330,11 +1290,10 @@ header .collapse:hover {
min-width: 0; min-width: 0;
max-width: 0; max-width: 0;
} }
*/
/* Reappearing the sidebar on toggle button click */ /* Reappearing the sidebar on toggle button click */
#left-sidebar { #left-sidebar {
margin-left: 0; margin-left: 0;
z-index: 1;
} }
#left-sidebar .sidebar-header strong { #left-sidebar .sidebar-header strong {
@ -1349,7 +1308,7 @@ header .collapse:hover {
display: block; display: block;
} }
.sidenav a {padding: 10px 10px;} .sidenav button {padding: 10px 10px;}
.sidenav-header h2 { .sidenav-header h2 {
line-height: 36px; line-height: 36px;
@ -1417,12 +1376,6 @@ header .collapse:hover {
margin-right: 10px; margin-right: 10px;
} }
.contextualMenu button {
outline-offset: 3px;
display: inline-block;
width: calc(100% - 2em);
}
#invite-dialog { #invite-dialog {
background-color: #eee; background-color: #eee;
} }
@ -1449,28 +1402,3 @@ header .collapse:hover {
.toastify.info .toast-close { .toastify.info .toast-close {
color: #000; color: #000;
} }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* wrong preset for some browser! */
video::-webkit-media-controls-enclosure {
display: none !important;
}
video::-webkit-media-controls-panel {
display: none !important;
}
video::-webkit-media-controls {
display: none !important;
}

76
static/galene.html
View file

@ -13,26 +13,23 @@
<link rel="stylesheet" type="text/css" href="/third-party/fontawesome/css/regular.min.css"/> <link rel="stylesheet" type="text/css" href="/third-party/fontawesome/css/regular.min.css"/>
<link rel="stylesheet" type="text/css" href="/third-party/toastify/toastify.css"/> <link rel="stylesheet" type="text/css" href="/third-party/toastify/toastify.css"/>
<link rel="stylesheet" type="text/css" href="/third-party/contextual/contextual.css"/> <link rel="stylesheet" type="text/css" href="/third-party/contextual/contextual.css"/>
<script src="/key.js" ></script>
</head> </head>
<body> <body>
<div id="srSpeak" class="sr-only" aria-live="assertive" aria-atomic="true"></div> <div id="main" class="app">
<main id="main" class="app">
<div class="row full-height"> <div class="row full-height">
<nav id="left-sidebar" class="active"> <nav id="left-sidebar">
<div class="users-header"> <div class="users-header">
<div class="galene-header">Galène</div> <div class="galene-header">Galène</div>
</div> </div>
<h2 class="screenreader">User list</h2> <div class="header-sep"></div>
<div rollr="region" class="header-sep"></div>
<div id="users"></div> <div id="users"></div>
</nav> </nav>
<div class="container"> <div class="container">
<header> <header>
<nav class="topnav navbar navbar-expand navbar-light fixed-top"> <nav class="topnav navbar navbar-expand navbar-light fixed-top">
<div id="header"> <div id="header">
<button class="collapse" title="Collapse left panel" id="sidebarCollapse" aria-label="Collapse left panel"> <button class="collapse" title="Collapse left panel" id="sidebarCollapse">
<i class="fas fa-align-left" aria-hidden="true"></i> <i class="fas fa-align-left" aria-hidden="true"></i>
</button> </button>
<h1 id="title" class="header-title">Galène</h1> <h1 id="title" class="header-title">Galène</h1>
@ -40,48 +37,47 @@
<ul class="nav-menu"> <ul class="nav-menu">
<li> <li>
<button id="presentbutton" class="invisible btn btn-success" aria-label=" Enable"> <button id="presentbutton" class="invisible btn btn-success">
<i class="fas fa-play" aria-hidden="true"></i><span class="nav-text"> Enable</span> <i class="fas fa-play" aria-hidden="true"></i><span class="nav-text"> Enable</span>
</button> </button>
</li> </li>
<li> <li>
<button id="unpresentbutton" class="invisible btn btn-cancel" aria-label=" Disable"> <button id="unpresentbutton" class="invisible btn btn-cancel">
<i class="fas fa-stop" aria-hidden="true"></i><span class="nav-text"> Disable</span> <i class="fas fa-stop" aria-hidden="true"></i><span class="nav-text"> Disable</span>
</button> </button>
</li> </li>
<li> <li>
<button id="mutebutton" class="nav-link nav-button" aria-label="Mute"> <button id="mutebutton" class="nav-link nav-button">
<span><i class="fas fa-microphone-slash" aria-hidden="true"></i></span> <span><i class="fas fa-microphone-slash" aria-hidden="true"></i></span>
<label>Mute</label> <label>Mute</label>
</button> </button>
</li> </li>
<li> <li>
<button id="sharebutton" class="invisible nav-link nav-button" aria-label="Share Screen"> <button id="sharebutton" class="invisible nav-link nav-button">
<span><i class="fas fa-share-square" aria-hidden="true"></i></span> <span><i class="fas fa-share-square" aria-hidden="true"></i></span>
<label>Share Screen</label> <label>Share Screen</label>
</button> </button>
</li> </li>
<li> <li>
<button class="nav-button nav-link nav-more" id="openside" title="Open settings" aria-label="Open settings"> <button class="nav-button nav-link nav-more" id="openside">
<span><i class="fas fa-ellipsis-v" aria-hidden="true"></i></span> <span><i class="fas fa-ellipsis-v" aria-hidden="true"></i></span>
</button> </button>
</li> </li>
</ul> </ul>
</nav> </nav>
</header> </header>
<div class="row full-width video-on" id="mainrow"> <div class="row full-width" id="mainrow">
<div class="coln-left invisible" id="left" > <div class="coln-left" id="left">
<div role="region" id="chat"> <div id="chat">
<h2 class="screenreader">Chat box</h2>
<div id="chatbox"> <div id="chatbox">
<button class="close-chat" id="close-chat" title="Hide chat" aria-label="Hide chat"> <div class="close-chat" id="close-chat" title="Hide chat">
<span class="close-icon"></span> <span class="close-icon"></span>
</button> </div>
<div id="box" tabindex="0" aria-label="Chat Area"></div> <div id="box"></div>
<div class="reply"> <div class="reply">
<form id="inputform"> <form id="inputform">
<textarea id="input" class="form-reply" aria-label="Enter message"></textarea> <textarea id="input" class="form-reply"></textarea>
<input id="inputbutton" type="submit" value="&#10148;" class="btn btn-default" aria-label="Send message"/> <input id="inputbutton" type="submit" value="&#10148;" class="btn btn-default"/>
</form> </form>
</div> </div>
</div> </div>
@ -89,16 +85,16 @@
</div> </div>
<div id="resizer"></div> <div id="resizer"></div>
<div class="coln-right" id="right"> <div class="coln-right" id="right">
<button class="show-video blink invisible" id="show-video" aria-label="Show video"> <button class="show-video blink invisible" id="show-video">
<i class="fas fa-exchange-alt" aria-hidden="true"></i> <i class="fas fa-exchange-alt" aria-hidden="true"></i>
</button> </button>
<button class="chat-btn show-chat" id="show-chat" aria-label="Show chat"> <button class="chat-btn show-chat invisible" id="show-chat">
<i class="far fa-comment-alt icon-chat" title="Show chat"></i> <i class="far fa-comment-alt icon-chat" title="Show chat"></i>
</button> </button>
<button class="chat-btn collapse-video invisible" id="collapse-video" aria-label="Hide video and show chat"> <button class="chat-btn collapse-video invisible" id="collapse-video">
<i class="far fa-comment-alt icon-chat" title="Hide video and show chat"></i> <i class="far fa-comment-alt icon-chat" title="Hide video and show chat"></i>
</button> </button>
<div class="video-container invisible" id="video-container"><h2 class="screenreader">Video area</h2> <div class="video-container invisible" id="video-container">
<div id="expand-video" class="expand-video"> <div id="expand-video" class="expand-video">
<div id="peers"></div> <div id="peers"></div>
</div> </div>
@ -146,19 +142,19 @@
</div> </div>
</div> </div>
</div> </div>
</main> </div>
<div id="sidebarnav" class="sidenav" aria-hidden="true"> <div id="sidebarnav" class="sidenav">
<div class="sidenav-header"> <div class="sidenav-header">
<h2>Settings</h2> <h2>Settings</h2>
<button class="closebtn" id="clodeside" title="Close settings" aria-label="Close settings"><i class="fas fa-times"></i> <button class="closebtn" id="clodeside"><i class="fas fa-times" aria-hidden="true"></i></button>
</div> </div>
<div class="sidenav-content" id="optionsdiv"> <div class="sidenav-content" id="optionsdiv">
<div id="profile" class="profile invisible"> <div id="profile" class="profile invisible">
<div class="profile-user"> <div class="profile-user">
<div class="profile-logo"> <button class="profile-logo">
<span><i class="fas fa-user" aria-hidden="true"></i></span> <span><i class="fas fa-user" aria-hidden="true"></i></span>
</div> </button>
<div class="profile-info"> <div class="profile-info">
<span id="userspan"></span> <span id="userspan"></span>
<span id="permspan"></span> <span id="permspan"></span>
@ -264,19 +260,19 @@
<div id="videocontrols-template" class="invisible"> <div id="videocontrols-template" class="invisible">
<div class="video-controls vc-overlay"> <div class="video-controls vc-overlay">
<div class="controls-button controls-left"> <div class="controls-button controls-left">
<button class="video-play" title="Play video" aria-label="Play video"> <button class="video-play" title="Play video">
<i class="fas fa-play"></i> <i class="fas fa-play"></i>
</button> </button>
<span class="volume" title="Volume"> <span class="volume" title="Volume" role="button">
<i class="fas fa-volume-up volume-mute" tabindex="0" role='button'></i> <i class="fas fa-volume-up volume-mute" aria-hidden="true"></i>
<input class="volume-slider" type="range" max="100" value="100" min="0" step="5" aria-label="Volume slider"> <input class="volume-slider" type="range" max="100" value="100" min="0" step="5" >
</span> </span>
</div> </div>
<div class="controls-button controls-right"> <div class="controls-button controls-right">
<button class="pip" title="Picture In Picture" aria-label="Picture In Picture"> <button class="pip" title="Picture In Picture">
<i class="far fa-clone" aria-hidden="true"></i> <i class="far fa-clone" aria-hidden="true"></i>
</button> </button>
<button class="fullscreen" title="Fullscreen" aria-label="Fullscreen"> <button class="fullscreen" title="Fullscreen">
<i class="fas fa-expand" aria-hidden="true"></i> <i class="fas fa-expand" aria-hidden="true"></i>
</button> </button>
</div> </div>
@ -285,15 +281,11 @@
<div id="topvideocontrols-template" class="invisible"> <div id="topvideocontrols-template" class="invisible">
<div class="top-video-controls"> <div class="top-video-controls">
<div class="controls-button controls-right"> <div class="controls-button controls-right">
<button class="close-icon video-stop" title="Stop video" aria-label="Stop video"> <span class="close-icon video-stop" title="Stop video">
</button> </span>
</div> </div>
</div> </div>
</div> </div>
<div class="sr-help invisible"> <!-- help for translation -->
<span class='voff'>Muted</span>
<span class='von'>On</span>
</div>
<dialog id="invite-dialog"> <dialog id="invite-dialog">
<form method="dialog"> <form method="dialog">

25
static/galene.js
View file

@ -2078,13 +2078,9 @@ function setVolumeButton(muted, button, slider) {
if(!muted) { if(!muted) {
button.classList.remove("fa-volume-mute"); button.classList.remove("fa-volume-mute");
button.classList.add("fa-volume-up"); button.classList.add("fa-volume-up");
let von = document.querySelector('.sr-help .von').textContent;
button.setAttribute("aria-label", von);
} else { } else {
button.classList.remove("fa-volume-up"); button.classList.remove("fa-volume-up");
button.classList.add("fa-volume-mute"); button.classList.add("fa-volume-mute");
let voff = document.querySelector('.sr-help .voff').textContent;
button.setAttribute("aria-label",voff);
} }
if(!(slider instanceof HTMLInputElement)) if(!(slider instanceof HTMLInputElement))
@ -2459,7 +2455,6 @@ function userMenu(elt) {
*/ */
function addUser(id, userinfo) { function addUser(id, userinfo) {
let div = document.getElementById('users'); let div = document.getElementById('users');
//let user = document.createElement('div');
let user = document.createElement('button'); let user = document.createElement('button');
user.id = 'user-' + id; user.id = 'user-' + id;
user.classList.add("user-p"); user.classList.add("user-p");
@ -3170,8 +3165,7 @@ function addToChatbox(id, peerId, dest, nick, time, privileged, history, kind, m
} }
if(doHeader) { if(doHeader) {
// let header = document.createElement('p'); let header = document.createElement('p');
let header = document.createElement('h3');
let user = document.createElement('span'); let user = document.createElement('span');
let u = dest && serverConnection.users[dest]; let u = dest && serverConnection.users[dest];
let name = (u && u.username); let name = (u && u.username);
@ -4176,16 +4170,11 @@ document.getElementById('disconnectbutton').onclick = function(e) {
}; };
function openNav() { function openNav() {
document.getElementById("sidebarnav").setAttribute("open",'true'); document.getElementById("sidebarnav").style.width = "250px";
document.getElementById("sidebarnav").removeAttribute('aria-hidden');
document.querySelector('#sidebarnav .closebtn').focus();
} }
function closeNav() { function closeNav() {
document.getElementById("sidebarnav").removeAttribute('open'); document.getElementById("sidebarnav").style.width = "0";
document.getElementById("sidebarnav").setAttribute("aria-hidden",'true');
document.querySelector('#openside').focus();
} }
document.getElementById('sidebarCollapse').onclick = function(e) { document.getElementById('sidebarCollapse').onclick = function(e) {
@ -4194,9 +4183,9 @@ document.getElementById('sidebarCollapse').onclick = function(e) {
}; };
document.getElementById('openside').onclick = function(e) { document.getElementById('openside').onclick = function(e) {
//e.preventDefault(); e.preventDefault();
let open = document.getElementById("sidebarnav").getAttribute('open'); let sidewidth = document.getElementById("sidebarnav").style.width;
if ( open ) { if (sidewidth !== "0px" && sidewidth !== "") {
closeNav(); closeNav();
return; return;
} else { } else {
@ -4215,7 +4204,6 @@ document.getElementById('collapse-video').onclick = function(e) {
setVisibility('collapse-video', false); setVisibility('collapse-video', false);
setVisibility('show-video', true); setVisibility('show-video', true);
hideVideo(true); hideVideo(true);
document.getElementById('mainrow').classList.remove('video-on');
}; };
document.getElementById('show-video').onclick = function(e) { document.getElementById('show-video').onclick = function(e) {
@ -4223,7 +4211,6 @@ document.getElementById('show-video').onclick = function(e) {
setVisibility('video-container', true); setVisibility('video-container', true);
setVisibility('collapse-video', true); setVisibility('collapse-video', true);
setVisibility('show-video', false); setVisibility('show-video', false);
document.getElementById('mainrow').classList.add('video-on');
}; };
document.getElementById('close-chat').onclick = function(e) { document.getElementById('close-chat').onclick = function(e) {