added recording icon while actively mapping
This commit is contained in:
parent
b132dfad77
commit
0337a7fbc2
|
@ -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
|
||||||
|
|
|
@ -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
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue