more style changes
parent
31d1e277d2
commit
12fed6164c
|
@ -124,6 +124,9 @@ export class PinHandler {
|
||||||
// text input field for pin name
|
// text input field for pin name
|
||||||
const newNameInput = document.createElement('input');
|
const newNameInput = document.createElement('input');
|
||||||
newNameInput.id = 'nameInput_' + this.pins.toString();
|
newNameInput.id = 'nameInput_' + this.pins.toString();
|
||||||
|
newDiv.addEventListener('click', () => {
|
||||||
|
this.SelectPin(newDiv);
|
||||||
|
});
|
||||||
newDiv.appendChild(newNameInput);
|
newDiv.appendChild(newNameInput);
|
||||||
newNameInput.value = 'PinName_' + this.pins.toString();
|
newNameInput.value = 'PinName_' + this.pins.toString();
|
||||||
newNameInput.addEventListener('focusout', () => {
|
newNameInput.addEventListener('focusout', () => {
|
||||||
|
@ -155,13 +158,7 @@ export class PinHandler {
|
||||||
});
|
});
|
||||||
// break
|
// break
|
||||||
newDiv.appendChild(document.createElement('br'));
|
newDiv.appendChild(document.createElement('br'));
|
||||||
// select pin to place
|
|
||||||
const selectPinButton = document.createElement('button');
|
|
||||||
newDiv.appendChild(selectPinButton);
|
|
||||||
selectPinButton.textContent = 'Select';
|
|
||||||
selectPinButton.addEventListener('click', () => {
|
|
||||||
this.SelectPin(newDiv);
|
|
||||||
});
|
|
||||||
this.UpdateAnimationPinNames();
|
this.UpdateAnimationPinNames();
|
||||||
this.UpdatePinBoxStatus();
|
this.UpdatePinBoxStatus();
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,7 +1,9 @@
|
||||||
$bg-color: #859094;
|
$bg-color: #3d2b56;
|
||||||
$bg-dark-color: #7a8386;
|
$bg-dark-color: #7a8386;
|
||||||
|
$canvas-bg-color: #859094;
|
||||||
|
$secondary-bg-color: #2c497f;
|
||||||
$main-border-color: #6b7578;
|
$main-border-color: #6b7578;
|
||||||
$main-font-color: #101e24;
|
$main-font-color: #ccf5ac;
|
||||||
$selected-border-color: #09e7ca;
|
$selected-border-color: #09e7ca;
|
||||||
$selected-bg-color: #4d998f;
|
$selected-bg-color: #4d998f;
|
||||||
$warning-border-color: #aa093a;
|
$warning-border-color: #aa093a;
|
||||||
|
@ -10,6 +12,10 @@ $warning-selected-border-color: #ff044f;
|
||||||
$warning-selected-bg-color: #aa093a;
|
$warning-selected-bg-color: #aa093a;
|
||||||
$warning-text-color: #ff1d61;
|
$warning-text-color: #ff1d61;
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: $bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
div {
|
div {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
|
@ -37,6 +43,7 @@ div {
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-style: dashed;
|
border-style: dashed;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
background-color: $canvas-bg-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
#top {
|
#top {
|
||||||
|
@ -53,7 +60,8 @@ div {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
width: 20%;
|
width: 20%;
|
||||||
max-width: 200px;
|
max-width: 150px;
|
||||||
|
min-width: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settingsItem {
|
.settingsItem {
|
||||||
|
@ -70,6 +78,16 @@ div {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.settingsItem {
|
||||||
|
input {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#framerate {
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
.borderbox {
|
.borderbox {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
@ -84,7 +102,7 @@ div {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: $bg-dark-color;
|
background-color: $secondary-bg-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
#frameViewer {
|
#frameViewer {
|
||||||
|
@ -150,16 +168,27 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pinContainer {
|
.pinContainer {
|
||||||
display: flex;
|
display: inline-grid;
|
||||||
flex-direction: row;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$pin-button-size: 6vw;
|
||||||
|
|
||||||
.pinButtonContainer {
|
.pinButtonContainer {
|
||||||
max-width: 10%;
|
grid-row-start: 1;
|
||||||
flex: 1;
|
grid-row-end: 1;
|
||||||
|
width: $pin-button-size;
|
||||||
|
height: $pin-button-size;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
border: 2px solid $main-border-color;
|
border: 2px solid $main-border-color;
|
||||||
|
border-radius: 5px;
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: $pin-button-size;
|
||||||
|
|
||||||
|
margin: 5px;
|
||||||
|
|
||||||
&.warning {
|
&.warning {
|
||||||
border: 2px solid $warning-border-color;
|
border: 2px solid $warning-border-color;
|
||||||
background-color: $warning-bg-color;
|
background-color: $warning-bg-color;
|
||||||
|
@ -175,11 +204,25 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
width: 100%;
|
width: 80%;
|
||||||
|
transform: translateY($pin-button-size / 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#addpin {
|
||||||
|
display: inline-block;
|
||||||
|
width: $pin-button-size;
|
||||||
|
height: $pin-button-size;
|
||||||
|
background-color: $warning-bg-color;
|
||||||
|
font-size: 4vw;
|
||||||
|
}
|
||||||
|
|
||||||
.removeButton {
|
.removeButton {
|
||||||
|
position: relative;
|
||||||
|
transform: translate($pin-button-size / 2, -$pin-button-size / 2);
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
border-radius: 5px;
|
||||||
background-color: rgb(158, 15, 34);
|
background-color: rgb(158, 15, 34);
|
||||||
color: rgb(227, 227, 236);
|
color: rgb(227, 227, 236);
|
||||||
}
|
}
|
||||||
|
|
|
@ -31,11 +31,10 @@
|
||||||
<div id="frameViewer"></div>
|
<div id="frameViewer"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="borderbox">
|
<div class="borderbox">
|
||||||
<button id="addpin">Create New Pin</button>
|
<div id="pinContainer" class="pinContainer" >
|
||||||
<div id="pinContainer" class="pinContainer" >
|
<div class="pinButtonContainer" id="originPin">Origin</div>
|
||||||
<div class="pinButtonContainer" id="originPin"><p>Origin</p><button id="selectOrigin">Select</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div id="addpin" class="pinButtonContainer">+</div>
|
||||||
</div>
|
</div>
|
||||||
<div id = "info">
|
<div id = "info">
|
||||||
<div class="instruction">
|
<div class="instruction">
|
||||||
|
|
Loading…
Reference in New Issue