mirror of
https://github.com/jech/galene.git
synced 2024-12-22 15:25:48 +01:00
use button instead of wrong elements
This commit is contained in:
jjsa
parent
22e7526c18
commit
fd63d5ef71
3 changed files with 63 additions and 156 deletions
|
|
@ -1,13 +1,7 @@
|
|||
|
||||
button {
|
||||
background: none;
|
||||
border: 0;
|
||||
}
|
||||
.screenreader {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.nav-fixed .topnav {
|
||||
|
|
@ -129,7 +123,7 @@ button {
|
|||
line-height: .7;
|
||||
}
|
||||
|
||||
.sidenav .user-logout button:hover {
|
||||
.sidenav .user-logout a:hover {
|
||||
color: #ab0659;
|
||||
}
|
||||
|
||||
|
|
@ -281,12 +275,12 @@ button {
|
|||
}
|
||||
|
||||
.full-width {
|
||||
/*width: calc(100vw - 200px);*/
|
||||
width: calc(100vw - 200px);
|
||||
height: calc(var(--vh, 1vh) * 100 - 56px);
|
||||
}
|
||||
|
||||
.full-width-active {
|
||||
/* width: 100vw;*/
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -324,6 +318,7 @@ button {
|
|||
resize: none;
|
||||
overflow: hidden;
|
||||
padding: 5px;
|
||||
outline: none;
|
||||
border: none;
|
||||
text-indent: 5px;
|
||||
box-shadow: none;
|
||||
|
|
@ -451,13 +446,6 @@ textarea.form-reply {
|
|||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.message button {
|
||||
margin: 1em;
|
||||
padding: .4em .8em;
|
||||
border-radius: .7em;
|
||||
background: #a1ceff;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
height: calc(var(--vh, 1vh) * 100 - 56px);
|
||||
position: relative;
|
||||
|
|
@ -485,7 +473,7 @@ textarea.form-reply {
|
|||
}
|
||||
|
||||
.collapse-video {
|
||||
left: calc(-100vw);
|
||||
left: 30px;
|
||||
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%);
|
||||
}
|
||||
|
||||
.peer:focus-within > .video-controls, .peer:focus-within > .top-video-controls,
|
||||
.peer:hover > .video-controls, .peer:hover > .top-video-controls {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -548,10 +535,6 @@ textarea.form-reply {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.peer button i {
|
||||
color: #eaeaea;
|
||||
}
|
||||
|
||||
.video-controls span:last-child, .top-video-controls span:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
|
@ -606,7 +589,6 @@ textarea.form-reply {
|
|||
transition: opacity .5s ease-out;
|
||||
}
|
||||
|
||||
.video-controls .volume:focus-within,
|
||||
.video-controls .volume:hover {
|
||||
--ov: 1;
|
||||
--dv: inline;
|
||||
|
|
@ -687,7 +669,7 @@ textarea.form-reply {
|
|||
}
|
||||
|
||||
.nav-cancel, .muted, .nav-cancel label, .muted label {
|
||||
color: #d03e3e;
|
||||
color: #d03e3e
|
||||
}
|
||||
|
||||
.nav-cancel:hover, .muted:hover, .nav-cancel label:hover, .muted label:hover {
|
||||
|
|
@ -699,7 +681,7 @@ textarea.form-reply {
|
|||
font-size: 25px;
|
||||
}
|
||||
|
||||
#openside .nav-more {
|
||||
.nav-more {
|
||||
padding-top: 5px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
@ -810,25 +792,21 @@ h1 {
|
|||
}
|
||||
|
||||
#filterselect {
|
||||
width: 8em;
|
||||
text-align-last: center;
|
||||
margin-right: 0.4em;
|
||||
}
|
||||
|
||||
#sendselect {
|
||||
width: 8em;
|
||||
text-align-last: center;
|
||||
margin-right: 0.4em;
|
||||
}
|
||||
|
||||
#simulcastselect {
|
||||
width: 8em;
|
||||
text-align-last: center;
|
||||
margin-right: 0.4em;
|
||||
}
|
||||
|
||||
#requestselect {
|
||||
width: 8em;
|
||||
text-align-last: center;
|
||||
}
|
||||
|
||||
|
|
@ -892,6 +870,14 @@ h1 {
|
|||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
#input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#inputbutton:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#resizer {
|
||||
width: 4px;
|
||||
margin-left: -4px;
|
||||
|
|
@ -989,10 +975,6 @@ h1 {
|
|||
color: #c2a4e0;
|
||||
}
|
||||
|
||||
.sidenav button:hover {
|
||||
color: #c2a4e0;
|
||||
}
|
||||
|
||||
.sidenav .closebtn {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
|
|
@ -1135,22 +1117,9 @@ header .collapse:hover {
|
|||
}
|
||||
|
||||
/* Shrinking the sidebar from 200px to 0px */
|
||||
#sidebarnav {
|
||||
display: none;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
#sidebarnav[open=true] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#left-sidebar.active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#left-sidebar:not(.active) {
|
||||
display: block;
|
||||
width:200px;
|
||||
min-width: 0;
|
||||
max-width: 0;
|
||||
}
|
||||
|
||||
#left-sidebar .sidebar-header strong {
|
||||
|
|
@ -1185,21 +1154,17 @@ header .collapse:hover {
|
|||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#left-sidebar.active #users > button {
|
||||
#left-sidebar.active #users > div {
|
||||
padding: 10px 5px !important;
|
||||
}
|
||||
|
||||
#users > button:hover {
|
||||
#users > div:hover {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
#users > button:focus, #users > button:focus-visible {
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
#users > button::before {
|
||||
content: "\f111";
|
||||
|
|
@ -1274,10 +1239,6 @@ header .collapse:hover {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.video-on #chat {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: fixed;
|
||||
height: calc(var(--vh, 1vh) * 100 - 56px);
|
||||
|
|
@ -1308,7 +1269,7 @@ header .collapse:hover {
|
|||
flex: 100%;
|
||||
width: 100vw;
|
||||
/* chat is always visible here */
|
||||
display: block /*!important*/;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.coln-right {
|
||||
|
|
@ -1320,7 +1281,6 @@ header .collapse:hover {
|
|||
width: 100vw;
|
||||
}
|
||||
|
||||
/*
|
||||
#left-sidebar.active {
|
||||
min-width: 200px;
|
||||
max-width: 200px;
|
||||
|
|
@ -1330,11 +1290,10 @@ header .collapse:hover {
|
|||
min-width: 0;
|
||||
max-width: 0;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Reappearing the sidebar on toggle button click */
|
||||
#left-sidebar {
|
||||
margin-left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#left-sidebar .sidebar-header strong {
|
||||
|
|
@ -1349,7 +1308,7 @@ header .collapse:hover {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.sidenav a {padding: 10px 10px;}
|
||||
.sidenav button {padding: 10px 10px;}
|
||||
|
||||
.sidenav-header h2 {
|
||||
line-height: 36px;
|
||||
|
|
@ -1417,12 +1376,6 @@ header .collapse:hover {
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.contextualMenu button {
|
||||
outline-offset: 3px;
|
||||
display: inline-block;
|
||||
width: calc(100% - 2em);
|
||||
}
|
||||
|
||||
#invite-dialog {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
|
@ -1449,28 +1402,3 @@ header .collapse:hover {
|
|||
.toastify.info .toast-close {
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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/toastify/toastify.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="/third-party/contextual/contextual.css"/>
|
||||
<script src="/key.js" ></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="srSpeak" class="sr-only" aria-live="assertive" aria-atomic="true"></div>
|
||||
<main id="main" class="app">
|
||||
<div id="main" class="app">
|
||||
<div class="row full-height">
|
||||
<nav id="left-sidebar" class="active">
|
||||
<nav id="left-sidebar">
|
||||
<div class="users-header">
|
||||
<div class="galene-header">Galène</div>
|
||||
</div>
|
||||
<h2 class="screenreader">User list</h2>
|
||||
<div rollr="region" class="header-sep"></div>
|
||||
<div class="header-sep"></div>
|
||||
<div id="users"></div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<header>
|
||||
<nav class="topnav navbar navbar-expand navbar-light fixed-top">
|
||||
<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>
|
||||
</button>
|
||||
<h1 id="title" class="header-title">Galène</h1>
|
||||
|
|
@ -40,48 +37,47 @@
|
|||
|
||||
<ul class="nav-menu">
|
||||
<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>
|
||||
</button>
|
||||
</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>
|
||||
</button>
|
||||
</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>
|
||||
<label>Mute</label>
|
||||
</button>
|
||||
</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>
|
||||
<label>Share Screen</label>
|
||||
</button>
|
||||
</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>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="row full-width video-on" id="mainrow">
|
||||
<div class="coln-left invisible" id="left" >
|
||||
<div role="region" id="chat">
|
||||
<h2 class="screenreader">Chat box</h2>
|
||||
<div class="row full-width" id="mainrow">
|
||||
<div class="coln-left" id="left">
|
||||
<div id="chat">
|
||||
<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>
|
||||
</button>
|
||||
<div id="box" tabindex="0" aria-label="Chat Area"></div>
|
||||
</div>
|
||||
<div id="box"></div>
|
||||
<div class="reply">
|
||||
<form id="inputform">
|
||||
<textarea id="input" class="form-reply" aria-label="Enter message"></textarea>
|
||||
<input id="inputbutton" type="submit" value="➤" class="btn btn-default" aria-label="Send message"/>
|
||||
<textarea id="input" class="form-reply"></textarea>
|
||||
<input id="inputbutton" type="submit" value="➤" class="btn btn-default"/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -89,16 +85,16 @@
|
|||
</div>
|
||||
<div id="resizer"></div>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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="peers"></div>
|
||||
</div>
|
||||
|
|
@ -146,19 +142,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="sidebarnav" class="sidenav" aria-hidden="true">
|
||||
<div id="sidebarnav" class="sidenav">
|
||||
<div class="sidenav-header">
|
||||
<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 class="sidenav-content" id="optionsdiv">
|
||||
<div id="profile" class="profile invisible">
|
||||
<div class="profile-user">
|
||||
<div class="profile-logo">
|
||||
<button class="profile-logo">
|
||||
<span><i class="fas fa-user" aria-hidden="true"></i></span>
|
||||
</div>
|
||||
</button>
|
||||
<div class="profile-info">
|
||||
<span id="userspan"></span>
|
||||
<span id="permspan"></span>
|
||||
|
|
@ -264,19 +260,19 @@
|
|||
<div id="videocontrols-template" class="invisible">
|
||||
<div class="video-controls vc-overlay">
|
||||
<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>
|
||||
</button>
|
||||
<span class="volume" title="Volume">
|
||||
<i class="fas fa-volume-up volume-mute" tabindex="0" role='button'></i>
|
||||
<input class="volume-slider" type="range" max="100" value="100" min="0" step="5" aria-label="Volume slider">
|
||||
<span class="volume" title="Volume" role="button">
|
||||
<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" >
|
||||
</span>
|
||||
</div>
|
||||
<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>
|
||||
</button>
|
||||
<button class="fullscreen" title="Fullscreen" aria-label="Fullscreen">
|
||||
<button class="fullscreen" title="Fullscreen">
|
||||
<i class="fas fa-expand" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -285,15 +281,11 @@
|
|||
<div id="topvideocontrols-template" class="invisible">
|
||||
<div class="top-video-controls">
|
||||
<div class="controls-button controls-right">
|
||||
<button class="close-icon video-stop" title="Stop video" aria-label="Stop video">
|
||||
</button>
|
||||
<span class="close-icon video-stop" title="Stop video">
|
||||
</span>
|
||||
</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">
|
||||
<form method="dialog">
|
||||
|
|
|
|||
|
|
@ -2078,13 +2078,9 @@ function setVolumeButton(muted, button, slider) {
|
|||
if(!muted) {
|
||||
button.classList.remove("fa-volume-mute");
|
||||
button.classList.add("fa-volume-up");
|
||||
let von = document.querySelector('.sr-help .von').textContent;
|
||||
button.setAttribute("aria-label", von);
|
||||
} else {
|
||||
button.classList.remove("fa-volume-up");
|
||||
button.classList.add("fa-volume-mute");
|
||||
let voff = document.querySelector('.sr-help .voff').textContent;
|
||||
button.setAttribute("aria-label",voff);
|
||||
}
|
||||
|
||||
if(!(slider instanceof HTMLInputElement))
|
||||
|
|
@ -2459,7 +2455,6 @@ function userMenu(elt) {
|
|||
*/
|
||||
function addUser(id, userinfo) {
|
||||
let div = document.getElementById('users');
|
||||
//let user = document.createElement('div');
|
||||
let user = document.createElement('button');
|
||||
user.id = 'user-' + id;
|
||||
user.classList.add("user-p");
|
||||
|
|
@ -3170,8 +3165,7 @@ function addToChatbox(id, peerId, dest, nick, time, privileged, history, kind, m
|
|||
}
|
||||
|
||||
if(doHeader) {
|
||||
// let header = document.createElement('p');
|
||||
let header = document.createElement('h3');
|
||||
let header = document.createElement('p');
|
||||
let user = document.createElement('span');
|
||||
let u = dest && serverConnection.users[dest];
|
||||
let name = (u && u.username);
|
||||
|
|
@ -4176,16 +4170,11 @@ document.getElementById('disconnectbutton').onclick = function(e) {
|
|||
};
|
||||
|
||||
function openNav() {
|
||||
document.getElementById("sidebarnav").setAttribute("open",'true');
|
||||
document.getElementById("sidebarnav").removeAttribute('aria-hidden');
|
||||
document.querySelector('#sidebarnav .closebtn').focus();
|
||||
document.getElementById("sidebarnav").style.width = "250px";
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
document.getElementById("sidebarnav").removeAttribute('open');
|
||||
document.getElementById("sidebarnav").setAttribute("aria-hidden",'true');
|
||||
document.querySelector('#openside').focus();
|
||||
|
||||
document.getElementById("sidebarnav").style.width = "0";
|
||||
}
|
||||
|
||||
document.getElementById('sidebarCollapse').onclick = function(e) {
|
||||
|
|
@ -4194,9 +4183,9 @@ document.getElementById('sidebarCollapse').onclick = function(e) {
|
|||
};
|
||||
|
||||
document.getElementById('openside').onclick = function(e) {
|
||||
//e.preventDefault();
|
||||
let open = document.getElementById("sidebarnav").getAttribute('open');
|
||||
if ( open ) {
|
||||
e.preventDefault();
|
||||
let sidewidth = document.getElementById("sidebarnav").style.width;
|
||||
if (sidewidth !== "0px" && sidewidth !== "") {
|
||||
closeNav();
|
||||
return;
|
||||
} else {
|
||||
|
|
@ -4215,7 +4204,6 @@ document.getElementById('collapse-video').onclick = function(e) {
|
|||
setVisibility('collapse-video', false);
|
||||
setVisibility('show-video', true);
|
||||
hideVideo(true);
|
||||
document.getElementById('mainrow').classList.remove('video-on');
|
||||
};
|
||||
|
||||
document.getElementById('show-video').onclick = function(e) {
|
||||
|
|
@ -4223,7 +4211,6 @@ document.getElementById('show-video').onclick = function(e) {
|
|||
setVisibility('video-container', true);
|
||||
setVisibility('collapse-video', true);
|
||||
setVisibility('show-video', false);
|
||||
document.getElementById('mainrow').classList.add('video-on');
|
||||
};
|
||||
|
||||
document.getElementById('close-chat').onclick = function(e) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue