From bcec0c665a117127ce87ed498da0749923e251ad Mon Sep 17 00:00:00 2001 From: Rokt33r Date: Fri, 12 Jun 2015 17:36:43 +0900 Subject: [PATCH] update electron window --- Gulpfile.js | 2 +- electron_src/popup/index.html | 25 ++- electron_src/popup/popup.js | 235 +++++++++---------------- electron_src/popup/popup.scss | 83 --------- electron_src/popup/services/snippet.js | 13 +- electron_src/styles/_popup.styl | 59 +++++++ electron_src/styles/main.styl | 13 ++ gulp-electron.js | 88 +++++---- main.js | 77 ++++---- 9 files changed, 268 insertions(+), 327 deletions(-) delete mode 100644 electron_src/popup/popup.scss create mode 100644 electron_src/styles/_popup.styl create mode 100644 electron_src/styles/main.styl diff --git a/Gulpfile.js b/Gulpfile.js index 8a084ee9..ff55200c 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -125,4 +125,4 @@ gulp.task('default', function (cb) { runSequence('del', 'build', 'watch', cb) }) -// require('./gulp-electron')(gulp) +require('./gulp-electron')(gulp) diff --git a/electron_src/popup/index.html b/electron_src/popup/index.html index ca91b3b5..2a9c9676 100644 --- a/electron_src/popup/index.html +++ b/electron_src/popup/index.html @@ -10,34 +10,33 @@ - + + - - - -
+
-
    -
  • {{snippet.description}}
    • +
    -
    - - - +
    + + +
    -
    0) ipc.send('writeCode', $scope.selectedItem.content) + else console.log('\x07') + e.stopPropagation() + }) + // Init Data $scope.snippets = [] - var userId = $auth.getPayload().sub - Snippet.findByUser(userId) + Snippet.findMine() .success(function (data) { - $scope.snippets = data.snippets + $scope.snippets = data filterList() }) - // Functions + // Result Item control + $scope.selectIndex = 0 + + $scope.selectSnippet = selectSnippet + $scope.filterList = filterList + $scope.focusSearchInput = focusSearchInput // Search Filter + function loadSnippets () { + Snippet.findMine() + .success(function (data) { + $scope.snippets = data + filterList() + }) + } + function filterList (needle) { $scope.filteredSnippets = $filter('filter')($scope.snippets, needle) - $scope.selectIndex = 0 - selectItem($scope.selectIndex) + firstSnippet() + } + + function selectSnippet (index) { + if (index !== undefined) $scope.selectIndex = index + $scope.selectedItem = $scope.filteredSnippets[$scope.selectIndex] + } + + function firstSnippet () { + $scope.selectIndex = 0 + selectSnippet($scope.selectIndex) + } + + function priorSnippet () { + if ($scope.selectIndex > 0) $scope.selectIndex -= 1 + selectSnippet() + } + + function nextSnippet () { + if ($scope.selectIndex < $scope.filteredSnippets.length - 1) { + $scope.selectIndex += 1 + } + selectSnippet() + } + + // Focusing Search Input + function focusSearchInput () { + document.getElementById('search-input').focus() } - $scope.filterList = filterList function hidePopUp () { ipc.send('hidePopUp') } - // Result Item control - $scope.selectIndex = 0 - - $scope.selectItem = selectItem - function selectItem (index) { - $scope.selectIndex = index - $scope.selectedItem = $scope.filteredSnippets[index] - - $scope.controlIndex = 0 - } - - function selectNextItem () { - if ($scope.selectIndex >= ($scope.filteredSnippets.length - 1)) { - return - } - selectItem(++$scope.selectIndex) - } - - function selectPriorItem () { - if ($scope.selectIndex === 0) { - focusSearchInput() - return - } - selectItem(--$scope.selectIndex) - } - - // Focusing control - $scope.isFocusing = 0 - - function focusSearchInput () { - $scope.isFocusing = SEARCH_INPUT - document.getElementById('search-input').focus() - - $scope.controlIndex = 0 - } - $scope.focusSearchInput = focusSearchInput - - function focusList () { - $scope.isFocusing = RESULT_LIST - document.getElementById('search-input').blur() - - $scope.controlIndex = 0 - } - $scope.focusList = focusList - - function focusControl () { - if ($scope.controlIndex === 0) { - $scope.controlIndex = 1 - } - $scope.isFocusing = RESULT_CONTROL - } - $scope.focusControl = focusControl - - function focusContent () { - angular.element(aceView).scope().focus() - $scope.isFocusing = RESULT_CONTENT - } - - $scope.controlIndex = 0 - - function nextControl () { - if ($scope.controlIndex === 3) { - $scope.controlIndex = 0 - focusContent() - return - } - $scope.controlIndex ++ - } - - function priorControl () { - if ($scope.controlIndex === 1) { - focusList() - return - } - $scope.controlIndex -- - } }) .directive('searchInput', function () { return { restrict: 'A', link: function (scope, el, attr) { el.on('keydown', function (e) { - // Down key => Focus on Result list if (e.keyCode === 40) { - scope.focusList() - e.preventDefault() + scope.$emit('nextSnippetRequested') + // e.preventDefault() + } + + // Up key => Focus on Result list + if (e.keyCode === 38) { + scope.$emit('priorSnippetRequested') + // e.preventDefault() + } + + // Up key => Focus on Result list + if (e.keyCode === 13) { + scope.$emit('snippetSubmitted') } // Esc key => Dismiss popup diff --git a/electron_src/popup/popup.scss b/electron_src/popup/popup.scss deleted file mode 100644 index eeb9b6a0..00000000 --- a/electron_src/popup/popup.scss +++ /dev/null @@ -1,83 +0,0 @@ -@import "../../src/variables"; -@import "../../src/mixins"; - -$selected-color: white; -$selected-bg: $brand-primary; - -$focused-shadow-color: $brand-primary; - - -.popup-body{ - .search-block{ - padding: 5px; - height:44px; - position:absolute; - top: 0; - width: 100%; - } - .result-block{ - position:absolute; - top: 44px; - bottom: 0; - width: 100%; - overflow: hidden; - .left-pane{ - margin: 0; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 40%; - overflow-y: auto; - overflow-x: hidden; - - } - .result-list{ - list-style:none; - padding: 0; - &.focused{ - border: solid 1px $brand-primary; - } - li{ - a{ - display:block; - padding: 5px 10px; - border-bottom: 1px solid $border-color; - - &.selected{ - color: $selected-color; - background-color: $selected-bg; - } - - &:hover{ - } - } - } - border-right: 1px solid $border-color; - } - .right-pane{ - position: absolute; - left: 40%; - top: 0; - bottom: 0; - width: 60%; - overflow-y: auto; - overflow-x: hidden; - - } - - .result-detail-control{ - position: absolute; - top: 0; - width: 100%; - height: 34px; - } - .result-detail-content{ - position: absolute; - top: 34px; - bottom: 0; - width: 100%; - } - } - -} diff --git a/electron_src/popup/services/snippet.js b/electron_src/popup/services/snippet.js index 84bafbf7..725d313a 100644 --- a/electron_src/popup/services/snippet.js +++ b/electron_src/popup/services/snippet.js @@ -10,7 +10,7 @@ angular.module('codexen.popup') angular.module('codexen.popup') - .factory('Snippet', function ($http, apiUrl) { + .factory('Snippet', function ($http, $auth, apiUrl) { var findByUser = function (user) { var url = apiUrl + 'snippets/search' @@ -21,16 +21,22 @@ angular.module('codexen.popup') }) } + var findMine = function (params) { + var url = apiUrl + 'snippets/my' + + return $http.get(url, {params: params}) + } + var create = function (params) { var url = apiUrl + 'snippets/create' return $http.post(url, params) } - var show = function (id) { + var show = function (id, params) { var url = apiUrl + 'snippets/id/' + id - return $http.get(url) + return $http.get(url, {params: params}) } var update = function (id, params) { @@ -47,6 +53,7 @@ angular.module('codexen.popup') return { findByUser: findByUser, + findMine: findMine, create: create, show: show, delete: destroy, diff --git a/electron_src/styles/_popup.styl b/electron_src/styles/_popup.styl new file mode 100644 index 00000000..2239e236 --- /dev/null +++ b/electron_src/styles/_popup.styl @@ -0,0 +1,59 @@ +.popup-body + .search-block + padding: 5px + height:44px + position:absolute + top: 0 + width: 100% + + .result-block + position:absolute + top: 44px + bottom: 0 + width: 100% + overflow: hidden + .left-pane + margin: 0 + position: absolute + left: 0 + top: 0 + bottom: 0 + width: 40% + overflow-y: auto + overflow-x: hidden + .result-list + list-style:none + padding: 0 + border-right: 1px solid $border-color + li + &:nth-child(even) + background-color $baseBackgroundColor + &:nth-child(odd) + background-color lighten($baseBackgroundColor, 2%) + &.active + color: $textColorSelected + background-color: $btnPrimary + a + display:block + padding: 5px 10px + border-bottom 1px solid $baseBorderColor + + .right-pane + position: absolute + left: 40% + top: 0 + bottom: 0 + width: 60% + overflow-y: auto + overflow-x: hidden + .result-detail-control + position: absolute + top: 0 + width: 100% + height: 34px + + .result-detail-content + position: absolute + top: 34px + bottom: 0 + width: 100% diff --git a/electron_src/styles/main.styl b/electron_src/styles/main.styl new file mode 100644 index 00000000..bf62d376 --- /dev/null +++ b/electron_src/styles/main.styl @@ -0,0 +1,13 @@ +@import '../../src/styles/_vars' +@import '../../src/styles/mixins/*' + +@import '../../src/styles/_bootstrap' + +@import '../../src/styles/_index' +@import '../../src/styles/_shared' + +@import '../../src/styles/modals/*' +@import '../../src/styles/directives/*' +@import '../../src/styles/states/*' + +@import '_popup' diff --git a/gulp-electron.js b/gulp-electron.js index 7f1cd38d..089fa9d3 100644 --- a/gulp-electron.js +++ b/gulp-electron.js @@ -1,61 +1,63 @@ -var sass = require('gulp-sass') +require('dotenv').load() +var env = process.env + +var styl = require('gulp-stylus') var autoprefixer = require('gulp-autoprefixer') var templateCache = require('gulp-angular-templatecache') var globby = require('globby') var template = require('gulp-template') -var concat = require('gulp-concat') var del = require('del') var runSequence = require('run-sequence') -var merge = require('merge-stream') - +var plumber = require('gulp-plumber') +var notify = require('gulp-notify') var changed = require('gulp-changed') -var cached = require('gulp-cached') -var remember = require('gulp-remember') var livereload = require('gulp-livereload') -var childProcess = require('child_process') +var merge = require('merge-stream') var config = require('./build.config.js') -// for Dist -var rev = require('gulp-rev') -var ngAnnotate = require('gulp-ng-annotate') -var uglify = require('gulp-uglify') -var minifyCss = require('gulp-minify-css') - module.exports = function (gulp) { + gulp.task('elec-env', function () { + return gulp.src('tpls/env.js') + .pipe(template({ + apiUrl: env.BUILD_API_URL + })) + .pipe(gulp.dest('electron_build/config')) + }) - /* - * Electron build - */ - gulp.task('elec-js', function(){ - var src = gulp.src(['src/**/*.js']) + gulp.task('elec-js', function () { + var main = gulp.src('src/**/*.js') .pipe(changed('electron_build')) .pipe(gulp.dest('electron_build')) - var elecSrc = gulp.src(['electron_src/**/*.js']) - .pipe(changed('electron_build/electron')) - .pipe(gulp.dest('electron_build/electron')) - var elecHtml = gulp.src(['electron_src/**/*.html']) + + var electron = gulp.src('electron_src/**/*.js') .pipe(changed('electron_build/electron')) .pipe(gulp.dest('electron_build/electron')) - return merge(src, elecSrc, elecHtml) + return merge(main, electron) }) - gulp.task('elec-sass', function () { - return gulp.src(['src/**/*.scss', 'electron_src/**/*.scss']) - .pipe(cached('styles')) - .pipe(sass().on('error', sass.logError)) + gulp.task('elec-styl', function () { + return gulp.src('electron_src/styles/main.styl') + .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) + .pipe(styl()) .pipe(autoprefixer()) - .pipe(remember('styles')) - .pipe(concat('all.css')) .pipe(gulp.dest('electron_build')) + .pipe(notify('Stylus!!')) + .pipe(livereload()) }) - gulp.task('elec-tpls', function(){ - return gulp.src('src/**/*.tpl.html') + gulp.task('elec-tpls', function () { + var main = gulp.src('src/**/*.tpl.html') .pipe(templateCache()) .pipe(gulp.dest('electron_build')) + + var electron = gulp.src('electron_src/**/*.tpl.html') + .pipe(templateCache()) + .pipe(gulp.dest('electron_build/electron')) + + return merge(main, electron) }) gulp.task('elec-index', function () { @@ -72,13 +74,19 @@ module.exports = function (gulp) { var scripts = filter(files, 'js') var styles = filter(files, 'css') - return gulp.src('src/index.html') + var main = gulp.src('src/index.html') .pipe(template({ scripts: scripts, styles: styles, - env: 'build' + env: env })) .pipe(gulp.dest('electron_build')) + .pipe(livereload()) + + var electron = gulp.src('electron_src/**/index.html') + .pipe(gulp.dest('electron_build/electron')) + + return merge(main, electron) }) gulp.task('elec-vendor', function () { @@ -88,6 +96,10 @@ module.exports = function (gulp) { return vendor.src }) + vendorFiles.push('node_modules/font-awesome/**/font-awesome.css') + vendorFiles.push('node_modules/font-awesome/**/fontawesome-webfont.*') + vendorFiles.push('node_modules/font-awesome/**/FontAwesome.*') + return gulp.src(vendorFiles) .pipe(gulp.dest('electron_build/vendor')) }) @@ -99,17 +111,19 @@ module.exports = function (gulp) { }) gulp.task('elec-build', function (cb) { - runSequence(['elec-js', 'elec-sass', 'elec-tpls', 'elec-vendor', 'elec-resources'], 'elec-index', cb) + runSequence(['elec-env', 'elec-js', 'elec-styl', 'elec-tpls', 'elec-vendor', 'elec-resources'], 'elec-index', cb) }) gulp.task('elec-watch', function (cb) { - gulp.watch(['src/**/*.js', 'electron_src/**/*.js', 'electron_src/**/*.html'], ['elec-js']) + gulp.watch(['.env', 'tpls/env.js'], ['elec-env']) - gulp.watch(['src/**/*.scss', 'electron_src/**/*.scss'], ['elec-sass']) + gulp.watch(['src/**/*.js', 'electron_src/**/*.js'], ['elec-js']) + + gulp.watch(['src/styles/**/*.styl', 'electron_src/styles/**/*.styl'], ['elec-styl']) gulp.watch('src/**/*.tpl.html', ['elec-tpls']) - gulp.watch(['electron_build/**/*', '!electron_build/vendor/**/*', '!electron_build/electron/**/*'], ['elec-index']) + gulp.watch(['electron_build/**/*.js', 'src/index.html', 'src/index.html', 'electron_src/**/index.html'], ['elec-index']) livereload.listen() }) diff --git a/main.js b/main.js index cb095ae2..b6dbb62d 100644 --- a/main.js +++ b/main.js @@ -12,8 +12,6 @@ app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) -var robot = require('robotjs') - var clipboard = require('clipboard') var Tray = require('tray') @@ -22,6 +20,12 @@ var appIcon = null app.on('ready', function () { appIcon = new Tray('./icon.png') appIcon.setToolTip('This is my application.') + appIcon.on('clicked', function () { + if (mainWindow == null) { + makeNewMainWindow() + } + mainWindow.show() + }) mainWindow = new BrowserWindow({ width: 800, @@ -33,12 +37,9 @@ app.on('ready', function () { mainWindow.loadUrl('file://' + __dirname + '/electron_build/index.html') + makeNewMainWindow() // mainWindow.openDevTools() - mainWindow.on('closed', function () { - console.log('main closed') - mainWindow = null - }) var globalShortcut = require('global-shortcut') @@ -56,14 +57,7 @@ app.on('ready', function () { app.on('activate-with-no-open-windows', function () { if (mainWindow == null) { - console.log('new WIndow!') - mainWindow = new BrowserWindow({width: 800, height: 600}) - - mainWindow.loadUrl('file://' + __dirname + '/electron_build/index.html') - - mainWindow.on('closed', function () { - mainWindow = null - }) + makeNewMainWindow() } mainWindow.show() }) @@ -73,11 +67,11 @@ app.on('ready', function () { }) var hidePopUp = function () { - if(fromMain){ + if (fromMain) { } else { - mainWindow.hide() - Menu.sendActionToFirstResponder('hide:'); + mainWindow ? mainWindow.hide() : null + Menu.sendActionToFirstResponder('hide:') } popUpWindow.hide() @@ -89,27 +83,22 @@ app.on('ready', function () { }) ipc.on('writeCode', function (e, code) { clipboard.writeText(code) - // setTimeout(function () { - // robot.typeString(code) - // }, 200) hidePopUp() }) var fromMain // Register a 'ctrl+x' shortcut listener. var ret = globalShortcut.register('ctrl+tab+shift', function () { - if (popUpWindow.isVisible()) { hidePopUp() return } - fromMain = mainWindow.isFocused() + fromMain = mainWindow ? mainWindow.isFocused() : false popUpWindow.show() }) if (!ret) console.log('registerion fails') - // MENU var Menu = require('menu') var template = [ @@ -150,8 +139,8 @@ app.on('ready', function () { { label: 'Quit', accelerator: 'Command+Q', - click: function() { app.quit(); } - }, + click: function () { app.quit() } + } ] }, { @@ -189,7 +178,7 @@ app.on('ready', function () { label: 'Select All', accelerator: 'Command+A', selector: 'selectAll:' - }, + } ] }, { @@ -198,13 +187,13 @@ app.on('ready', function () { { label: 'Reload', accelerator: 'Command+R', - click: function() { BrowserWindow.getFocusedWindow().reloadIgnoringCache(); } + click: function () { BrowserWindow.getFocusedWindow().reloadIgnoringCache() } }, { label: 'Toggle DevTools', accelerator: 'Alt+Command+I', - click: function() { BrowserWindow.getFocusedWindow().toggleDevTools(); } - }, + click: function () { BrowserWindow.getFocusedWindow().toggleDevTools() } + } ] }, { @@ -226,16 +215,36 @@ app.on('ready', function () { { label: 'Bring All to Front', selector: 'arrangeInFront:' - }, + } ] }, { label: 'Help', submenu: [] - }, - ]; + } + ] - menu = Menu.buildFromTemplate(template); + var menu = Menu.buildFromTemplate(template) - Menu.setApplicationMenu(menu); + Menu.setApplicationMenu(menu) + + function makeNewMainWindow () { + console.log('new Window!') + mainWindow = new BrowserWindow({ + width: 800, + height: 600, + 'web-preferences': { + 'overlay-scrollbars': true + } + }) + + mainWindow.loadUrl('file://' + __dirname + '/electron_build/index.html') + + mainWindow.on('closed', function () { + console.log('main closed') + mainWindow = null + app.dock.hide() + }) + app.dock.show() + } })