mirror of
https://github.com/Mr-Wiseguy/Zelda64Recomp.git
synced 2024-11-22 12:59:14 +01:00
added recording icon while actively mapping
This commit is contained in:
parent
b132dfad77
commit
0337a7fbc2
@ -127,7 +127,7 @@
|
||||
<div class="tab__indicator"></div>
|
||||
</tab>
|
||||
<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-left">
|
||||
<button
|
||||
@ -161,6 +161,7 @@
|
||||
id="input_row"
|
||||
data-for="input_bindings, i : inputs.array"
|
||||
data-event-mouseover="set_input_row_focus(i)"
|
||||
data-class-control-option--active="get_input_enum_name(i)==cur_input_row"
|
||||
>
|
||||
<label
|
||||
class="control-option__label"
|
||||
@ -172,8 +173,15 @@
|
||||
data-for="cur_binding, j : input_bindings"
|
||||
data-event-click="set_input_binding(i,j)"
|
||||
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>
|
||||
</div>
|
||||
<button
|
||||
|
3
assets/icons/RecordBorder.svg
Normal file
3
assets/icons/RecordBorder.svg
Normal 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
@ -1,4 +1,5 @@
|
||||
@use 'sass:color';
|
||||
@use 'sass:math';
|
||||
|
||||
.control-option {
|
||||
@include set-color($color-text-dim);
|
||||
@ -24,6 +25,25 @@
|
||||
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 {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@ -52,6 +72,7 @@
|
||||
@include set-color($color-text-dim);
|
||||
@include trans-colors-border;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 space(4);
|
||||
@ -85,3 +106,63 @@
|
||||
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
Block a user