Skip to content

Commit

Permalink
feat(colorsbook): init
Browse files Browse the repository at this point in the history
  • Loading branch information
Toinane committed Aug 22, 2017
1 parent b278d78 commit a442267
Show file tree
Hide file tree
Showing 11 changed files with 391 additions and 225 deletions.
10 changes: 3 additions & 7 deletions src/browsers/colorsbook.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,29 @@ const {BrowserWindow} = require('electron')

module.exports = (dirname, storage) => {
let win

/**
* [init]
* @return {void} [new Colorsbook]
*/
let init = folder => {
dirname = folder
let init = () => {
if (win === null || win === undefined) createWindow()
else win.show()
}

/**
* [createWindow - create new Window]
* @param {int} width [width of the window]
* @param {int} height [height of the window]
* @return {void}
*/
let createWindow = () => {
win = new BrowserWindow({
frame: false,
'auto-hide-menu-bar': true,
width: 484,
height: 190,
height: 200,
icon: `${dirname}/build/logo.png`
})

win.loadURL(`file://${dirname}/views/hexacolor.html`)
win.loadURL(`file://${dirname}/views/colorsbook.html`)

win.on('closed', () => {
win = undefined
Expand Down
12 changes: 12 additions & 0 deletions src/events/colorsbook.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,17 @@
'use strict'

const {ipcMain, BrowserWindow, app} = require('electron')

module.exports = (storage, browsers) => {
const {colorpicker, settings, colorsbook} = browsers
let win

ipcMain.on('init-colorsbook', event => {
win = colorsbook.getWindow()
let config = {}
config.posButton = storage.get('buttonsPosition')
config.typeButton = storage.get('buttonsType')

event.sender.send('init', config)
})
}
2 changes: 1 addition & 1 deletion src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ let setMenu = () => {
label: 'View',
submenu: [
{ label: 'Show Colorpicker', accelerator: 'Shift+CmdOrCtrl+C', click: () => colorpicker.init() },
{ label: 'Show ColorsBook', accelerator: 'Shift+CmdOrCtrl+B', click: () => hexacolor.init() },
{ label: 'Show ColorsBook', accelerator: 'Shift+CmdOrCtrl+B', click: () => colorsbook.init() },
{ type: 'separator' },
{ label: 'Save Color', accelerator: 'CmdOrCtrl+S', click: () => colorpicker.getWindow().webContents.send('shortSave') },
{ type: 'separator' },
Expand Down
2 changes: 1 addition & 1 deletion src/views/colorpicker.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<title>Colorpicker</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/app-buttons.css" />
<link rel="stylesheet" href="css/colorpicker.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<script defer src="js/color.class.js"></script>
Expand All @@ -11,7 +12,6 @@
<script defer src="js/util.class.js"></script>
</head>
<body>
<div id="contextMenu"></div>
<div class="toolbar">
<ul id="app_buttons">
<li id="close"><i></i></li>
Expand Down
51 changes: 51 additions & 0 deletions src/views/colorsbook.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<title>Colorsbook</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/app-buttons.css" />
<link rel="stylesheet" href="css/colorsbook.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<script defer src="js/colorsbook.js"></script>
<script defer src="js/util.class.js"></script>
</head>
<body>
<div class="toolbar">
<ul id="app_buttons">
<li id="close"><i></i></li>
<li id="minimize"><i></i></li>
<li id="maximize"><i></i></li>
</ul>
<ul id="tools"></ul>
</div>
<section id="main">
<section id="categories">
<li title="pastel" class="active"></li>
<li title="vif"></li>
<li id="new-categorie"><i class="fa fa-plus"></i></li>
</section>
<section id="colors">
<li data-color="#392390"></li>
<li data-color="#395320"></li>
<li data-color="#399920"></li>
<li data-color="#992320"></li>
<li data-color="#992320"></li>
<li data-color="#992320"></li>
<li data-color="#992320"></li>
<li data-color="#992320"></li>
<li data-color="#992320"></li>
<li data-color="#992320"></li>
<li data-color="#992320"></li>
<li data-color="#992320"></li>
<li data-color="#992320"></li>
<li data-color="#992320"></li>
<li data-color="#992320"></li>
<li data-color="#992320"></li>
<li data-color="#992320"></li>
<li data-color="#992320"></li>
<li data-color="#992320"></li>
<li id="new-color"><i class="fa fa-plus"></i></li>
</section>
</section>
</body>
</html>
186 changes: 186 additions & 0 deletions src/views/css/app-buttons.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
@font-face{
font-family: 'Lato';
src: url('fonts/Lato-Regular.ttf');
}

html, body{
height: 100%;
}

body, p, h1, h2, input{
margin: 0;
font-family: 'Lato', sans-serif;
}

a{
color: inherit;
text-decoration: none;
}

/**
* TOOLBAR
*/
.toolbar{
margin: 3px;
padding: 5px 5px 7px 5px;
position: relative;
display: flex;
z-index: 10000;
box-sizing: border-box;
-webkit-app-region: drag;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
transition: border-bottom 0.4s;
}
.darkMode .toolbar{
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.toolbar.setRight{
flex-direction: row-reverse;
justify-content: space-between;
}
.toolbar ul{
margin: 0; padding: 0;
margin-right: 20px;
display: flex;
}

.toolbar.setRight ul{
margin-right: 0;
}
#app_buttons{
transition: opacity 0.4s;
}
.toolbar.setRight #app_buttons{
flex-direction: row-reverse;
}

.toolbar li{
-webkit-app-region: no-drag;
cursor: pointer;
transition: color 0.2s;
list-style: none;
margin: 0 5px 0 5px;
}
.toolbar #app_buttons.darwin li{
margin: 0 4px 0 4px;
}

.blured .darwin #minimize, .blured .darwin #maximize, .blured .darwin #close{
color: #DDDDDD;
}

/* Minimize Button */
/* Minimize position for Windows & Linux */
#app_buttons.windows #minimize, #app_buttons.linux #minimize{
order: 3;
}
#minimize{
color: rgba(0, 0, 0, 0.35);
}
.blured #minimize{
color: rgba(0, 0, 0, 0.2);
}
.darwin #minimize{
color: #FEBF3C;
}
.windows #minimize{
font-size: 0.9em;
position: relative;
top: 1px;
}
.linux #minimize{
font-size: 0.6em;
position: relative;
padding: 4px 1px;
}

#minimize:hover{
color: #FEB219;
}
.windows #minimize:hover, .linux #minimize:hover{
color: rgba(0, 0, 0, 0.5);
}

.darkMode .windows #minimize, .darkMode .linux #minimize{
color: rgba(255, 255, 255, 0.4);
}
.blured .darkMode .windows #minimize, .blured .darkMode .linux #minimize{
color: rgba(255, 255, 255, 0.2);
}
.darkMode .windows #minimize:hover, .darkMode .linux #minimize:hover{
color: rgba(255, 255, 255, 0.6);
}

/* Maximize button */
#maximize{
color: rgba(0, 0, 0, 0.35);
}
.blured #maximize{
color: rgba(0, 0, 0, 0.2);
}
.darwin #maximize{
color: #35CC48;
}
.windows #maximize{
font-size: 0.9em;
position: relative;
top: 2px;
}
.linux #maximize{
transform: rotate(45deg);
font-size: 0.7em;
padding: 3px;
}

#maximize:hover{
color: #32C544;
}
.windows #maximize:hover, .linux #maximize:hover{
color: rgba(0, 0, 0, 0.5);
}

.darkMode .windows #maximize, .darkMode .linux #maximize{
color: rgba(255, 255, 255, 0.4);
}
.blured .darkMode .windows #maximize, .blured .darkMode .linux #maximize{
color: rgba(255, 255, 255, 0.2);
}
.darkMode .windows #maximize:hover, .darkMode .linux #maximize:hover{
color: rgba(255, 255, 255, 0.6);
}

/* Close button */
#close{
color: rgba(0, 0, 0, 0.35);
}
.blured #close, .blured .linux #close{
color: rgba(0, 0, 0, 0.2);
}
.darwin #close{
color: #FC635C;
}
.linux #close{
font-size: 1.1em;
color: #CF555E;
}

#close:hover{
color: #FC4B43;
}
.linux #close:hover, .blured .linux #close:hover, .blured .darkMode .linux #close:hover{
color: #DA767D;
}
.windows #close:hover{
color: rgba(0, 0, 0, 0.5);
}

.darkMode .windows #close{
color: rgba(255, 255, 255, 0.4);
}
.blured .darkMode .windows #close, .blured .darkMode .linux #close{
color: rgba(255, 255, 255, 0.2);
}
.darkMode .windows #close:hover{
color: rgba(255, 255, 255, 0.6);
}
Loading

0 comments on commit a442267

Please sign in to comment.