scss styles for frames

master
Beau Blyth 2019-10-04 16:38:11 -07:00
parent fc76ad81ab
commit e0360b237a
10 changed files with 1355 additions and 195 deletions

View File

@ -115,27 +115,25 @@ export class FrameHandler {
public RefreshFrameViewer() { public RefreshFrameViewer() {
// set all frames to inactive // set all frames to inactive
for (let i = 0; i < this.frameViewer.children.length; i++) { for (let i = 0; i < this.frameViewer.children.length; i++) {
this.frameViewer.children[i].className = 'frame'; this.frameViewer.children[i].classList.remove('selected', 'warning');
} }
// set current frame to active // set current frame to active
if (this.frameViewer.children[this.projectData.currentFrame] !== undefined) { if (this.frameViewer.children[this.projectData.currentFrame] !== undefined) {
this.frameViewer.children[this.projectData.currentFrame].className = 'frameActive'; this.frameViewer.children[this.projectData.currentFrame].classList.add('selected');
} }
// check frames for data errors // check frames for data errors
for (let f = 0; f < this.animationData.frames.length; f++) { for (let f = 0; f < this.animationData.frames.length; f++) {
// this.frameViewer.children[f].classList.add('warning');
if (this.animationData.pins !== undefined) { if (this.animationData.pins !== undefined) {
for (let p = 0; p < this.animationData.pins.length; p++) { for (let p = 0; p < this.animationData.pins.length; p++) {
if (this.animationData.pins[p] !== undefined) { if (this.animationData.pins[p] !== undefined) {
const pinIDtoCheck = this.animationData.pins[p].id; const pinIDtoCheck = this.animationData.pins[p].id;
console.log('checking frame ' + f + ' for pinID ' + this.animationData.pins[p].name); // console.log('checking frame ' + f + ' for pinID ' + this.animationData.pins[p].name);
if (this.frameViewer.children[f] !== undefined) { if (this.frameViewer.children[f] !== undefined) {
if (this.animationData.frames[f][pinIDtoCheck] === undefined) { if (this.animationData.frames[f][pinIDtoCheck] === undefined) {
if (f === this.projectData.currentFrame) { this.frameViewer.children[f].classList.add('warning');
this.frameViewer.children[f].className = 'frameActiveWarning';
} else {
this.frameViewer.children[f].className = 'frameWarning';
}
break; break;
} }
} }
@ -147,8 +145,8 @@ export class FrameHandler {
private RefreshImage() { private RefreshImage() {
if (this.filenames.length === 0) { if (this.filenames.length === 0) {
this.frameNumberDiv.className = 'warning'; // this.frameNumberDiv.className = 'warning';
this.frameNumberDiv.innerText = 'No images uploaded yet'; // this.frameNumberDiv.innerText = 'No images uploaded yet';
} else { } else {
this.canvasContext.clearRect(0, 0, this.htmlCanvasElement.width, this.htmlCanvasElement.height); this.canvasContext.clearRect(0, 0, this.htmlCanvasElement.width, this.htmlCanvasElement.height);
this.canvasContext.imageSmoothingEnabled = false; this.canvasContext.imageSmoothingEnabled = false;

View File

@ -26,10 +26,9 @@ export class PinHandler {
this.animationData = animationData; this.animationData = animationData;
// add origin click behaviour // add origin click behaviour
originPin.id = 'pinID_0';
originPin.addEventListener('click', () => { originPin.addEventListener('click', () => {
this.DeselectAllPinContainers(); this.SelectPin(originPin);
originPin.className = 'pinButtonContainerSelected';
projectData.currentlySelectedPin = 0;
}); });
// put origin into pincontainer array // put origin into pincontainer array
this.allPinContainers = [ originPin ]; this.allPinContainers = [ originPin ];
@ -63,6 +62,7 @@ export class PinHandler {
this.allPinContainers[i].remove(); this.allPinContainers[i].remove();
} }
this.ResetPinSelection(); this.ResetPinSelection();
this.UpdateAnimationPinNames();
}; };
public GetAvailablePins = (): number[] => { public GetAvailablePins = (): number[] => {
@ -99,6 +99,20 @@ export class PinHandler {
this.allPinContainers[0].className = 'pinButtonContainerSelected'; this.allPinContainers[0].className = 'pinButtonContainerSelected';
}; };
private CheckOriginDataExists = () => {
this.allPinContainers[0].className = 'pinButtonContainer';
if (this.projectData.currentlySelectedPin === 0) {
this.allPinContainers[0].className = 'pinButtonContainerSelected';
}
if (this.animationData.originX === null || this.animationData.originY === null) {
if (this.projectData.currentlySelectedPin === 0) {
this.allPinContainers[0].className = 'pinButtonContainerErrorSelected';
} else {
this.allPinContainers[0].className = 'pinButtonContainerError';
}
}
};
private UpdatePinSettingsDiv = () => { private UpdatePinSettingsDiv = () => {
// create info window div and append to pincontainer // create info window div and append to pincontainer
const newDiv = document.createElement('div'); const newDiv = document.createElement('div');
@ -146,15 +160,24 @@ export class PinHandler {
newDiv.appendChild(selectPinButton); newDiv.appendChild(selectPinButton);
selectPinButton.textContent = 'Select'; selectPinButton.textContent = 'Select';
selectPinButton.addEventListener('click', () => { selectPinButton.addEventListener('click', () => {
this.DeselectAllPinContainers(); this.SelectPin(newDiv);
newDiv.className = 'pinButtonContainerSelected';
this.projectData.currentlySelectedPin = parseInt(newDiv.id.split('_')[1]);
console.log('selected pin ' + this.projectData.currentlySelectedPin);
this.UpdateAnimationPinNames();
}); });
this.UpdateAnimationPinNames(); this.UpdateAnimationPinNames();
}; };
private SelectPin = (pinDiv: HTMLElement) => {
this.CheckOriginDataExists();
this.DeselectAllPinContainers();
this.projectData.currentlySelectedPin = parseInt(pinDiv.id.split('_')[1]);
if (pinDiv.className === 'pinButtonContainerError') {
pinDiv.className = 'pinButtonContainerErrorSelected';
} else {
pinDiv.className = 'pinButtonContainerSelected';
}
console.log('selected pin ' + this.projectData.currentlySelectedPin);
this.UpdateAnimationPinNames();
};
private RemovePinDataForID = (pinID: number) => { private RemovePinDataForID = (pinID: number) => {
// check for matching id in pin list and remove // check for matching id in pin list and remove
@ -185,7 +208,20 @@ export class PinHandler {
private DeselectAllPinContainers = () => { private DeselectAllPinContainers = () => {
for (let i = 0; i < this.allPinContainers.length; i++) { for (let i = 0; i < this.allPinContainers.length; i++) {
this.allPinContainers[i].className = 'pinButtonContainer'; const pinDiv = this.allPinContainers[i];
pinDiv.className = 'pinButtonContainer';
if (i > 0) {
// check frames for missing pin info
const pinNumber = this.GetPinNumberFromID(pinDiv.id);
for (let f = 0; this.animationData.frames.length; f++) {
if (this.animationData.frames[f] !== undefined) {
if (this.animationData.frames[f][pinNumber] === undefined) {
pinDiv.className = 'pinButtonContainerError';
break;
}
}
}
}
} }
}; };

119
app/stylesheets/main.scss Normal file
View File

@ -0,0 +1,119 @@
$bg-color: #859094;
$bg-dark-color: #7a8386;
$main-border-color: #6b7578;
$main-font-color: #101e24;
$selected-border-color: #09e7ca;
$selected-bg-color: #4d998f;
$warning-border-color: #aa093a;
$warning-bg-color: #6e545c;
$warning-selected-border-color: #ff044f;
$warning-selected-bg-color: #aa093a;
$warning-text-color: #ff1d61;
div {
display: block;
color: $main-font-color;
font-family: "Arial", Helvetica, sans-serif;
}
.numberinput {
width: 64px;
}
.instruction {
font-size: 12px;
margin: auto;
width: 50%;
border: 2px solid;
padding: 1px;
text-align: center;
}
#frameViewer {
display: flex;
flex-direction: row;
}
.frame {
flex: 1;
width: 32px;
height: 32px;
max-width: 32px;
color: $main-font-color;
padding: 1px;
display: inline-block;
border: 2px solid $main-border-color;
background-color: $bg-dark-color;
&.warning {
border: 2px solid $warning-border-color;
background-color: $warning-bg-color;
}
&.selected {
border: 2px solid $selected-border-color;
background-color: $selected-bg-color;
&.warning {
border: 2px solid $warning-selected-border-color;
background-color: $warning-selected-bg-color;
}
}
}
.errorMessage {
font-size: 12px;
width: 50%;
border: 2px solid $warning-border-color;
padding: 1px;
background-color: $warning-bg-color;
}
.warningMessage {
display: block;
color: $warning-text-color;
background-color: $warning-bg-color;
font-family: "Arial", Helvetica, sans-serif;
}
body {
background-color: $bg-color;
}
#dropZone {
width: 100%;
height: 100%;
}
#canvasImage {
border: 2px solid $main-border-color;
image-rendering: pixelated;
}
.pinContainer {
display: flex;
flex-direction: row;
}
.pinButtonContainer {
max-width: 10%;
flex: 1;
font-size: 12px;
border: 2px solid $main-border-color;
padding: 1px;
// .warning {
// border: 2px solid $warning-border-color;
// background-color: $warning-bg-color;
// }
// .selected {
// border: 2px solid $selected-border-color;
// background-color: $selected-bg-color;
// .warning {
// border: 2px solid $warning-selected-border-color;
// background-color: $warning-selected-bg-color;
// }
// }
}
.removeButton {
background-color: rgb(158, 15, 34);
color: rgb(227, 227, 236);
}

View File

@ -1,121 +0,0 @@
div {
display: block;
color: #101e24;
font-family: "Arial", Helvetica, sans-serif;
}
.numberinput {
width: 64px;
}
.instruction {
font-size: 12px;
margin: auto;
width: 50%;
border: 2px solid #6b7578;
padding: 1px;
text-align: center;
}
#frameViewer {
display: flex;
flex-direction: row;
}
.frame {
flex: 1;
width: 32px;
height: 32px;
max-width: 32px;
color: #101e24;
border: 2px solid #3f4446;
padding: 1px;
background-color: rgb(90, 92, 95);
display: inline-block;
}
.frameActive {
flex: 1;
width: 32px;
height: 32px;
max-width: 32px;
color: #101e24;
border: 2px solid #0865df;
padding: 1px;
background-color: rgb(35, 75, 185);
display: inline-block;
}
.frameWarning {
flex: 1;
width: 32px;
height: 32px;
max-width: 32px;
color: #101e24;
border: 2px solid rgb(233, 7, 75);
padding: 1px;
background-color: rgb(83, 14, 20);
display: inline-block;
}
.frameActiveWarning {
flex: 1;
width: 32px;
height: 32px;
max-width: 32px;
color: #101e24;
border: 2px solid rgb(233, 7, 75);
padding: 1px;
background-color: rgb(185, 8, 61);
display: inline-block;
}
.errorMessage {
font-size: 12px;
color: rgb(233, 7, 75);
width: 50%;
border: 2px solid rgb(233, 7, 75);
padding: 1px;
background-color: rgb(83, 14, 20);
}
.warning {
display: block;
color: #520012;
font-family: "Arial", Helvetica, sans-serif;
}
body {
background-color: #818485;
}
#dropZone {
width: 100%;
height: 100%;
}
#canvasImage {
border: 2px solid #6b7578;
image-rendering: pixelated;
}
.pinContainer {
display: flex;
flex-direction: row;
}
.pinButtonContainer {
max-width: 10%;
flex: 1;
font-size: 12px;
border: 2px solid #6b7578;
padding: 1px;
}
.pinButtonContainerSelected {
max-width: 10%;
flex: 1;
font-size: 12px;
border: 2px solid #0865df;
padding: 1px;
background-color: rgb(35, 75, 185);
}
.removeButton {
background-color: rgb(158, 15, 34);
color: rgb(227, 227, 236);
}

3
dist/index.html vendored
View File

@ -4,7 +4,6 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head> </head>
<body> <body>
<div id="dropZone"> <div id="dropZone">
@ -17,7 +16,7 @@
<div id="canvasStyle"> <div id="canvasStyle">
<canvas id="canvasImage" alt=""></canvas> <canvas id="canvasImage" alt=""></canvas>
</div> </div>
<div id="frameNumber" class="warning"></div> <div id="frameNumber" class="warningMessage"></div>
<div id="frameViewer"></div> <div id="frameViewer"></div>
<button id="addpin">Create New Pin</button> <button id="addpin">Create New Pin</button>
<div id="pinContainer" class="pinContainer"> <div id="pinContainer" class="pinContainer">

View File

@ -1,4 +1,5 @@
import { Page } from './app/page'; import { Page } from './app/page';
import './app/stylesheets/main.scss';
const page = new Page(); const page = new Page();
page.Load(); page.Load();

View File

@ -19,7 +19,13 @@
}, },
"homepage": "https://github.com/MoonsideGames/AnimationTool#readme", "homepage": "https://github.com/MoonsideGames/AnimationTool#readme",
"devDependencies": { "devDependencies": {
"css-loader": "^3.2.0",
"fibers": "^4.0.1",
"node-sass": "^4.12.0",
"prettier": "^1.18.2", "prettier": "^1.18.2",
"sass": "^1.23.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"ts-loader": "^6.1.2", "ts-loader": "^6.1.2",
"tslint": "^5.20.0", "tslint": "^5.20.0",
"tslint-config-prettier": "^1.18.0", "tslint-config-prettier": "^1.18.0",

File diff suppressed because it is too large Load Diff

View File

@ -1,31 +1,37 @@
const path = require("path"); const path = require('path');
module.exports = { module.exports = {
mode: "development", mode: 'development',
devtool: "inline-source-map", devtool: 'inline-source-map',
entry: "./index.ts", entry: {
output: { main: [ './index.ts' ]
filename: "bundle.js" },
}, output: {
resolve: { filename: 'bundle.js'
// Add `.ts` and `.tsx` as a resolvable extension. },
extensions: [".ts", ".tsx", ".js"] resolve: {
}, // Add `.ts` and `.tsx` as a resolvable extension.
module: { extensions: [ '.ts', '.tsx', '.js' ]
rules: [ },
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader` module: {
{ rules: [
test: /\.tsx?$/, // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
loader: "ts-loader", {
options: { test: /\.tsx?$/,
allowTsInNodeModules: true loader: 'ts-loader',
} options: {
} allowTsInNodeModules: true
] }
}, },
devServer: { {
contentBase: path.join(__dirname, '../dist'), test: /\.scss$/,
compress: false, use: [ 'style-loader', 'css-loader', 'sass-loader?sourceMap' ]
port: 8080 }
} ]
}; },
devServer: {
contentBase: path.join(__dirname, '../dist'),
compress: false,
port: 8080
}
};

View File

@ -1,25 +1,29 @@
const path = require("path"); const path = require('path');
module.exports = { module.exports = {
mode: "production", mode: 'production',
entry: "./index.ts", entry: './index.ts',
output: { output: {
filename: "bundle.js" filename: 'bundle.js'
}, },
resolve: { resolve: {
// Add `.ts` and `.tsx` as a resolvable extension. // Add `.ts` and `.tsx` as a resolvable extension.
extensions: [".ts", ".tsx", ".js"] extensions: [ '.ts', '.tsx', '.js' ]
}, },
module: { module: {
rules: [ rules: [
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader` // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
{ {
test: /\.tsx?$/, test: /\.tsx?$/,
loader: "ts-loader", loader: 'ts-loader',
options: { options: {
allowTsInNodeModules: true allowTsInNodeModules: true
} }
} },
] {
} test: /\.(s*)css$/,
}; use: [ 'style-loader', 'css-loader', 'sass-loader' ]
}
]
}
};