Skip to content

Commit fb1450c

Browse files
deepnightdeepnight
committed
Merge commit 'eeaf691661dce0dc12af3bb87fcb2d7a0ffae4d9'
2 parents 7a77933 + eeaf691 commit fb1450c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+60422
-58835
lines changed

‎app/assets/css/app.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/assets/css/app.scss

+126-68
Original file line numberDiff line numberDiff line change
@@ -299,6 +299,25 @@ button {
299299
}
300300
}
301301

302+
&.toggle {
303+
background-color: $bgDark;
304+
box-shadow: none;
305+
border-radius: 2px;
306+
&.on {
307+
box-shadow: 0 0 8px $green inset;
308+
outline: 1px solid $green;
309+
}
310+
&:not(.on) {
311+
// box-shadow: 0 0 16px $red inset;
312+
outline: 1px solid $bgLight;
313+
// background-color: $darkRed;
314+
.icon {
315+
opacity: 0.5;
316+
// filter: brightness(0.4) sepia(1) hue-rotate(-0.4rad) saturate(6);
317+
}
318+
}
319+
}
320+
302321
&.blue {
303322
background-color: #2a73ab;
304323
&:hover {
@@ -923,10 +942,11 @@ ul.niceList {
923942
grid-template-columns: auto min-content;
924943
gap: 0px 8px;
925944
padding: 8px;
945+
margin-bottom: 1px;
926946

927947
font-size: 12pt;
928948

929-
border-bottom: 1px solid $bgDark;
949+
// border-bottom: 1px solid $bgDark;
930950
background-color: $bgMed;
931951
cursor: pointer;
932952

@@ -943,8 +963,8 @@ ul.niceList {
943963
}
944964

945965
&:not(.active):hover {
946-
outline: 1px solid #586279;
947-
outline-offset: -1px;
966+
outline: 1px solid transparentize($color: white, $amount: 0.35);
967+
outline-offset: -2px;
948968
}
949969

950970
button.context {
@@ -1044,7 +1064,13 @@ ul.niceList {
10441064
li.active {
10451065
background-color: $orange;
10461066
color: black;
1047-
box-shadow: 0px 0px 2px #ffffcc inset, 0px 0px 4px #aa0000;
1067+
&:not(.customColor) {
1068+
box-shadow: 0px 0px 2px #ffffcc inset, 0px 0px 4px #aa0000;
1069+
}
1070+
&.customColor {
1071+
outline: 1px solid white;
1072+
outline-offset: -2px;
1073+
}
10481074
}
10491075

10501076
li.subList.searchMatched {
@@ -1183,6 +1209,7 @@ ul.log {
11831209
.icon.down { background-image: url("../icons/arrow_down.svg"); }
11841210

11851211
.icon.active { background-image: url("../icons/active.png"); }
1212+
.icon.alpha { background-image: url("../icons/alpha.svg"); }
11861213
.icon.appUpdate { background-image: url("../icons/appUpdate.svg"); }
11871214
.icon.add { background-image: url("../icons/add.svg"); }
11881215
.icon.autoLayer { background-image: url("../icons/autoLayer.png") }
@@ -1209,6 +1236,7 @@ ul.log {
12091236
.icon.enum { background-image: url("../icons/enum.png"); }
12101237
.icon.exit { background-image: url("../icons/exit.svg"); }
12111238
.icon.expanded { background-image: url("../icons/expanded.svg"); }
1239+
.icon.fit { background-image: url("../icons/fit.svg"); }
12121240
.icon.flatten { background-image: url("../icons/flatten.svg"); }
12131241
.icon.folder { background-image: url("../icons/folder.svg"); }
12141242
.icon.folderOpen { background-image: url("../icons/folderOpen.svg"); }
@@ -1240,6 +1268,7 @@ ul.log {
12401268
.icon.pick { background-image: url("../icons/pick.svg"); }
12411269
.icon.prohibited { background-image: url("../icons/prohibited.svg"); }
12421270
.icon.project { background-image: url("../icons/projectSettings.png"); }
1271+
.icon.random { background-image: url("../icons/random.svg"); }
12431272
.icon.recall { background-image: url("../icons/recall.svg"); }
12441273
.icon.refresh { background-image: url("../icons/refresh.svg"); }
12451274
.icon.rename { background-image: url("../icons/rename.svg"); }
@@ -1849,9 +1878,21 @@ dl.form {
18491878
}
18501879

18511880
input[type=color] {
1881+
flex: 0 1 64px;
18521882
height: 32px;
18531883
cursor: pointer;
18541884
padding: 0;
1885+
&.null {
1886+
background-image: url("../img/stripes.png");
1887+
background-color: gray;
1888+
appearance: none;
1889+
border-width: 1px;
1890+
border-color: transparent;
1891+
opacity: 0.3;
1892+
&:hover {
1893+
opacity: 1;
1894+
}
1895+
}
18551896
}
18561897
input[type=color]:hover {
18571898
outline: 1px solid $orange;
@@ -2126,6 +2167,13 @@ select {
21262167
border: 1px solid $bgLight;
21272168
}
21282169

2170+
&.disabled {
2171+
color: $bgLight;
2172+
font-style: italic;
2173+
pointer-events: none;
2174+
background-color: $bgMed;
2175+
}
2176+
21292177
&.selected {
21302178
outline: 1px dashed white !important;
21312179
outline-offset: -2px !important;
@@ -4499,9 +4547,11 @@ canvas#webgl {
44994547
width: 100vw;
45004548
height: 100vh;
45014549
z-index: 9999;
4502-
background-color: transparentize($color: $bgDark, $amount: 0.6);
4503-
background-image: url("../img/stripesLight.png");
4504-
background-repeat: repeat;
4550+
&:not(.transparent) {
4551+
background-color: transparentize($color: $bgDark, $amount: 0.6);
4552+
background-image: url("../img/stripesLight.png");
4553+
background-repeat: repeat;
4554+
}
45054555
}
45064556

45074557
#page.editor {
@@ -4708,13 +4758,10 @@ canvas#webgl {
47084758
align-items: center;
47094759
min-width: 1.2em;
47104760
text-align: center;
4711-
color: $bgLighter;
4761+
opacity: 0.5;
47124762
font-weight: bold;
47134763
font-size: 8pt;
47144764
}
4715-
&.active .shortcut {
4716-
color: $darkOrange;
4717-
}
47184765

47194766
.layerIcon {
47204767
display: flex;
@@ -4828,13 +4875,35 @@ canvas#webgl {
48284875
}
48294876
}
48304877

4831-
#toolOptions {
4832-
select {
4833-
width: 100%;
4834-
option.bad {
4835-
color: $bgLight;
4878+
.optionsWrapper {
4879+
display: flex;
4880+
flex-wrap: nowrap;
4881+
4882+
#toolOptions {
4883+
display: flex;
4884+
flex: 1;
4885+
select {
4886+
flex: 1 1 100%;
4887+
width: 100%;
4888+
option.bad {
4889+
color: $bgLight;
4890+
}
48364891
}
48374892
}
4893+
4894+
#paletteOptions {
4895+
flex: 0;
4896+
display: flex;
4897+
flex-wrap: nowrap;
4898+
4899+
&:not(:empty) {
4900+
margin-left: 8px;
4901+
}
4902+
}
4903+
4904+
button {
4905+
padding: 2px 4px;
4906+
}
48384907
}
48394908

48404909
#mainPaletteWrapper {
@@ -5144,6 +5213,10 @@ canvas#webgl {
51445213
}
51455214
}
51465215

5216+
.optionsWrapper {
5217+
display: block;
5218+
}
5219+
51475220
#guide {
51485221
display: none;
51495222
}
@@ -8203,7 +8276,7 @@ body.sorting ul.collapsedSortTarget {
82038276

82048277
.options {
82058278
display: grid;
8206-
grid-template-columns: repeat(6, 1fr);
8279+
grid-template-columns: repeat(7, 1fr);
82078280
gap: 2px;
82088281

82098282
&>* {
@@ -8220,49 +8293,49 @@ body.sorting ul.collapsedSortTarget {
82208293
height: 18px;
82218294
}
82228295

8223-
.random {
8224-
grid-column: 1/4;
8225-
display: flex;
8226-
flex-wrap: nowrap;
8227-
align-items: center;
8296+
input[type=text] {
8297+
padding-left: 24px;
8298+
font-size: 9pt;
8299+
background-repeat: no-repeat;
8300+
background-position: 3px center;
8301+
background-size: 18px;
82288302

8229-
input[name="random"] {
8230-
width: 100%;
8231-
flex: 1 1 0;
8232-
font-size: 9pt;
8233-
padding-top: 1px;
8234-
padding-bottom: 1px;
8235-
background-color: $bgMed;
8236-
background-image: none !important;
8237-
&:focus, &.editing {
8238-
background-color: $bgDark;
8239-
}
8240-
&.max {
8241-
color: $bgLight;
8242-
}
8303+
&.max:not(:focus, .editing) {
8304+
opacity: 0.25;
8305+
}
8306+
8307+
&:focus,
8308+
&.editing {
8309+
background-color: $bgDark;
8310+
}
8311+
8312+
&[name="random"] {
8313+
grid-column: span 3;
8314+
background-image: url("../icons/random.svg");
82438315
&.off {
82448316
color: $red;
82458317
}
82468318
}
82478319

8248-
span {
8249-
font-size: 8pt;
8250-
color: $bgLighter;
8251-
padding-right: 8px;
8320+
&[name="alpha"] {
8321+
grid-column: span 3;
8322+
background-image: url("../icons/alpha.svg");
82528323
}
82538324
}
82548325

82558326
.modulo {
82568327
display: grid;
8328+
grid-column: span 2;
82578329
align-items: center;
8258-
grid-column: 5/7;
82598330
font-size: 9pt;
82608331
text-align: center;
82618332
white-space: nowrap;
82628333
cursor: pointer;
82638334

82648335
&.default {
8265-
color: $bgLighter;
8336+
opacity: 0.4;
8337+
color: $red;
8338+
background-color: $darkRed;
82668339
}
82678340

82688341
&:hover {
@@ -8271,26 +8344,6 @@ body.sorting ul.collapsedSortTarget {
82718344
}
82728345
}
82738346

8274-
input[name=xModulo] {
8275-
grid-column: 5/6;
8276-
}
8277-
input[name=yModulo] {
8278-
grid-column: 6/7;
8279-
}
8280-
input[name=xModulo],
8281-
input[name=yModulo] {
8282-
// width: 20px;
8283-
font-size: 9pt;
8284-
text-align: center;
8285-
color: $help;
8286-
&:not(.default) {
8287-
border: 1px solid $green;
8288-
}
8289-
&.default {
8290-
color: $bgLighter;
8291-
}
8292-
}
8293-
82948347
a {
82958348
flex: 0.5 1 auto;
82968349
display: grid;
@@ -8640,12 +8693,6 @@ $patternSize : 32px;
86408693

86418694
.window.dialog.ruleModuloEditor {
86428695

8643-
// >.wrapper {
8644-
// padding: $gutter;
8645-
// justify-self: left;
8646-
// margin-left: 80px;
8647-
// }
8648-
86498696
>.wrapper .content {
86508697
display: grid;
86518698
max-width: 400px;
@@ -8654,6 +8701,17 @@ $patternSize : 32px;
86548701
.help {
86558702
grid-column: 1/3;
86568703
}
8704+
.form {
8705+
margin-top: 8px;
8706+
padding-top: 8px;
8707+
border-top: 1px solid $bgLight;
8708+
grid-column: 1 / span 2;
8709+
grid-row: 4 / span 1;
8710+
dt {
8711+
white-space: nowrap;
8712+
max-width: none;
8713+
}
8714+
}
86578715

86588716
.options {
86598717
border: 1px solid $bgLight;

‎app/assets/icons/alpha.svg

+1
Loading

‎app/assets/icons/fit.svg

+1
Loading

‎app/assets/icons/random.svg

+1
Loading

‎app/assets/tpl/editAllAutoLayerRules.html

+9-7
Original file line numberDiff line numberDiff line change
@@ -37,20 +37,22 @@ <h2><span class="icon rule"></span> Rules: ::layer::</h2>
3737
<div class="preview"></div>
3838

3939
<div class="options">
40-
<div class="random" title="Random probability for this rule to happen">
40+
<a class="active" title="Enable/disable this rule"> <span class="icon"></span> </a>
41+
<!-- <div class="random" title="Random probability for this rule to happen">
4142
<input type="text" name="random"/>
4243
<span>%</span>
43-
</div>
44-
<a class="randomOffset" title="**Randomize position** Adjust random position settings."> <span class="icon offset"></span> </a>
45-
<div class="modulo" title="Edit modulo values"></div>
44+
</div> -->
45+
<input type="text" name="random" title="Random probability for this rule to apply"/>
46+
<input type="text" name="alpha" title="Opacity of the resulting tile (between 0.0 and 1.0)"/>
4647

47-
<a class="active" title="Enable/disable this rule"> <span class="icon"></span> </a>
48-
<a class="break" title="**Stop on match** If this rule is applied in a grid cell, it will prevent all following rules to apply too"> <span class="icon stop"></span> </a>
48+
<a class="break" title="**Stop on match** If this rule is applied in a grid cell, it will prevent all the rules below to apply"> <span class="icon stop"></span> </a>
4949

5050
<a class="flipX" title="**X mirror** This rule can be reversed HORIZONTALLY to match more cases.">X</a>
5151
<a class="flipY" title="**Y mirror** This rule can be reversed VERTICALLY to match more cases.">Y</a>
52+
<a class="randomOffset" title="**Randomize position** Adjust random position settings."> <span class="icon offset"></span> </a>
53+
<div class="modulo" title='Open "modulo" and "checkboard" options.''></div>
5254
<a class="perlin" title="**Perlin filtering** Use a PERLIN noise to only enable this rule in random area. RIGHT CLICK to customize perlin settings.">P</a>
53-
<a class="checker" title="**Checker mode** Offset rule check every rows/columns. RIGHT CLICK to adjust."> <span class="icon checker"></span> </a>
55+
5456
</div>
5557

5658
<!-- <button class="delete dark">🗑️</button> -->

0 commit comments

Comments
 (0)