The-Homebrew-Cloud/Zelda64Recomp
2
0
Fork 0
mirror of https://github.com/Mr-Wiseguy/Zelda64Recomp.git synced 2024-11-07 15:15:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

config related style/layout updates

Browse Source
This commit is contained in:
thecozies 2024-01-22 10:43:21 -06:00 committed by Mr-Wiseguy
parent 7b194955c5
commit 2718bfc87c
14 changed files with 493 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
assets/config_menu.rml
View File

@ -30,8 +30,9 @@
<body class="window"> <body class="window">
<!-- <handle move_target="#document"> --> <!-- <handle move_target="#document"> -->
<div id="window" style="display:flex; flex-flow: column; background-color:rgba(0,0,0,0)" onkeydown="config_keydown"> <div id="window" style="display:flex; flex-flow: column; background-color:rgba(0,0,0,0)" onkeydown="config_keydown">
<div class="centered-page"> <div class="centered-page" onclick="close_config_menu_backdrop">
<tabset class="centered-page__modal tabs" id="config_tabset"> <div class="centered-page__modal">
<tabset class="tabs" id="config_tabset">
<tab class="tab" id="tab_graphics" autofocus> <tab class="tab" id="tab_graphics" autofocus>
<div>Graphics</div> <div>Graphics</div>
<div class="tab__indicator"></div> <div class="tab__indicator"></div>
@ -105,6 +106,8 @@
</div> </div>
</div> </div>
<div class="config__footer"> <div class="config__footer">
<!-- this empty div makes sure Apply button gets right aligned -->
<div/>
<div> <div>
<button <button
class="button button--secondary" class="button button--secondary"
@ -165,44 +168,126 @@
<div class="input-config__visual-wrapper"> <div class="input-config__visual-wrapper">
<div class="input-config__visual-aspect"> <div class="input-config__visual-aspect">
<div class="input-config__visual"> <div class="input-config__visual">
<h3>Insert visual here:{{active_binding_input}}:{{active_binding_slot}}</h3> <!-- stick only -->
<h3>Current focused row: {{cur_input_row}}</h3> <div class="input-config__visual-stick-wrapper">
<div <div class="input-config__visual-stick">
class="input-viz" <div>stick!!</div>
data-for="input_bindings, i : inputs.array"
data-attr-visual-input="get_input_enum_name(i)"
>
{{get_input_name(i)}}
</div> </div>
</div>
<!-- top half -->
<div class="input-config__visual-half">
<div class="input-config__visual-quarter-left">
<div>
dpad lmao
</div>
</div>
<div class="input-config__visual-quarter-right">
<div class="input-config__c-buttons">
<div class="input-config__c-buttons-lr">
<div
class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
visual-input="C_LEFT"
>
<svg src="icons/VizMap/ButtonMedium.svg" />
<div class="input-viz__mappings">
<div
class="input-config__visual-mapping"
data-for="cur_binding, i : inputs.C_LEFT"
>
<div>{{cur_binding}}</div>
</div>
</div>
</div>
<div
class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
visual-input="C_RIGHT"
>
<svg src="icons/VizMap/ButtonMedium.svg" />
<div class="input-viz__mappings">
<div
class="input-config__visual-mapping"
data-for="cur_binding, i : inputs.C_RIGHT"
>
<div>{{cur_binding}}</div>
</div>
</div>
</div>
</div>
<div class="input-config__c-buttons-du">
<div <div
class="input-viz input-viz__button input-viz__button--md input-viz__button--C" class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
visual-input="C_DOWN" visual-input="C_DOWN"
> >
<svg src="icons/VizMap/ButtonMedium.svg" /> <svg src="icons/VizMap/ButtonMedium.svg" />
<div class="input-config__visual-mappings"> <div class="input-viz__mappings">
{{C_DOWN}}
<div <div
class="input-config__visual-mapping" class="input-config__visual-mapping"
data-for="cur_binding, j : inputs[C_DOWN]" data-for="cur_binding, i : inputs.C_DOWN"
> >
<div>{{cur_binding}}</div> <div>{{cur_binding}}</div>
<div>{{get_input_from_enum_name('C_DOWN')}}</div>
</div> </div>
</div> </div>
</div> </div>
<div
class="input-viz input-viz__button input-viz__button--sm input-viz__button--C"
visual-input="C_UP"
>
<svg src="icons/VizMap/ButtonMedium.svg" />
<div class="input-viz__mappings">
<div
class="input-config__visual-mapping"
data-for="cur_binding, i : inputs.C_UP"
>
<div>{{cur_binding}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- bottom half -->
<div class="input-config__visual-half input-config__visual-half--bottom">
<div <div
class="input-viz input-viz__Z" class="input-viz input-viz__Z"
visual-input="Z" visual-input="Z"
> >
<svg src="icons/VizMap/Target.svg" /> <svg src="icons/VizMap/Target.svg" />
<div class="input-config__visual-mappings"> <div class="input-viz__mappings">
{{Z}}
<div <div
class="input-config__visual-mapping" class="input-config__visual-mapping"
data-for="cur_binding, j : inputs[Z]" data-for="cur_binding, i : inputs.Z"
> >
<div>{{cur_binding}}</div> <div>{{cur_binding}}</div>
<div>{{get_input_from_enum_name('Z')}}</div> </div>
</div>
</div>
<div
class="input-viz input-viz__R"
visual-input="R"
>
<svg src="icons/VizMap/Shield.svg" />
<div class="input-viz__mappings">
<div
class="input-config__visual-mapping"
data-for="cur_binding, i : inputs.R"
>
<div>{{cur_binding}}</div>
</div>
</div>
</div>
<div
class="input-viz input-viz__L"
visual-input="L"
>
<svg src="icons/VizMap/Map.svg" />
<div class="input-viz__mappings">
<div
class="input-config__visual-mapping"
data-for="cur_binding, i : inputs.L"
>
<div>{{cur_binding}}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -212,6 +297,25 @@
</div> </div>
</div> </div>
<div class="config__footer"> <div class="config__footer">
<div class="config__footer-left">
<button
class="button button--primary"
>
<div class="button__label">Controller</div>
</button>
<button
class="button button--secondary"
>
<div class="button__label">Keyboard</div>
</button>
</div>
<div>
<button
class="button button--warning"
>
<div class="button__label">Reset to defaults</div>
</button>
</div>
</div> </div>
</form> </form>
</panel> </panel>
@ -222,6 +326,15 @@
<panel class="config" > <panel class="config" >
</panel> </panel>
</tabset> </tabset>
<!-- Close button absolutely positioned on top right of modal -->
<button
class="icon-button config__exit-button"
onclick="close_config_menu"
style="z-index: 10000;"
>
<svg src="icons/X.svg" />
</button>
</div>
</div> </div>
<div style="flex:0 1 80dp;display:flex; justify-content: space-between; width:100%; max-width:800dp; align-self:center;"> <div style="flex:0 1 80dp;display:flex; justify-content: space-between; width:100%; max-width:800dp; align-self:center;">
<label style="text-align:center; font-size:24dp;"><span style="font-family:promptfont; font-size:40dp">&#x2424;&#x242B;</span><span style="font-size:24dp;">Navigate</span></label> <label style="text-align:center; font-size:24dp;"><span style="font-family:promptfont; font-size:40dp">&#x2424;&#x242B;</span><span style="font-size:24dp;">Navigate</span></label>

12
assets/icons/Plus.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_101_783)">
<path d="M16 4V28" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" />
<path d="M4 16H28" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" />
</g>
<defs>
<clipPath id="clip0_101_783">
<rect width="32" height="32" fill="white" />
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 469 B

4
assets/icons/VizMap/Map.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="136" height="136" viewBox="0 0 136 136" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="136" height="136" rx="8" fill="#ffffff" fill-opacity="0.2"/>
<rect x="1.5" y="1.5" width="133" height="133" rx="6.5" stroke="#ffffff" stroke-opacity="0.8" stroke-width="3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 302 B

19
assets/icons/VizMap/Shield.svg Normal file
View File

@ -0,0 +1,19 @@
<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_162_1238)">
<mask id="path-1-inside-1_162_1238" fill="white">
<path
d="M48.011 0.0243377C43.618 3.24908 38.8843 6.57117 33.2015 9.78375C24.3182 14.7973 15.9217 18.3628 8.59609 20.9304C7.91464 27.8058 9.89816 53.4821 19.256 69.3137C28.6138 85.1454 41.671 92.5684 48.011 96V95.9757C54.3388 92.544 67.3229 85.2306 76.7416 69.2894C86.1603 53.3482 88.083 27.7815 87.4015 20.9061C80.0759 18.3384 71.6794 14.773 62.7961 9.75941C57.1133 6.54684 52.3796 3.22474 47.9866 0" />
</mask>
<path
d="M48.011 0.0243377C43.618 3.24908 38.8843 6.57117 33.2015 9.78375C24.3182 14.7973 15.9217 18.3628 8.59609 20.9304C7.91464 27.8058 9.89816 53.4821 19.256 69.3137C28.6138 85.1454 41.671 92.5684 48.011 96V95.9757C54.3388 92.544 67.3229 85.2306 76.7416 69.2894C86.1603 53.3482 88.083 27.7815 87.4015 20.9061C80.0759 18.3384 71.6794 14.773 62.7961 9.75941C57.1133 6.54684 52.3796 3.22474 47.9866 0"
fill="#3333FF" fill-opacity="0.2" />
<path
d="M33.2015 9.78375L34.676 12.3964L34.6778 12.3953L33.2015 9.78375ZM8.59609 20.9304L7.60378 18.0993L5.79931 18.7317L5.61072 20.6345L8.59609 20.9304ZM48.011 96L46.5829 98.6383L51.011 101.035V96H48.011ZM48.011 95.9757L46.5808 93.3385L45.011 94.1898V95.9757H48.011ZM87.4015 20.9061L90.3869 20.6102L90.1983 18.7074L88.3938 18.0749L87.4015 20.9061ZM62.7961 9.75941L61.3198 12.371L61.3216 12.372L62.7961 9.75941ZM46.2357 -2.39402C41.8799 0.803476 37.2563 4.04532 31.7251 7.17217L34.6778 12.3953C40.5123 9.09703 45.3562 5.69469 49.7862 2.4427L46.2357 -2.39402ZM31.727 7.17113C23.0183 12.0861 14.7865 15.5817 7.60378 18.0993L9.5884 23.7615C17.0569 21.1438 25.6181 17.5085 34.676 12.3964L31.727 7.17113ZM5.61072 20.6345C5.23291 24.4463 5.60118 32.8792 7.20409 42.2683C8.81006 51.6754 11.724 62.4668 16.6734 70.8402L21.8386 67.7872C17.4302 60.329 14.6734 50.3664 13.1185 41.2586C11.5606 32.1329 11.2778 24.2899 11.5815 21.2263L5.61072 20.6345ZM16.6734 70.8402C26.4559 87.3904 40.1088 95.1341 46.5829 98.6383L49.439 93.3617C43.2332 90.0027 30.7718 82.9004 21.8386 67.7872L16.6734 70.8402ZM51.011 96V95.9757H45.011V96H51.011ZM49.4411 98.6128C55.898 95.1112 69.4802 87.4768 79.3245 70.8154L74.1587 67.7633C65.1656 82.9843 52.7795 89.9769 46.5808 93.3385L49.4411 98.6128ZM79.3245 70.8154C84.3035 62.3884 87.2177 51.5981 88.8166 42.2013C90.4125 32.8221 90.7644 24.4186 90.3869 20.6102L84.4161 21.202C84.7201 24.2689 84.4514 32.0865 82.9016 41.1948C81.3548 50.2856 78.5984 60.2492 74.1587 67.7633L79.3245 70.8154ZM88.3938 18.0749C81.2111 15.5574 72.9792 12.0618 64.2706 7.14679L61.3216 12.372C70.3795 17.4842 78.9407 21.1195 86.4092 23.7372L88.3938 18.0749ZM64.2725 7.14783C58.7413 4.02098 54.1177 0.779138 49.7619 -2.41836L46.2114 2.41836C50.6414 5.67035 55.4853 9.07269 61.3198 12.371L64.2725 7.14783Z"
fill="white" fill-opacity="0.8" mask="url(#path-1-inside-1_162_1238)" />
</g>
<defs>
<clipPath id="clip0_162_1238">
<rect width="79.052" height="96" fill="white" transform="translate(8.47388)" />
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

5
assets/icons/X.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.51465 7.51472L24.4852 24.4853" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round"/>
<path d="M7.51465 24.4853L24.4852 7.51471" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 319 B

2
assets/recomp.rcss
View File

File diff suppressed because one or more lines are too long

7
assets/scss/styles/components/Button.scss
View File

@ -22,7 +22,7 @@
} }
.button { .button {
@extend %label-lg; @extend %label-md;
@include create-button-variation($color-primary); @include create-button-variation($color-primary);
display: block; display: block;
@ -39,6 +39,10 @@
// @include create-button-variation($color-primary); // @include create-button-variation($color-primary);
// } // }
&--large {
@extend %label-lg;
}
&--secondary { &--secondary {
@include create-button-variation($color-secondary); @include create-button-variation($color-secondary);
} }
@ -61,6 +65,7 @@
&:not([disabled]) { &:not([disabled]) {
@extend %nav-all; @extend %nav-all;
cursor: pointer;
} }
&:disabled,&[disabled] { &:disabled,&[disabled] {

15
assets/scss/styles/components/CenteredPage.scss
View File

@ -26,8 +26,19 @@
border-radius: $border-radius-modal; border-radius: $border-radius-modal;
border-color: $color-bg-shadow; border-color: $color-bg-shadow;
border-width: $border-width-thickness; border-width: $border-width-thickness;
}
.centered-page__modal panels { > .tabs {
display: flex;
flex-direction: column;
position: relative;
margin: auto;
flex: 1 1 100%; flex: 1 1 100%;
max-width: space($base-modal-max-width);
width: 100%;
height: 100%;
}
panels {
flex: 1 1 100%;
}
} }

18
assets/scss/styles/components/Config.scss
View File

@ -1,4 +1,10 @@
.config__exit-button {
position: absolute;
top: space(8);
right: space(8);
}
.config__form { .config__form {
@include border-top($color-border-soft); @include border-top($color-border-soft);
display: flex; display: flex;
@ -25,7 +31,7 @@
.config__footer { .config__footer {
@include border-top($color-border-soft); @include border-top($color-border-soft);
display: flex; display: flex;
justify-content: flex-end; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: space(20) space(20); padding: space(20) space(20);
@ -34,6 +40,16 @@
border-bottom-right-radius: $border-radius-modal; border-bottom-right-radius: $border-radius-modal;
} }
.config__footer-left {
display: flex;
flex-direction: row;
flex: 1 1 auto;
> :not(:first-child) {
margin-left: space(8);
}
}
.config__row { .config__row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

7
assets/scss/styles/components/ControlOption.scss
View File

@ -9,7 +9,7 @@
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
height: auto; height: auto;
padding: space(8) space(16) space(8) space(20); padding: space(4) space(16) space(4) space(20);
border-radius: $border-radius-sm; border-radius: $border-radius-sm;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
@ -43,7 +43,7 @@
justify-content: space-between; justify-content: space-between;
flex: 2 1 space(400); flex: 2 1 space(400);
width: 100%; width: 100%;
height: space(72); height: space(56);
padding: 0 space(12) 0 space(4); padding: 0 space(12) 0 space(4);
} }
@ -56,7 +56,7 @@
flex: 1 1 100%; flex: 1 1 100%;
width: 100%; width: 100%;
height: space(72); height: space(56);
padding: space(8); padding: space(8);
background-color: $color-bg-overlay; background-color: $color-bg-overlay;
border-color: $color-bg-overlay; border-color: $color-bg-overlay;
@ -80,5 +80,6 @@
&:not([disabled]) { &:not([disabled]) {
@extend %nav-all; @extend %nav-all;
cursor: pointer;
} }
} }

21
assets/scss/styles/components/IconButton.scss
View File

@ -1,5 +1,11 @@
@use 'sass:color'; @use 'sass:color';
/*
<button
class="icon-button icon-button--danger"
>
<svg src="icons/Trash.svg" />
</button>
*/
@mixin create-icon-button-variation($base-col) { @mixin create-icon-button-variation($base-col) {
background-color: rgba($base-col, 0.05); background-color: rgba($base-col, 0.05);
border-color: rgba($base-col, 0.8); border-color: rgba($base-col, 0.8);
@ -18,7 +24,6 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
.icon-button { .icon-button {
@include set-color($color-text-dim); @include set-color($color-text-dim);
@include create-icon-button-variation($color-primary);
display: flex; display: flex;
align-items: center; align-items: center;
@ -27,6 +32,8 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
border-radius: space($icon-button-size * 0.5); border-radius: space($icon-button-size * 0.5);
border-width: $border-width-thickness; border-width: $border-width-thickness;
border-color: $color-transparent;
background-color: $color-transparent;
width: space($icon-button-size); width: space($icon-button-size);
height: space($icon-button-size); height: space($icon-button-size);
min-width: space($icon-button-size); min-width: space($icon-button-size);
@ -36,10 +43,12 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
&:focus, &:hover { &:focus, &:hover {
@include set-color($color-text); @include set-color($color-text);
background-color: $color-border;
} }
&:active { &:active {
@include set-color(color.scale($color-text, $lightness: 20%)); @include set-color(color.scale($color-text, $lightness: 20%));
background-color: $color-border-soft;
} }
&:disabled,&[disabled] { &:disabled,&[disabled] {
@ -49,6 +58,7 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
&:not([disabled]) { &:not([disabled]) {
@extend %nav-all; @extend %nav-all;
cursor: pointer;
} }
svg { svg {
@ -56,10 +66,9 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
height: space(32); height: space(32);
} }
// Setting it by default for convenience &--primary {
// &--primary { @include create-icon-button-variation($color-primary);
// @include create-icon-button-variation($color-primary); }
// }
&--secondary { &--secondary {
@include create-icon-button-variation($color-secondary); @include create-icon-button-variation($color-secondary);

111
assets/scss/styles/components/InputConfig.scss
View File

@ -47,7 +47,7 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
position: relative; position: relative;
width: 100%; width: 100%;
padding-bottom: 75%; padding-bottom: 75%;
background-color: $color-secondary-a5; background-color: $color-bg-shadow;
margin: auto 0; margin: auto 0;
} }
@ -61,8 +61,74 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
left: 0; left: 0;
} }
.input-config__visual-half {
display: flex;
position: relative;
flex-direction: row;
flex: 1 1 100%;
padding: 6%;
&--bottom {
align-items: flex-end;
justify-content: space-between;
}
}
.input-config__visual-quarter-left {
display: flex;
flex: 1 1 auto;
width: auto;
align-items: flex-start;
justify-content: flex-start;
}
.input-config__visual-quarter-right {
display: flex;
flex: 1 1 100%;
align-items: flex-start;
justify-content: flex-end;
}
.input-config__visual-stick-wrapper {
display: flex;
position: absolute;
align-items: center;
justify-content: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.input-config__visual-stick {
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: space(200);
height: space(200);
border-radius: space(100);
background-color: $color-white-a5;
}
.input-viz { .input-viz {
position: relative; position: relative;
display: flex;
align-items: center;
justify-content: center;
svg {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
&__mappings div {
@extend %prompt-font-sm;
}
} }
$all-inputs: $all-inputs:
@ -142,3 +208,46 @@ $all-inputs:
@include set-svgs-color($color-warning); @include set-svgs-color($color-warning);
@include set-sizes(136); @include set-sizes(136);
} }
.input-viz__R {
@include set-svgs-color($color-white);
@include set-sizes(96);
}
.input-viz__L {
@include set-svgs-color($color-secondary);
@include set-sizes(136);
}
.input-config__c-buttons {
position: relative;
width: space(76+76+56);
height: space(76+56);
&-lr, &-du {
display: flex;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
&-lr {
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}
&-du {
flex-direction: column-reverse;
align-items: center;
justify-content: space-between;
}
.input-viz {
&[visual-input="C_UP"] {
margin-top: space(-32);
}
}
}

2
assets/scss/styles/components/Tabs.scss
View File

@ -15,7 +15,7 @@
.tab { .tab {
@extend %nav-all; @extend %nav-all;
@extend %label-md; @extend %header-3;
display: block; display: block;
position: relative; position: relative;
padding: space(20) space(24); padding: space(20) space(24);

8
assets/scss/styles/mixins/_typography.scss
View File

@ -58,3 +58,11 @@ $font-stack: chiaro;
font-size: space(40); font-size: space(40);
line-height: space(40); line-height: space(40);
} }
%prompt-font-sm {
font-family: promptfont;
font-style: normal;
font-weight: 400;
font-size: space(32);
line-height: space(32);
}