Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

make undo and redo buttons work #109

Merged
merged 10 commits into from
Apr 16, 2016
Merged

make undo and redo buttons work #109

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7ba21fe
make undo and redo buttons work
thatkookooguy Apr 13, 2016
7f2d696
hound fixes
thatkookooguy Apr 13, 2016
99ed154
make icon grey as well
thatkookooguy Apr 13, 2016
6df2dee
Add a logo until the app initiats
thatkookooguy Apr 15, 2016
678535f
remove unwanted code
thatkookooguy Apr 15, 2016
95f6c0f
fix lint problems
thatkookooguy Apr 15, 2016
e313993
grrrr!
thatkookooguy Apr 15, 2016
b3ec2a4
last one!
thatkookooguy Apr 15, 2016
d4f7564
CR
thatkookooguy Apr 15, 2016
5393141
change font css prefix to kibibit
thatkookooguy Apr 16, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@
"angular-emoji": "angular-emoji-filter#~0.0.2",
"angular-sanitize": "~1.5.0",
"json-formatter": "~0.5.0",
"velocity": "~1.2.3"
"velocity": "~1.2.3",
"ngclipboard": "~1.1.1",
"ng-device-detector": "~3.0.1"
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left this here even though I didn't use it, since we'll need this for MixPanel

},
"resolutions": {
"angular": "1.5.3"
Expand Down
4 changes: 3 additions & 1 deletion public/app/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ angular.module('kibibitCodeEditor',
'ngSanitize',
'hc.marked',
'emoji',
'jsonFormatter'])
'jsonFormatter',
'ngclipboard',
'ng.deviceDetector'])
.config(['$compileProvider', function($compileProvider) {
$compileProvider.debugInfoEnabled(false);
}])
Expand Down
5 changes: 5 additions & 0 deletions public/app/components/codeEditor/codeEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,11 @@ angular.module('kibibitCodeEditor')
// initialize the editor session
vm.aceLoaded = function(_editor) {
vm.aceSession = _editor.getSession();
vm.undoManager = _editor.getSession().getUndoManager();
SettingsService.setSettings({
currentUndoManager: vm.undoManager,
currentEditor: _editor
});
// save cursor position
_editor.on('changeSelection', function() {
$timeout(function() {
Expand Down
61 changes: 47 additions & 14 deletions public/app/components/menuBar/menuBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,18 +26,51 @@ angular.module('kibibitCodeEditor')
};
})

.controller('menuBarController', function(ngDialog) {
var vm = this;
vm.settings = {
printLayout: true,
showRuler: true,
showSpellingSuggestions: true,
presentationMode: 'edit'
};
vm.sampleAction = function(name, ev) {
ngDialog.open({
template: '<p>You triggered the "' + name + '" action</p>',
plain: true
});
};
.controller('menuBarController', function(
SettingsService,
ngDialog,
deviceDetector) {

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Illegal trailing whitespace

var vm = this;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected indentation of 2 characters

vm.settings = {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected indentation of 2 characters

printLayout: true,
showRuler: true,
showSpellingSuggestions: true,
presentationMode: 'edit'
};
vm.sampleAction = function(name, ev) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected indentation of 2 characters

ngDialog.open({
template: '<p>You triggered the "' + name + '" action</p>',
plain: true
});
};

vm.settings = SettingsService.getSettings();
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected indentation of 2 characters


vm.hasUndo = function() {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected indentation of 2 characters

if (vm.settings.currentUndoManager &&
vm.settings.currentUndoManager.hasUndo) {
vm.enableUndo = vm.settings.currentUndoManager.hasUndo();
return vm.enableUndo;
} else {
return false;
}
};

vm.hasRedo = function() {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected indentation of 2 characters

if (vm.settings.currentUndoManager &&
vm.settings.currentUndoManager.hasRedo) {
vm.enableRedo = vm.settings.currentUndoManager.hasRedo();
return vm.enableRedo;
} else {
return false;
}
};

vm.cutSelection = function(e) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected indentation of 2 characters

vm.settings.currentEditor.session.replace(
vm.settings.currentEditor.selection.getRange(), '');

vm.settings.currentEditor.focus();
};
});
18 changes: 9 additions & 9 deletions public/app/components/menuBar/menuBarTemplate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ <h2 class="md-toolbar-tools">{{main.projectFolderPath}}</h2>
</md-button>
</md-menu-item>
<md-menu-item class="md-indent">
<md-icon class="material-icons">save</md-icon>
<md-icon class="material-icons" style="color: rgba(0, 0, 0, 0.258824)">save</md-icon>
<md-button disabled="disabled" ng-click="menuBarCtrl.sampleAction('Rename', $event)">
Save
</md-button>
Expand Down Expand Up @@ -70,37 +70,37 @@ <h2 class="md-toolbar-tools">{{main.projectFolderPath}}</h2>
</button>
<md-menu-content>
<md-menu-item class="md-indent">
<md-icon class="material-icons">undo</md-icon>
<md-button ng-click="menuBarCtrl.sampleAction('undo', $event)">
<md-icon class="material-icons" ng-style="{color: menuBarCtrl.enableUndo ? '' : 'rgba(0, 0, 0, 0.258824)'}">undo</md-icon>
<md-button ng-click="menuBarCtrl.settings.currentUndoManager.undo() && menuBarCtrl.settings.currentEditor.focus()" ng-disabled="!menuBarCtrl.hasUndo()">
Undo
<span class="md-alt-text">{{ 'M-Z' | keyboardShortcut }}</span>
</md-button>
</md-menu-item>
<md-menu-item class="md-indent">
<md-icon class="material-icons">redo</md-icon>
<md-button ng-click="menuBarCtrl.sampleAction('redo', $event)">
<md-icon class="material-icons" ng-style="{color: menuBarCtrl.enableRedo ? '' : 'rgba(0, 0, 0, 0.258824)'}">redo</md-icon>
<md-button ng-click="menuBarCtrl.settings.currentUndoManager.redo() && menuBarCtrl.settings.currentEditor.focus()" ng-disabled="!menuBarCtrl.hasRedo()">
Redo
<span class="md-alt-text">{{ 'M-Y' | keyboardShortcut }}</span>
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item class="md-indent">
<md-icon class="material-icons">content_cut</md-icon>
<md-button ng-click="menuBarCtrl.sampleAction('cut', $event)">
<md-button ngclipboard ngclipboard-success="menuBarCtrl.cutSelection(e);" data-clipboard-text="{{ menuBarCtrl.settings.currentEditor.session.getTextRange(menuBarCtrl.settings.currentEditor.getSelectionRange()) }}">
Cut
<span class="md-alt-text">{{ 'M-X' | keyboardShortcut }}</span>
</md-button>
</md-menu-item>
<md-menu-item class="md-indent">
<md-icon class="material-icons">content_copy</md-icon>
<md-button ng-click="menuBarCtrl.sampleAction('copy', $event)">
<md-button ngclipboard ngclipboard-success="menuBarCtrl.settings.currentEditor.focus()" data-clipboard-text="{{ menuBarCtrl.settings.currentEditor.session.getTextRange(menuBarCtrl.settings.currentEditor.getSelectionRange()) }}">
Copy
<span class="md-alt-text">{{ 'M-C' | keyboardShortcut }}</span>
</md-button>
</md-menu-item>
<md-menu-item class="md-indent">
<md-icon class="material-icons">content_paste</md-icon>
<md-button ng-click="menuBarCtrl.sampleAction('paste', $event)">
<md-icon class="material-icons" style="color: rgba(0, 0, 0, 0.258824)">content_paste</md-icon>
<md-button ng-click="menuBarCtrl.paste()" disabled="disabled">
Paste
<span class="md-alt-text">{{ 'M-P' | keyboardShortcut }}</span>
</md-button>
Expand Down
4 changes: 3 additions & 1 deletion public/app/services/settingsService.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ angular.module('kibibitCodeEditor')
/* init */
var settings = {
cursor: {row: '0', column: '0'},
isFullscreen: false
isFullscreen: false,
currentUndoManager: undefined,
currentEditor: undefined
};

vm.getSettings = function() {
Expand Down
54 changes: 32 additions & 22 deletions public/app/views/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
<link rel="stylesheet" type="text/css" href="assets/lib/bower_components/ng-dialog/css/ngDialog.css">
<link rel="stylesheet" type="text/css" href="assets/lib/bower_components/ng-dialog/css/ngDialog-theme-default.css">
<link rel="stylesheet" type="text/css" href="assets/lib/bower_components/octicons/octicons/octicons.css">
<link rel="stylesheet" type="text/css" href="assets/lib/glyphter-font/css/Glyphter.css">
<link rel="stylesheet" type="text/css" href="assets/lib/pictonic/css/pictonic.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="assets/lib/bower_components/angular-ui-layout/src/ui-layout.css">
Expand All @@ -27,31 +28,36 @@
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>

<body ng-app="kibibitCodeEditor" ng-controller="mainController as main" class="main-app-container" ng-class="{foo:true}">
<div ui-layout="{ dividerSize: '0' }" >
<div ui-layout-container size="104px" class="menu-bar-container">
<menu-bar></menu-bar>
</div>

<div ui-layout-container="central" >
<div ui-layout="{ flow : 'column', dividerSize: '10' }">
<div ui-layout-container class="sidebar-container" size="20%">
<div class="sidebar" ng-scrollbars>
<kb-file-tree
kb-file-tree-path="main.projectFolderPath"
kb-file-tree-selection="main.openFile">
</kb-file-tree>
<body ng-app="kibibitCodeEditor">
<div ng-controller="mainController as main" class="main-app-container" ng-class="{'app-initiated':true}">
<div ui-layout="{ dividerSize: '0' }" >
<div ui-layout-container size="104px" class="menu-bar-container">
<menu-bar></menu-bar>
</div>

<div ui-layout-container="central" style="z-index: 6;">
<div ui-layout="{ flow : 'column', dividerSize: '10' }">
<div ui-layout-container class="sidebar-container" size="20%">
<div class="sidebar" ng-scrollbars>
<kb-file-tree
kb-file-tree-path="main.projectFolderPath"
kb-file-tree-selection="main.openFile">
</kb-file-tree>
</div>
</div>
<div ui-layout-container class="main-view-container">
<div class="tabs"></div>
<div class="main-view" ng-view></div>
</div>
</div>
</div>
<div ui-layout-container class="main-view-container">
<div class="tabs"></div>
<div class="main-view" ng-view></div>
<div ui-layout-container size="30px" class="status-bar">
<span>Line {{main.settings.cursor.row}} - Column {{main.settings.cursor.column}}</span>
</div>
</div>
</div>
<div ui-layout-container size="30px" class="status-bar">
<span>Line {{main.settings.cursor.row}} - Column {{main.settings.cursor.column}}</span>
</div>
</div>
<div class="loading-logo" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: center;" ng-class="{'app-initiated':true}">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

General question that concerns other places in the code too (menuBarTemplate.html for example):
do we have some kind of convention for when we use CSS class and when style attribute?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Basically, we don't use style unless it's something that needs to be loaded fast. Here, we want the loading logo to load before everything else. This way, we make sure it is rendered as fast as possible.

In the menuBarTemplate.html I used it on the paste button since that button is disabled permanently (notice the disabled="disabled" attribute on the button, which isn't controlled by a parameter as well)

besides that, I used ng-style for now since the md-icon directive stop working if I add another class there. The solution later will be to change the color of the parent element instead. But that will go into a different issue that I plan to open about making disabled in the menuBar more structured

<div class="icon-logo" style="font-size: 800%; color: #353535; text-shadow: 0px 1px 1px #5b5b5b;"></div>
</div>
<!-- <main>
<menu-bar></menu-bar> -->
Expand All @@ -63,7 +69,11 @@
<!-- <script type="text/javascript" src="assets/lib/bower_components/emitter/emitter.js"></script> -->
<script type="text/javascript" src="assets/lib/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="assets/lib/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="assets/lib/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script type="text/javascript" src="assets/lib/bower_components/clipboard/dist/clipboard.js"></script>
<script type="text/javascript" src="assets/lib/bower_components/ngclipboard/dist/ngclipboard.js"></script>
<script type="text/javascript" src="assets/lib/bower_components/re-tree/re-tree.js"></script>
<script type="text/javascript" src="assets/lib/bower_components/ng-device-detector/ng-device-detector.js"></script>
<script type="text/javascript" src="assets/lib/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script type="text/javascript" src="assets/lib/bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="assets/lib/bower_components/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="assets/lib/bower_components/angular-aria/angular-aria.js"></script>
Expand Down
17 changes: 17 additions & 0 deletions public/assets/images/logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/assets/images/svg_ready.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions public/assets/lib/glyphter-font/css/Glyphter.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/* Generated by Glyphter (http://www.glyphter.com) on Wed Apr 13 2016*/
@font-face {
font-family: 'Glyphter';
src: url('../fonts/Glyphter.eot');
src: url('../fonts/Glyphter.eot?#iefix') format('embedded-opentype'),
url('../fonts/Glyphter.woff') format('woff'),
url('../fonts/Glyphter.ttf') format('truetype'),
url('../fonts/Glyphter.svg#Glyphter') format('svg');
font-weight: normal;
font-style: normal;
}
[class*='icon-']:before{
display: inline-block;
font-family: 'Glyphter';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.icon-logo:before{content:'\0041';}
Binary file added public/assets/lib/glyphter-font/fonts/Glyphter.eot
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions public/assets/lib/glyphter-font/fonts/Glyphter.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/assets/lib/glyphter-font/fonts/Glyphter.ttf
View file
Open in desktop
Binary file not shown.
Binary file added public/assets/lib/glyphter-font/fonts/Glyphter.woff
View file
Open in desktop
Binary file not shown.
15 changes: 13 additions & 2 deletions public/assets/sass/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,24 @@ $color3: rgb(38, 38, 38);
.main-app-container {
opacity: 0;
transition: opacity 0.5s ease;
transition-delay: 0.8s;
transition-delay: 1s;

&.foo {
&.app-initiated {
opacity: 1;
}
}

.loading-logo {
transition: all 500ms ease;
transition-delay: 800ms;

&.app-initiated {
opacity: 0;
visibility: hidden;
z-index: -1;
}
}

html {
background: $color1;
}
Expand Down