added recording icon while actively mapping

This commit is contained in:
thecozies 2024-02-25 12:21:18 -06:00
parent b132dfad77
commit 0337a7fbc2
4 changed files with 95 additions and 3 deletions

View File

@ -127,7 +127,7 @@
<div class="tab__indicator"></div> <div class="tab__indicator"></div>
</tab> </tab>
<panel class="config" data-model="controls_model"> <panel class="config" data-model="controls_model">
<form class="config__form" data-attr-cur-input="cur_input_row"> <form class="config__form" data-attr-cur-input="cur_input_row" data-attr-cur-binding-slot="active_binding_slot">
<div class="config__header"> <div class="config__header">
<div class="config__header-left"> <div class="config__header-left">
<button <button
@ -161,6 +161,7 @@
id="input_row" id="input_row"
data-for="input_bindings, i : inputs.array" data-for="input_bindings, i : inputs.array"
data-event-mouseover="set_input_row_focus(i)" data-event-mouseover="set_input_row_focus(i)"
data-class-control-option--active="get_input_enum_name(i)==cur_input_row"
> >
<label <label
class="control-option__label" class="control-option__label"
@ -172,8 +173,15 @@
data-for="cur_binding, j : input_bindings" data-for="cur_binding, j : input_bindings"
data-event-click="set_input_binding(i,j)" data-event-click="set_input_binding(i,j)"
class="prompt-font control-option__binding" class="prompt-font control-option__binding"
data-attr-bind-slot="j"
> >
<div>{{cur_binding}}</div> <div class="control-option__binding-recording">
<div class="control-option__binding-circle" />
<div class="control-option__binding-edge">
<svg class="control-option__binding-edge-svg" src="icons/RecordBorder.svg" />
</div>
</div>
<div class="control-option__binding-icon">{{cur_binding}}</div>
</button> </button>
</div> </div>
<button <button

View File

@ -0,0 +1,3 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="18" stroke="#FFFFFF" stroke-opacity="1.0" stroke-width="3"/>
</svg>

After

Width:  |  Height:  |  Size: 195 B

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,5 @@
@use 'sass:color'; @use 'sass:color';
@use 'sass:math';
.control-option { .control-option {
@include set-color($color-text-dim); @include set-color($color-text-dim);
@ -24,6 +25,25 @@
opacity: 0.5; opacity: 0.5;
} }
&--active {
// while actively looking for inputs, set styles to the correct slots
$valid-binding-slots: 0, 1;
@each $slot in $valid-binding-slots {
// global attr -> this active row -> binding slot
[cur-binding-slot="#{$slot}"] & .control-option__binding[bind-slot="#{$slot}"] {
border-color: $color-error;
.control-option__binding-icon {
opacity: 0;
}
.control-option__binding-recording {
opacity: 1;
}
}
}
}
.icon-button { .icon-button {
flex: 1 1 auto; flex: 1 1 auto;
} }
@ -52,6 +72,7 @@
@include set-color($color-text-dim); @include set-color($color-text-dim);
@include trans-colors-border; @include trans-colors-border;
display: flex; display: flex;
position: relative;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0 space(4); margin: 0 space(4);
@ -85,3 +106,63 @@
cursor: pointer; cursor: pointer;
} }
} }
.control-option__binding-icon {
@include trans-colors-opa;
opacity: 1;
}
@keyframes control-option__binding-recording-scale {
0% {
transform: scale(1);
}
50% {
transform: scale(0.85);
}
to {
transform: scale(1);
}
}
.control-option__binding-recording {
@include trans-colors-opa;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
.control-option__binding-circle {
$rec-size: 24;
width: space($rec-size);
height: space($rec-size);
background-color: $color-error;
border-radius: space($rec-size);
animation: 1.5s sine-in-out infinite control-option__binding-recording-scale;
}
.control-option__binding-edge {
$edge-size: 36;
$h-edge-size: math.div($edge-size, 2);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: space($edge-size);
height: space($edge-size);
> svg.control-option__binding-edge-svg {
width: space($edge-size);
height: space($edge-size);
image-color: $color-error;
}
}
}