implemented bootstrap for easier formatting.
implemented view factory for easier automation of file cards.build-validation
parent
b4a96c3f18
commit
064dae73a7
@ -1,32 +0,0 @@
|
||||
.normal-header{
|
||||
font-size: 19pt;
|
||||
text-align: center;
|
||||
}
|
||||
body{
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.thumbnail{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.file-table{
|
||||
border: 1px solid black;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.red-list{
|
||||
background: red;
|
||||
}
|
||||
|
||||
.file-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
.file-row:hover{
|
||||
background: #c0c0c0;
|
||||
}
|
||||
.file-row-cell{
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
@ -1,48 +1,10 @@
|
||||
const shell = require('electron').shell;
|
||||
const path = require('path');
|
||||
const template = require(path.join(appDir, 'templates'))
|
||||
const fileutils = require(path.join(appDir, 'fileutils'))
|
||||
const factory = require(path.join(appDir, 'viewFactory'))
|
||||
|
||||
let config = new fileutils.Configurator();
|
||||
let fu = new fileutils.FileUtils();
|
||||
|
||||
function launchDocument(filename) {
|
||||
let fullPath = fu.getPathToDocument(filename);
|
||||
console.log(fullPath);
|
||||
shell.openItem(fullPath);
|
||||
}
|
||||
|
||||
function launchWebsite(url) {
|
||||
shell.openItem(url);
|
||||
function loadDocuments() {
|
||||
let container = document.querySelector("#container");
|
||||
let fileName = "voicemail-and-vacation-responder.pdf";
|
||||
factory.buildFileCard(fileName, container, true)
|
||||
}
|
||||
|
||||
function loadDocuments(){
|
||||
let objs = [{
|
||||
imagepath: fu.getPathToImage("pdf-icon.svg"),
|
||||
filename: "voicemail-and-vacation-responder.pdf",
|
||||
filnamesolid: "voicemail-and-vacation-responder",
|
||||
buttonCallback: `launchDocument(\"voicemail-and-vacation-responder.pdf\");`
|
||||
}]
|
||||
|
||||
template.loadTemplate("file-card", objs, (rendered) => {
|
||||
for (let i = 0, l = rendered.length; i < l; i++) {
|
||||
let snippet = rendered[i]
|
||||
console.log(snippet)
|
||||
document.querySelector("#container").innerHTML += snippet;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
document.querySelector('#btnLaunch').addEventListener('click', () => {
|
||||
|
||||
});
|
||||
|
||||
document.querySelector('#btnVideo').addEventListener('click', () => {
|
||||
template.loadTemplate("launch video")
|
||||
});
|
||||
|
||||
document.querySelector('#btnWeb').addEventListener('click', () => {
|
||||
launchWebsite("https://gmail.com")
|
||||
});
|
||||
|
||||
loadDocuments();
|
||||
@ -0,0 +1,28 @@
|
||||
body {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.file-card{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-card:hover {
|
||||
background: #c0c0c0;
|
||||
}
|
||||
|
||||
.debug-red {
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.debug-green {
|
||||
border: 1px solid green;
|
||||
}
|
||||
.debug-blue {
|
||||
border: 1px solid blue;
|
||||
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<table class="file-table">
|
||||
<tr class="file-row" onclick='{{{buttonCallback}}}'>
|
||||
<td class="file-row-cell"><img class="thumbnail" src="{{{imagepath}}}" alt="File icon"></td>
|
||||
<td class="file-row-cell">{{filename}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</html>
|
||||
@ -0,0 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<div id="{{{id}}}" class="media d-inline-flex file-card mx-2">
|
||||
<img class="align-self-center mr-3 py-2 thumbnail" src="{{{imagePath}}}" alt="File icon">
|
||||
<div class="media-body align-self-center">
|
||||
<p class="pr-3 mb-0">{{fileName}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,4 @@
|
||||
// @ts-ignore
|
||||
global.appDir = __dirname.replace("_src", "")
|
||||
// @ts-ignore
|
||||
window.appDir = __dirname.replace("_src", "")
|
||||
console.log(__dirname.replace("_src", ""))
|
||||
window.appDir = __dirname.replace("_src", "")
|
||||
@ -0,0 +1,55 @@
|
||||
import {Configurator, FileUtils} from './fileutils'
|
||||
import {loadTemplateSingle} from "./templates"
|
||||
const shell = require('electron').shell;
|
||||
|
||||
const config = new Configurator();
|
||||
const fu = new FileUtils();
|
||||
|
||||
class CardModel {
|
||||
imagePath: string;
|
||||
fileName: string;
|
||||
|
||||
constructor(path: string, name: string) {
|
||||
this.imagePath = path;
|
||||
this.fileName = name;
|
||||
}
|
||||
}
|
||||
|
||||
export function buildFileCard(filePath: string, elem: Element, append: boolean = false) {
|
||||
let model = new CardModel(getImagePathFromDocumentName(filePath), fileNameToPrettyString(filePath));
|
||||
loadTemplateSingle("file-card", model, (content: string, id: string) => {
|
||||
if (append) {
|
||||
elem.innerHTML = elem.innerHTML + content;
|
||||
} else {
|
||||
elem.innerHTML = content;
|
||||
}
|
||||
document.querySelector("#" + id).addEventListener('click', ()=>{
|
||||
launchDocument(filePath);
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function fileNameToPrettyString(fileName: string): string {
|
||||
let name = fileName.substr(0, fileName.lastIndexOf('.'));
|
||||
name = name.replace(/[.\-_]/ig, " ")
|
||||
let buffer = name.split('');
|
||||
for (let i = 0, l = buffer.length; i < l; i++) {
|
||||
if (0 === i || ' ' === buffer[i - 1]) {
|
||||
buffer[i] = buffer[i].toUpperCase()
|
||||
}
|
||||
}
|
||||
return buffer.join('');
|
||||
}
|
||||
|
||||
function getImagePathFromDocumentName(name: string): string {
|
||||
return fu.getPathToImage(config.getFileExtensionToImageMap()[fu.getFileExtension(name)])
|
||||
}
|
||||
|
||||
function launchDocument(filename) {
|
||||
let fullPath = fu.getPathToDocument(filename);
|
||||
shell.openItem(fullPath);
|
||||
}
|
||||
|
||||
function launchWebsite(url) {
|
||||
shell.openItem(url);
|
||||
}
|
||||
Loading…
Reference in New Issue