This commit is contained in:
Azgaar 2019-09-12 03:04:18 +03:00
parent 2e60c6a1a6
commit 8157585533
7 changed files with 49 additions and 45 deletions

View file

@ -761,17 +761,17 @@ table.matrix-table td.x {
} }
body button.noicon { body button.noicon {
width: 24px; width: 1.8em;
height: 20px; height: 1.6em;
margin: 1px; margin: 1px;
padding: 1px 6px; padding: .1em .5em;
float: left; float: left;
font-size: 1.2em;
font-family: Copperplate, monospace; font-family: Copperplate, monospace;
} }
#brushesButtons > button { #brushesButtons > button {
padding: 0; padding: 0;
width: 25px;
} }
#brushesButtons svg { #brushesButtons svg {
@ -785,7 +785,7 @@ body button.noicon {
#templateEditor #templateTools { #templateEditor #templateTools {
display: inline-block; display: inline-block;
margin-bottom: -3px; margin-bottom: -.3em;
} }
#templateBody>div { #templateBody>div {
@ -793,8 +793,8 @@ body button.noicon {
border-radius: 1px; border-radius: 1px;
background-image: linear-gradient(to right, #ffffff 0%, #fafafa 51%, #ebebeb 100%); background-image: linear-gradient(to right, #ffffff 0%, #fafafa 51%, #ebebeb 100%);
margin: 1px 1px; margin: 1px 1px;
padding: 1px 2px; padding: .1em .2em;
height: 13px; height: 1.2em;
} }
#templateBody>div:hover { #templateBody>div:hover {
@ -950,7 +950,7 @@ i.resetButton:active {
outline: none; outline: none;
height: 2px; height: 2px;
background: #d4d4d4; background: #d4d4d4;
top: -4px; top: -.35em;
position: relative; position: relative;
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
@ -959,8 +959,8 @@ i.resetButton:active {
.ui-dialog input[type="range"]::-webkit-slider-thumb { .ui-dialog input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
border-radius: 15%; border-radius: 15%;
width: 10px; width: 1em;
height: 10px; height: 1em;
background: #e9e9e9; background: #e9e9e9;
border: 1px solid #9b9b9b; border: 1px solid #9b9b9b;
cursor: pointer; cursor: pointer;
@ -969,8 +969,8 @@ i.resetButton:active {
.ui-dialog input[type="range"]::-moz-range-thumb { .ui-dialog input[type="range"]::-moz-range-thumb {
appearance: none; appearance: none;
border-radius: 15%; border-radius: 15%;
width: 10px; width: 1em;
height: 10px; height: 1em;
background: #e9e9e9; background: #e9e9e9;
border: 1px solid #9b9b9b; border: 1px solid #9b9b9b;
cursor: pointer; cursor: pointer;
@ -1044,13 +1044,13 @@ div.slider .ui-slider-handle {
#brushPower, #brushPower,
#brushRadius { #brushRadius {
width: 88px; width: 8em;
} }
#rescaleHigher, #rescaleHigher,
#rescaleLower, #rescaleLower,
#rescaleModifier { #rescaleModifier {
width: 40px; width: 3.7em;
} }
.italic { .italic {
@ -1363,11 +1363,16 @@ div.states > div.biomeArea {
stroke: #000000; stroke: #000000;
} }
#pickerControls,
#pickerSpaces {
font-size: 11px;
}
#pickerSpaces input { #pickerSpaces input {
height: 8px; height: 8px;
width: 16px; width: 16px;
font-size: 9px;
text-align: center; text-align: center;
font-size: 9px;
-moz-appearance: textfield; -moz-appearance: textfield;
} }
@ -1625,18 +1630,17 @@ input[type="checkbox"] {
content: ''; content: '';
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
width: 7px; width: .6em;
height: 7px; height: .6em;
padding: 2px; padding: .2em;
margin-right: 3px; margin-right: .2em;
border: 1px solid darkgrey; border: 1px solid darkgrey;
border-radius: 15%; border-radius: 15%;
background: white; background: white;
} }
.checkbox:checked+.checkbox-label:before { .checkbox:checked+.checkbox-label:before {
line-height: 8px; line-height: .8em;
font-size: 12px;
font-weight: bold; font-weight: bold;
content: '✓'; content: '✓';
color: #333333; color: #333333;
@ -1679,7 +1683,6 @@ div.textual textarea {
div.textual input { div.textual input {
font-family: Copperplate, monospace; font-family: Copperplate, monospace;
outline: none; outline: none;
height: 12px;
} }
div.textual fieldset { div.textual fieldset {
@ -1688,7 +1691,7 @@ div.textual fieldset {
} }
div.textual span, .textual legend { div.textual span, .textual legend {
font-size: 9px; font-size: .8em;
font-weight: bold; font-weight: bold;
} }
@ -1788,7 +1791,6 @@ svg.button {
#reliefIconsDiv { #reliefIconsDiv {
margin-top: 2px; margin-top: 2px;
padding: 2px; padding: 2px;
max-width: 30vw;
} }
#reliefIconsDiv svg { #reliefIconsDiv svg {

View file

@ -2400,7 +2400,7 @@
<button id="convertComplete" data-tip="Complete the assignment. All unassigned colors will be considered as ocean" class="icon-check"></button> <button id="convertComplete" data-tip="Complete the assignment. All unassigned colors will be considered as ocean" class="icon-check"></button>
</div> </div>
<div data-tip="Set opacity of the loaded image" style="padding-top: 4px"><i>Overlay opacity:</i> <div data-tip="Set opacity of the loaded image" style="padding-top: 4px"><i>Overlay opacity:</i><br>
<input id="convertOverlay" type="range" min=0 max=1 step=.01 value=0 style="width: 8em"> <input id="convertOverlay" type="range" min=0 max=1 step=.01 value=0 style="width: 8em">
<input id="convertOverlayNumber" type="number" min=0 max=1 step=.01 value=0 style="width: 3.5em; border: 1px solid #d4d4d4"> <input id="convertOverlayNumber" type="number" min=0 max=1 step=.01 value=0 style="width: 3.5em; border: 1px solid #d4d4d4">
</div> </div>
@ -2739,9 +2739,9 @@
<div id="notesEditor" class="dialog stable textual" style="display: none"> <div id="notesEditor" class="dialog stable textual" style="display: none">
<div> <div>
<span>Select object: </span> <span>Select object: </span>
<select id="notesSelect" data-tip="Select object" style="width: 120px;"></select> <select id="notesSelect" data-tip="Select object" style="width: 12em"></select>
<span>Object name: </span> <span>Object name: </span>
<input id="notesName" data-tip="Type to change object name" autocorrect="off" spellcheck="false" style="width: 120px;"> <input id="notesName" data-tip="Type to change object name" autocorrect="off" spellcheck="false" style="width: 12em">
</div> </div>
<div> <div>
<span>Legend:</span><br> <span>Legend:</span><br>

View file

@ -418,7 +418,7 @@ function getHeight(h) {
function openBrushesPanel() { function openBrushesPanel() {
if ($("#brushesPanel").is(":visible")) return; if ($("#brushesPanel").is(":visible")) return;
$("#brushesPanel").dialog({ $("#brushesPanel").dialog({
title: "Paint Brushes", minHeight: 40, width: "auto", maxWidth: 200, resizable: false, title: "Paint Brushes", resizable: false,
position: {my: "right top", at: "right-10 top+10", of: "svg"} position: {my: "right top", at: "right-10 top+10", of: "svg"}
}).on('dialogclose', exitBrushMode); }).on('dialogclose', exitBrushMode);

View file

@ -27,7 +27,7 @@ function editNotes(id, name) {
// open a dialog // open a dialog
$("#notesEditor").dialog({ $("#notesEditor").dialog({
title: "Notes Editor", minWidth: Math.min(svgWidth, 400), title: "Notes Editor", minWidth: "40em",
position: {my: "center", at: "center", of: "svg"} position: {my: "center", at: "center", of: "svg"}
}); });

View file

@ -61,8 +61,9 @@ options.querySelector("div.tab").addEventListener("click", function(event) {
if (id === "styleTab") styleContent.style.display = "block"; else if (id === "styleTab") styleContent.style.display = "block"; else
if (id === "optionsTab") optionsContent.style.display = "block"; else if (id === "optionsTab") optionsContent.style.display = "block"; else
if (id === "toolsTab" && (!customization || customization === 10)) toolsContent.style.display = "block"; else if (id === "toolsTab") customization === 1
if (id === "toolsTab" && customization && customization !== 10) customizationMenu.style.display = "block"; else ? customizationMenu.style.display = "block"
: toolsContent.style.display = "block"; else
if (id === "aboutTab") aboutContent.style.display = "block"; if (id === "aboutTab") aboutContent.style.display = "block";
}); });
@ -601,9 +602,9 @@ function askToRestoreDefaultStyle() {
// request a URL to image to be used as a texture // request a URL to image to be used as a texture
function textureProvideURL() { function textureProvideURL() {
alertMessage.innerHTML = `Provide an image URL to be used as a texture: alertMessage.innerHTML = `Provide an image URL to be used as a texture:
<input id="textureURL" type="url" style="width: 254px" placeholder="http://www.example.com/image.jpg" oninput="fetchTextureURL(this.value)"> <input id="textureURL" type="url" style="width: 24em" placeholder="http://www.example.com/image.jpg" oninput="fetchTextureURL(this.value)">
<div style="border: 1px solid darkgrey; height: 144px; margin-top: 2px"><canvas id="preview" width="256px" height="144px"></canvas></div>`; <div style="border: 1px solid darkgrey; height: 144px; margin-top: 2px"><canvas id="preview" width="256px" height="144px"></canvas></div>`;
$("#alert").dialog({resizable: false, title: "Load custom texture", width: 280, $("#alert").dialog({resizable: false, title: "Load custom texture", width: "26em",
buttons: { buttons: {
Apply: function() { Apply: function() {
const name = textureURL.value.split("/").pop(); const name = textureURL.value.split("/").pop();
@ -679,6 +680,7 @@ optionsContent.addEventListener("input", function(event) {
else if (id === "manorsInput") changeBurgsNumberSlider(value); else if (id === "manorsInput") changeBurgsNumberSlider(value);
else if (id === "religionsInput") religionsOutput.value = value; else if (id === "religionsInput") religionsOutput.value = value;
else if (id === "uiSizeInput") uiSizeOutput.value = value; else if (id === "uiSizeInput") uiSizeOutput.value = value;
else if (id === "uiSizeOutput") changeUIsize(value);
else if (id === "tooltipSizeInput" || id === "tooltipSizeOutput") changeTooltipSize(value); else if (id === "tooltipSizeInput" || id === "tooltipSizeOutput") changeTooltipSize(value);
else if (id === "transparencyInput") changeDialogsTransparency(value); else if (id === "transparencyInput") changeDialogsTransparency(value);
else if (id === "pngResolutionInput") pngResolutionOutput.value = value; else if (id === "pngResolutionInput") pngResolutionOutput.value = value;
@ -690,7 +692,7 @@ optionsContent.addEventListener("change", function(event) {
const id = event.target.id, value = event.target.value; const id = event.target.id, value = event.target.value;
if (id === "zoomExtentMin" || id === "zoomExtentMax") changeZoomExtent(value); if (id === "zoomExtentMin" || id === "zoomExtentMax") changeZoomExtent(value);
else if (id === "optionsSeed") generateMapWithSeed(); else if (id === "optionsSeed") generateMapWithSeed();
else if (id === "uiSizeInput" || id === "uiSizeOutput") changeUIsize(value); else if (id === "uiSizeInput") changeUIsize(value);
}); });
optionsContent.addEventListener("click", function(event) { optionsContent.addEventListener("click", function(event) {
@ -862,7 +864,7 @@ function applyStoredOptions() {
if (localStorage.getItem("regions")) changeStatesNumber(localStorage.getItem("regions")); if (localStorage.getItem("regions")) changeStatesNumber(localStorage.getItem("regions"));
if (localStorage.getItem("uiSize")) changeUIsize(localStorage.getItem("uiSize")); if (localStorage.getItem("uiSize")) changeUIsize(localStorage.getItem("uiSize"));
else changeUIsize(Math.max(Math.min(rn(mapWidthInput.value / 1230, 1), 3), 1)); else changeUIsize(Math.max(Math.min(rn(mapWidthInput.value / 1280, 1), 2.5), 1));
} }
// randomize options if randomization is allowed (not locked) // randomize options if randomization is allowed (not locked)
@ -1064,10 +1066,10 @@ function toggleLoadPane() {
function loadURL() { function loadURL() {
const pattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/; const pattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
const inner = `Provide URL to a .map file: const inner = `Provide URL to a .map file:
<input id="mapURL" type="url" style="width: 254px" placeholder="https://e-cloud.com/test.map"> <input id="mapURL" type="url" style="width: 24em" placeholder="https://e-cloud.com/test.map">
<br><i>Please note server should allow CORS for file to be loaded. If CORS is not allowed, save file to Dropbox and provide a direct link</i>`; <br><i>Please note server should allow CORS for file to be loaded. If CORS is not allowed, save file to Dropbox and provide a direct link</i>`;
alertMessage.innerHTML = inner; alertMessage.innerHTML = inner;
$("#alert").dialog({resizable: false, title: "Load map from URL", width: 280, $("#alert").dialog({resizable: false, title: "Load map from URL", width: "26em",
buttons: { buttons: {
Load: function() { Load: function() {
const value = mapURL.value; const value = mapURL.value;

View file

@ -12,7 +12,7 @@ function editReliefIcon() {
updateReliefSizeInput(); updateReliefSizeInput();
$("#reliefEditor").dialog({ $("#reliefEditor").dialog({
title: "Edit Relief Icons", resizable: false, width: 294, title: "Edit Relief Icons", resizable: false, width: "27em",
position: {my: "left top", at: "left+10 top+10", of: "#map"}, position: {my: "left top", at: "left+10 top+10", of: "#map"},
close: closeReliefEditor close: closeReliefEditor
}); });

View file

@ -340,7 +340,7 @@ function addRiverOnClick() {
alertMessage.innerHTML = `<p>Heightmap is depressed and the system had to change the heightmap to allow water flux.</p> alertMessage.innerHTML = `<p>Heightmap is depressed and the system had to change the heightmap to allow water flux.</p>
Would you like to <i>keep</i> the changes or <i>restore</i> the initial heightmap?`; Would you like to <i>keep</i> the changes or <i>restore</i> the initial heightmap?`;
$("#alert").dialog({resizable: false, title: "Heightmap is changed", width: 300, modal: true, $("#alert").dialog({resizable: false, title: "Heightmap is changed", width: "30em", modal: true,
buttons: { buttons: {
Keep: function() {$(this).dialog("close");}, Keep: function() {$(this).dialog("close");},
Restore: function() { Restore: function() {