From 30c662f5a4c7316bd931198a1131c773a6fd6830 Mon Sep 17 00:00:00 2001 From: asuk Date: Mon, 1 Apr 2024 10:56:31 +0200 Subject: [PATCH] beautify AudioOptions dependencies hashes: openFrameworks d78075f4bca6be2a2533c6e51a75cc1f18404501 ofxMsdfgen e14da13d02c4dff04fb69d7923469f606924e6c3 ofxGPUFont d482bb7cbdf6b296fa4ab5abcf73fb5ff8c8b239 ofxVariableLab 0b5f9bdebc1e5550621957e73c040c258ec6317b ofxProfiler a868e34fa1a79189dd4fbdede2938e308535e5e8 --- bin/em/variabletime/web/css/theatre.css | 125 ++++++++++++++++++++++-- bin/em/variabletime/web/js/audio.js | 30 +++++- 2 files changed, 141 insertions(+), 14 deletions(-) diff --git a/bin/em/variabletime/web/css/theatre.css b/bin/em/variabletime/web/css/theatre.css index 2ffcb65..69ac66e 100644 --- a/bin/em/variabletime/web/css/theatre.css +++ b/bin/em/variabletime/web/css/theatre.css @@ -160,8 +160,21 @@ row-gap: 7px; } + + +.sourceLabel_Cont{ + font-variation-settings: 'wght' 500; +} + .source_Dom_Cont { padding: 5px; + display: flex; + align-items: center; + justify-content: space-between; + border-top: 1px dashed #91919177; + padding-top: 10px; + margin-top: 10px; + margin: 10px 0px; } .source_Dom_Cont select { @@ -187,6 +200,8 @@ font-variation-settings: "wght" 700; height: 26px; margin-right: 10px; + width: -webkit-fill-available; + margin-left: 10px; } .audio_min_Cont, @@ -225,9 +240,15 @@ font-variation-settings: "wght" 700; } +.audio_min_max label{ + display: flex; + align-items: center; +} + .audioOptions { margin-top: 5px; margin-bottom: 5px; + padding: 0px 7px 7px 7px; } .audioOptions label { @@ -249,12 +270,64 @@ input[type=checkbox]:checked+label { padding-left: 4px; } -input[type=checkbox]+label::after { +.muteSvg, .soundonSvg{ + display: flex; + align-items: center; + justify-content: center; +} + +.consentContainer{ + display: flex; + align-items: center; + justify-content: center; +} + +.checkmark, .unchecked { + height: 15px; + width: 15px; + background: rgb(163, 163, 163); + border-radius: 50%; + padding: 5px; + cursor: pointer; + margin: 5px; +} + +.consentContainer input ~ .muteSvg { + display: block; +} + +.consentContainer input:checked ~ .soundonSvg { + display: block; +} + +.consentContainer input ~ .soundonSvg { + display: none; +} + +.consentContainer input:checked ~ .muteSvg { + display: none; +} + +.consentContainer input { + position: absolute; + opacity: 0 !important; + cursor: pointer; + height: 0; + width: 0; + -webkit-tap-highlight-color: transparent; +} + +/*input[type=checkbox]+label::after{ content: ' OFF'; } input[type=checkbox]:checked+label::after { content: ' ON'; +}*/ + +label svg{ + width: 20px; + height: 20px; } .audioOptions input[type="radio"] { @@ -292,7 +365,7 @@ input[type=checkbox]:checked+label::after { justify-content: center; align-items: center; column-gap: 5px; - margin: 5px 15px 5px 0px; + margin: 5px 0px 5px 0px; } .sync_Dom { @@ -300,6 +373,14 @@ input[type=checkbox]:checked+label::after { display: flex; flex-direction: column; row-gap: 7px; + border-top: 1px dashed #91919177; + padding-top: 10px; + margin-top: 10px; + margin: 10px 0px 0px 0px; +} + +.sync_Dom p{ + text-align: center; } .sync_titleDom_Cont { @@ -471,7 +552,7 @@ li.layerMover div.selected svg circle { cursor: pointer } -.audioButton:hover { +.audioButton:hover, .checkmark:hover, .unchecked:hover { background: #1cba94; } @@ -483,14 +564,19 @@ li.layerMover div.selected svg circle { background: #1cba94; } +.record_Dom_Cont{ + display: flex; + align-items: center; + justify-content: space-around; + padding: 5px 0px 0px 0px; +} + .audio_recordButton, .recordButton { - width: 17px; + max-width: 50%; margin: 2px; flex-shrink: 0; display: flex; - background: rgb(163, 163, 163); - border-radius: 50%; height: 17px; align-self: center; display: flex; @@ -498,20 +584,39 @@ li.layerMover div.selected svg circle { justify-content: center; padding: 2px; box-sizing: border-box; - cursor: pointer +/* flex-grow: 1;*/ + margin-top: 5px; +} + +.audio_recordButton, +.recordButton, .recordButton label{ + cursor: pointer; +} + +.recordButton .buttonCont{ + background: rgb(163, 163, 163); + display: flex; + align-items: center; + justify-content: center; + width: 17px; + height: 17px; + padding: 0; + border-radius: 50%; } .audio_recordButton { justify-content: flex-start; } -.recordButton:hover { +.recordButton:hover .buttonCont{ background: #1cba94; } .recordButton img { max-width: 70%; - margin-left: 2px; +/* margin-left: 2px;*/ + width: 10px; + height: 10px; } .recordButton label { @@ -555,5 +660,5 @@ li.layerMover div.selected svg circle { /* ASYA: color picker can be changed like this */ .picker_wrapper.popup .picker_arrow::before { - background: pink; +/* background: pink;*/ } diff --git a/bin/em/variabletime/web/js/audio.js b/bin/em/variabletime/web/js/audio.js index 189e251..86cf7c0 100644 --- a/bin/em/variabletime/web/js/audio.js +++ b/bin/em/variabletime/web/js/audio.js @@ -265,6 +265,7 @@ const Audio = function(tp, record) { const createRecordButton = (type) => { const cssClass = toCssClass(`audio_record${propTitle}`); const recordDom = document.createElement('div'); + const buttonCont = document.createElement('div'); const recordDom_img = document.createElement('img'); const recordDom_label = document.createElement('label'); recordDom.id = cssClass; @@ -272,11 +273,13 @@ const Audio = function(tp, record) { recordDom.type = 'button'; recordDom.classList.add('recordButton'); recordDom.classList.add('audio_recordButton'); + buttonCont.classList.add('buttonCont'); recordDom_img.alt = type; recordDom_img.src = '/web/assets/record.svg'; recordDom_label.innerHTML = type; recordDom_label.for = cssClass; - recordDom.append(recordDom_img); + buttonCont.append(recordDom_img); + recordDom.append(buttonCont); recordDom.append(recordDom_label); return recordDom; } @@ -296,6 +299,10 @@ const Audio = function(tp, record) { } const source_Dom_Cont = document.createElement('div'); + const sourceLabel_Cont = document.createElement('div'); + const sourceLabel = document.createElement('p'); + sourceLabel.innerHTML = 'Source: '; + source_Dom_Cont.classList.add('source_Dom_Cont'); const source_Dom = document.createElement('select'); source_Dom.id = toCssClass(`audio_source${propTitle}`); @@ -303,6 +310,9 @@ const Audio = function(tp, record) { source_mic.value = 'microphone'; source_mic.title = 'microphone'; source_mic.innerHTML = 'microphone'; + sourceLabel_Cont.classList.add('sourceLabel_Cont'); + sourceLabel_Cont.append(sourceLabel); + source_Dom_Cont.append(sourceLabel_Cont); source_Dom.append(source_mic); let selectedSource = 'microphone'; if (typeof audio.getSavedMapping()[layer.id()] === 'object') { @@ -332,13 +342,25 @@ const Audio = function(tp, record) { const muteDom = document.createElement('input'); const muteDom_label = document.createElement('label'); + const muteDom_label_mute = document.createElement('div'); + const muteDom_label_soundon = document.createElement('div'); + muteDom_label_mute.classList.add("muteSvg"); + muteDom_label_soundon.classList.add("soundonSvg"); + muteDom_label_soundon.innerHTML = ''; + muteDom_label_mute.innerHTML = ''; + + muteDom_label.classList.add("consentContainer"); + // muteDom_label.for = 'vt_audio_muterotation'; muteDom.id = toCssClass(`audio_mute${propTitle}`); muteDom.name = toCssClass(`audio_mute${propTitle}`); muteDom.type = 'checkbox'; muteDom.checked = true; - muteDom_label.for = toCssClass(`audio_mute${propTitle}`); - muteDom_label.innerHTML = 'muted'; - source_Dom_Cont.append(muteDom); + muteDom_label.htmlFor = toCssClass(`audio_mute${propTitle}`); + + // muteDom_label.innerHTML = 'muted'; + muteDom_label.append(muteDom); + muteDom_label.append(muteDom_label_mute); + muteDom_label.append(muteDom_label_soundon); source_Dom_Cont.append(muteDom_label); const defaultRange = getDefaultRange(layer, propTitle);