From cb868c49ca8370dc38d1c545eb428ce4bf69cdd4 Mon Sep 17 00:00:00 2001 From: Toinane Date: Wed, 8 Mar 2017 22:57:32 +0100 Subject: [PATCH] fix osx buttons and cmd+c/cmd+v inputs --- css/index_osx.css | 331 ++++++++++++++++++++++++++++++++++++++++++++++ index_osx.html | 78 +++++++++++ js/colorpicker.js | 4 +- main.js | 36 ++++- package.json | 2 +- 5 files changed, 444 insertions(+), 7 deletions(-) create mode 100644 css/index_osx.css create mode 100644 index_osx.html diff --git a/css/index_osx.css b/css/index_osx.css new file mode 100644 index 00000000..07cbcbb4 --- /dev/null +++ b/css/index_osx.css @@ -0,0 +1,331 @@ +body, p, h1, h2{ + margin: 0; + font-family: sans-serif; +} +body{ + overflow: hidden; +} +a{color: inherit;text-decoration: none;} + + +/** + * TOOLBAR + */ +.toolbar{ + margin: 3px; + padding: 10px; + position: relative; + z-index: 10000; + box-sizing: border-box; + -webkit-app-region: drag; +} + .toolbar p{ + color: rgba(0, 0, 0, 0.3); + font-weight: bold; + cursor: default; + display: inline-block; + margin-right: 20px; + -webkit-app-region: no-drag; + cursor: pointer; + transition: 0.3s; + } + .toolbar p:hover{ + color: rgba(0, 0, 0, 0.4); + } + .toolbar .active{ + color: rgba(0, 0, 0, 0.5); + } + .whited p{ + color: rgba(255, 255, 255, 0.3); + } + .whited p:hover{ + color: rgba(255, 255, 255, 0.4); + } + .whited .active{ + color: rgba(255, 255, 255, 0.5); + } + .toolbar p::selection, .toolbar li::selection, .toolbar div::selection{ + background: rgba(0, 0, 0, 0); + } + .toolbar ul{ + -webkit-app-region: no-drag; + display: inline-block; + position: relative; + bottom: 3px; right: 3px; + margin: 0; + margin-right: 10px;; + padding: 0; + } + .toolbar li{ + display: inline-block; + vertical-align: middle; + cursor: pointer; + } + .toolbar li div{ + cursor: pointer; + transition: 0.2s; + width: 13px; height: 13px; + margin-left: 4px; + border-radius: 15px; + } + .toolbar .minimize{ + background: #FEBF3C; + } + .toolbar li:hover .minimize{ + background: #FEB219; + } + .toolbar .square{ + background: #35CC48; + } + .toolbar li:hover .square{ + background: #32C544; + } + .toolbar .close{ + background: #FC635C; + } + .toolbar li:hover .close{ + background: #FC4B43; + } + + + + +/** + * HEADER CSS + */ +header{ + position: relative; + z-index: 900; + width: 100%; +} +header .nu, header .ni{ + display: flex; +} +header .nu aside{ + background: rgb(40, 40, 40); + flex: 1 100%; + height: 65px; + cursor: pointer; +} +header .ni aside{ + background: rgb(70, 70, 70); + flex: 1 100%; + height: 50px; + cursor: pointer; +} + +/** + * HEADER BOX CSS + */ +.nuance, .alea, .mode{ + display: inline-block; + width: 80px; + padding: 5px 0; + background: rgba(0, 0, 0, 0.2); + cursor: pointer; + text-align: center; + color: white; + font-weight: 300; +} +.alea{ left: 200px;} +.mode{ left: 110px;} + + +/** + * BOX COLORPICKER CSS + */ +.edit-box{ + background: rgba(0, 0, 0, 0); + position: absolute; + z-index: 200; + bottom: 0; left: 0; + padding-top: 15px; + padding-bottom: 3px; + padding-left: 10px; + width: 100%; + text-align: center; + display: flex; + align-items: flex-end; +} + +.sliders{ + +} + +.redBar, .greenBar, .blueBar{ + position: relative; + width: 220px; + height: 20px; + padding: 6px 0; +} + +/* STYLING SLIDER */ +input[type=range]{ + margin: 0; + padding: 3px 0; + -webkit-appearance: none; + outline: none; + background: none; + width: 100%; + box-sizing: border-box; +} +input[type=range]::-webkit-slider-thumb { + position: relative; + z-index: 100; + -webkit-appearance: none; + border: none; + height: 22px; + width: 22px; + border-radius: 50%; + background: white; + margin-top: -10px; + cursor: pointer; +} + +progress[value]::-webkit-progress-bar { + position: absolute; + width: 99%; + top: 5px; left: 1px; + background-color: white; + border-radius: 6px; + height: 10px; +} +.redBar progress[value]::-webkit-progress-value { + background: rgb(255, 87, 57); + border-radius: 6px; + height: 10px; +} +.greenBar progress[value]::-webkit-progress-value { + background: rgb(105, 195, 59); + border-radius: 6px; + height: 10px; +} +.blueBar progress[value]::-webkit-progress-value { + background: rgb(65, 165, 225); + border-radius: 6px; + height: 10px; +} +progress{ + -webkit-appearance: none; + appearance: none; +} + +/* INPUTS STYLE */ +.inputs{ + +} + .inputs input{ + display: block; + margin-bottom: 8px; + margin-left: 10px; + } + + .inputs input[type=number]::-webkit-inner-spin-button, + .inputs input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + margin: 0; + } + + .inputs input[type="number"], input[type="text"]{ + width: 30px; + text-align: center; + background: rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.5); + border: none; + padding: 2px; + font-family: "Source Sans Pro", sans-serif; + font-size: 1.1em; + font-weight: bold; + outline: none; + transition: 0.3s; + } + .whited .inputs input[type="number"], .whited input[type="text"], .whited .value p{ + background: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.5); + } + + .value{ + margin-bottom: 8px; + margin-left: 10px; + } + .value input{ + display: block; + margin-bottom: 8px; + width: 105px; + } + .value p{ + background: rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.5); + font-weight: bold; + padding: 4px 2px; + width: 105px; + transition: 0.3s; + } + +#newBox{ + position: absolute; + bottom: 15px; right: 30px; + border: 3px solid rgba(0, 0, 0, 0.15); + width: 12px; height: 12px; + cursor: pointer; + z-index: 999; + transition: 0.3s; +} +#newBox:hover{ + border: 3px solid rgba(0, 0, 0, 0.25); +} +.whited #newBox{ + border: 3px solid rgba(255, 255, 255, 0.15); +} +.whited #newBox:hover{ + border: 3px solid rgba(255, 255, 255, 0.25); +} +#newBox.active{ + border: 3px solid rgba(0, 0, 0, 0.3); +} +.whited #newBox.active{ + border: 3px solid rgba(255, 255, 255, 0.3); +} + +.box{ + position: absolute; + top: 0; right: -200px; + height: 100%; + width: 200px; + transition: right 0.5s; +} + +#numberBoxHex{ + cursor: default; + visibility: hidden; + opacity: 0; + transition: 0.4s; +} + + + +/** + * RESPONSIVE CSS + */ +@media screen and (max-width: 500px){ + +} + +@media screen and (max-height: 200px){ + .edit-box{ + background: none; + } +} +/** + * VIEWPORT CSS + */ +@viewport{ + zoom: 1.0; + width: extend-to-zoom; +} +@-ms-viewport{ + zoom: 1.0; + width: extend-to-zoom; +} diff --git a/index_osx.html b/index_osx.html new file mode 100644 index 00000000..691ce578 --- /dev/null +++ b/index_osx.html @@ -0,0 +1,78 @@ + + + + ColorPicker + + + + + +
+ +

CP

+

Nuances

+

Random

+
+
+
+ + + + + + + + + + + +
+
+ + + + + + + + + + + +
+
+
+ + + +
+
+
+ + + diff --git a/js/colorpicker.js b/js/colorpicker.js index db470333..6cf700dc 100644 --- a/js/colorpicker.js +++ b/js/colorpicker.js @@ -372,9 +372,9 @@ console.log("#" + hex + " at x:" + mouse.x + " y:" + mouse.y); remote.getCurrentWindow().setAlwaysOnTop(false); } } - document.querySelector('#picker').onclick = () => { + /*document.querySelector('#picker').onclick = () => { this.picker(); - } + }*/ document.querySelector('#nuances').onclick = () => { document.querySelector('#nuances').classList.toggle('active'); this.toggleFlexbox('header .nu'); diff --git a/main.js b/main.js index 162019cd..4f2b205d 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,7 @@ 'use strict'; -const electron = require('electron'); -const app = electron.app; -const BrowserWindow = electron.BrowserWindow; +const {app, Menu} = require('electron') +const BrowserWindow = require('electron').BrowserWindow; const path = require('path'); let win, tray; @@ -42,8 +41,37 @@ function createWindow(){ //win.setSkipTaskbar(true); + if(process.platform === 'darwin'){ + + var template = [{ + label: "Application", + submenu: [ + { label: "About Application", selector: "orderFrontStandardAboutPanel:" }, + { type: "separator" }, + { label: "Quit", accelerator: "Command+Q", click: function() { app.quit(); }} + ]}, { + label: "Edit", + submenu: [ + { label: "Undo", accelerator: "CmdOrCtrl+Z", selector: "undo:" }, + { label: "Redo", accelerator: "Shift+CmdOrCtrl+Z", selector: "redo:" }, + { type: "separator" }, + { label: "Cut", accelerator: "CmdOrCtrl+X", selector: "cut:" }, + { label: "Copy", accelerator: "CmdOrCtrl+C", selector: "copy:" }, + { label: "Paste", accelerator: "CmdOrCtrl+V", selector: "paste:" }, + { label: "Select All", accelerator: "CmdOrCtrl+A", selector: "selectAll:" } + ]} + ]; + + Menu.setApplicationMenu(Menu.buildFromTemplate(template)); + + + win.loadURL('file://' + __dirname + '/index_osx.html'); + } + else{ + console.log('toher'); + win.loadURL('file://' + __dirname + '/index.html'); + } - win.loadURL('file://' + __dirname + '/index.html'); // FOR DEV //win.webContents.openDevTools(); diff --git a/package.json b/package.json index a6279929..facea9fc 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "colorpicker", "productName": "colorpicker", - "version": "1.2.1", + "version": "1.2.2", "description": "Small app to get color code", "main": "main.js", "scripts": {