thirdpartymirrors/Zelda64Recomp
1
0
Fork 0
mirror of https://github.com/Zelda64Recomp/Zelda64Recomp.git synced 2025-10-30 08:03:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added recording icon while actively mapping

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
assets/config_menu.rml
View file

@ -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
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>
Side by side

After

Width:  |  Height:  |  Size: 195 B

2
assets/recomp.rcss
View file

File diff suppressed because one or more lines are too long

81
assets/scss/styles/components/ControlOption.scss
View file

@ -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;
}
}
}