redesgined the control buttons & made the most important buttons easier to reach
This commit is contained in:
Hani
+55
-4
@@ -49,6 +49,9 @@
|
||||
--btns-margin-left: 0px;
|
||||
--btns-width: 40px;
|
||||
--btns-flex-direction: column;
|
||||
--btns-flex-direction-reverse: row;
|
||||
--bottom-btns-translate-X: -50%;
|
||||
--bottom-btns-bottom: 0%;
|
||||
|
||||
/* left buttons bar horizontal
|
||||
--btns-top: 95%;
|
||||
@@ -234,7 +237,7 @@ body {
|
||||
flex-direction: var(--btns-flex-direction);
|
||||
|
||||
justify-content: center;
|
||||
grid-gap: 0.4rem;
|
||||
grid-gap: 1rem;
|
||||
|
||||
-webkit-transform: translate(0%, -50%);
|
||||
-ms-transform: translate(0%, -50%);
|
||||
@@ -250,8 +253,8 @@ body {
|
||||
#buttonsBar button {
|
||||
padding: 4px;
|
||||
border: none;
|
||||
background: var(--btn-bar-bg-color);
|
||||
color: var(--btn-bar-color);
|
||||
color: var(--btn-bar-bg-color);
|
||||
background-color: var(--btn-bar-color);
|
||||
font-size: 1.5rem;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
@@ -275,6 +278,50 @@ body {
|
||||
color: #e74c3c !important;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Bottom buttons
|
||||
--------------------------------------------------------------*/
|
||||
#bottomButtons {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
left: calc(50% - var(--btns-left));
|
||||
bottom: 0;
|
||||
transform: translate(var(--bottom-btns-translate-X), -100%);
|
||||
display: flex;
|
||||
flex-direction: var(--btns-flex-direction-reverse);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
#bottomButtons button {
|
||||
font-size: 1.35rem;
|
||||
color: #e3e3e3;
|
||||
background-color:#2e2e2e;
|
||||
padding: 14px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Other buttons
|
||||
--------------------------------------------------------------*/
|
||||
#aboutBtn {
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
bottom: 10px;
|
||||
left: 20px;
|
||||
padding: 14px;
|
||||
border: none;
|
||||
color: var(--btn-bar-bg-color);
|
||||
background-color: var(--btn-bar-color);
|
||||
font-size: 1.5rem;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Caption
|
||||
--------------------------------------------------------------*/
|
||||
@@ -638,10 +685,14 @@ a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button:hover:not(#bottomButtons button) {
|
||||
transform: var(--btns-hover-scale);
|
||||
}
|
||||
|
||||
#bottomButtons button:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Chat room input area
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
+10
-6
@@ -2636,14 +2636,18 @@ function setButtonsBarPosition(position) {
|
||||
setSP('--btns-margin-left', '0px');
|
||||
setSP('--btns-width', '40px');
|
||||
setSP('--btns-flex-direction', 'column');
|
||||
setSP('--btns-flex-direction-reverse', 'row');
|
||||
setSP('--bottom-btns-translate-X', '-50%');
|
||||
break;
|
||||
case 'horizontal':
|
||||
setSP('--btns-top', '95%');
|
||||
setSP('--btns-right', '25%');
|
||||
setSP('--btns-left', '50%');
|
||||
setSP('--btns-margin-left', '-330px');
|
||||
setSP('--btns-width', '660px');
|
||||
setSP('--btns-margin-left', '-280px');
|
||||
setSP('--btns-width', '560px');
|
||||
setSP('--btns-flex-direction', 'row');
|
||||
setSP('--btns-flex-direction-reverse', 'column');
|
||||
setSP('--bottom-btns-translate-X', '50%');
|
||||
break;
|
||||
default:
|
||||
console.log('No position found');
|
||||
@@ -4704,7 +4708,7 @@ function setRoomEmojiButton() {
|
||||
function toggleEmojiPicker() {
|
||||
if (emojiPickerContainer.style.display === 'block') {
|
||||
elemDisplay(emojiPickerContainer, false);
|
||||
setColor(roomEmojiPickerBtn, 'black');
|
||||
setColor(roomEmojiPickerBtn, 'white');
|
||||
} else {
|
||||
emojiPickerContainer.style.display = 'block';
|
||||
setColor(roomEmojiPickerBtn, 'yellow');
|
||||
@@ -5867,7 +5871,7 @@ function handleAudio(e, init, force = null) {
|
||||
|
||||
if (init) {
|
||||
initAudioBtn.className = audioClassName;
|
||||
setTippy(initAudioBtn, audioStatus ? 'Stop the audio' : 'Start the audio', 'top');
|
||||
setTippy(initAudioBtn, audioStatus ? 'Stop the audio' : 'Start the audio', 'right');
|
||||
initMicrophoneSelect.disabled = !audioStatus;
|
||||
initSpeakerSelect.disabled = !audioStatus;
|
||||
lS.setInitConfig(lS.MEDIA_TYPE.audio, audioStatus);
|
||||
@@ -7892,7 +7896,7 @@ function handleHideMe(isHideMeActive) {
|
||||
} else {
|
||||
elemDisplay(myVideoWrap, true, 'inline-block');
|
||||
hideMeBtn.className = className.hideMeOff;
|
||||
setColor(hideMeBtn, 'black');
|
||||
setColor(hideMeBtn, 'white');
|
||||
playSound('on');
|
||||
}
|
||||
resizeVideoMedia();
|
||||
@@ -7911,7 +7915,7 @@ function setMyHandStatus() {
|
||||
playSound('raiseHand');
|
||||
} else {
|
||||
// Lower hand
|
||||
setColor(myHandBtn, 'black');
|
||||
setColor(myHandBtn, 'white');
|
||||
elemDisplay(myHandStatusIcon, false);
|
||||
setTippy(myHandBtn, 'Lower your hand', placement);
|
||||
}
|
||||
|
||||
@@ -114,26 +114,34 @@ access to use this app.
|
||||
|
||||
<div id="buttonsBar" class="fadein">
|
||||
<button id="shareRoomBtn" class="fas fa-share-alt"></button>
|
||||
<button id="hideMeBtn" class="fas fa-user"></button>
|
||||
<button id="swapCameraBtn" class="fas fa-camera-rotate"></button>
|
||||
<button id="videoBtn" class="fas fa-video"></button>
|
||||
<button id="audioBtn" class="fas fa-microphone"></button>
|
||||
<button id="screenShareBtn" class="fas fa-desktop"></button>
|
||||
<button id="recordStreamBtn" class="fas fa-record-vinyl"></button>
|
||||
<button id="fullScreenBtn" class="fas fa-expand-alt"></button>
|
||||
<button id="chatRoomBtn" class="fas fa-comment"></button>
|
||||
<button id="captionBtn" class="fas fa-closed-captioning"></button>
|
||||
<button id="roomEmojiPickerBtn" class="fas fa-face-smile"></button>
|
||||
<button id="myHandBtn" class="fas fa-hand-paper"></button>
|
||||
<button id="whiteboardBtn" class="fas fa-chalkboard-teacher"></button>
|
||||
<button id="fileShareBtn" class="fas fa-folder-open"></button>
|
||||
<button id="documentPiPBtn" class="fas fa-images"></button>
|
||||
<button id="mySettingsBtn" class="fas fa-cogs"></button>
|
||||
<button id="aboutBtn" class="fas fa-question"></button>
|
||||
<button id="leaveRoomBtn" class="fas fa-right-from-bracket"></button>
|
||||
</div>
|
||||
<!-- End left buttons -->
|
||||
|
||||
<!-- Left about button -->
|
||||
<button id="aboutBtn" class="fas fa-question"></button>
|
||||
|
||||
<!-- Start bottom buttons -->
|
||||
<div id="bottomButtons">
|
||||
<button id="audioBtn" class="fas fa-microphone"></button>
|
||||
<button id="videoBtn" class="fas fa-video"></button>
|
||||
<button id="swapCameraBtn" class="fas fa-camera-rotate"></button>
|
||||
<button id="hideMeBtn" class="fas fa-user"></button>
|
||||
<button id="screenShareBtn" class="fas fa-desktop"></button>
|
||||
<button id="myHandBtn" class="fas fa-hand-paper"></button>
|
||||
</div>
|
||||
|
||||
<!-- End bottom buttons -->
|
||||
|
||||
<!-- Start room emoji picker -->
|
||||
|
||||
<div id="emojiPickerContainer" class="roomEmoji fadein">
|
||||
|
||||
Reference in New Issue
Block a user