├── .angular-cli.json ├── .editorconfig ├── .gitattributes ├── .gitignore ├── .vscode └── settings.json ├── README.md ├── e2e ├── app.e2e-spec.ts ├── app.po.ts └── tsconfig.e2e.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── prepros-6.config ├── protractor.conf.js ├── screenshots ├── Snap 2017-08-31 at 16.41.34.png └── Snap 2017-08-31 at 16.41.41.png ├── src ├── app │ ├── app.component.html │ ├── app.component.ts │ ├── app.module.ts │ ├── create-note │ │ ├── create-note.component.html │ │ └── create-note.component.ts │ ├── end │ │ ├── end.component.html │ │ └── end.component.ts │ ├── note │ │ ├── note.component.html │ │ └── note.component.ts │ ├── notes.data.ts │ ├── notes │ │ ├── notes.component.html │ │ └── notes.component.ts │ ├── nothing │ │ ├── nothing.component.html │ │ └── nothing.component.ts │ ├── overlay │ │ ├── overlay.component.html │ │ └── overlay.component.ts │ ├── timeago.pipe.ts │ └── view-note │ │ ├── view-note.component.html │ │ └── view-note.component.ts ├── assets │ ├── .gitkeep │ ├── angular.png │ └── large.jpg ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles │ ├── dist │ │ └── styles.css │ └── src │ │ ├── _defaults.scss │ │ └── styles.scss ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── typings.d.ts ├── tsconfig.json └── tslint.json /.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "angular-notes-app" 5 | }, 6 | "apps": [ 7 | { 8 | "root": "src", 9 | "outDir": "dist", 10 | "assets": [ 11 | "assets", 12 | "favicon.ico" 13 | ], 14 | "index": "index.html", 15 | "main": "main.ts", 16 | "polyfills": "polyfills.ts", 17 | "test": "test.ts", 18 | "tsconfig": "tsconfig.app.json", 19 | "testTsconfig": "tsconfig.spec.json", 20 | "prefix": "app", 21 | "styles": [ 22 | "styles/dist/styles.css" 23 | ], 24 | "scripts": [], 25 | "environmentSource": "environments/environment.ts", 26 | "environments": { 27 | "dev": "environments/environment.ts", 28 | "prod": "environments/environment.prod.ts" 29 | } 30 | } 31 | ], 32 | "e2e": { 33 | "protractor": { 34 | "config": "./protractor.conf.js" 35 | } 36 | }, 37 | "lint": [ 38 | { 39 | "project": "src/tsconfig.app.json", 40 | "exclude": "**/node_modules/**" 41 | }, 42 | { 43 | "project": "src/tsconfig.spec.json", 44 | "exclude": "**/node_modules/**" 45 | }, 46 | { 47 | "project": "e2e/tsconfig.e2e.json", 48 | "exclude": "**/node_modules/**" 49 | } 50 | ], 51 | "test": { 52 | "karma": { 53 | "config": "./karma.conf.js" 54 | } 55 | }, 56 | "defaults": { 57 | "styleExt": "css", 58 | "component": {} 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # * linguist-vendored 2 | # *.ts linguist-vendored=false 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | testem.log 34 | /typings 35 | yarn-error.log 36 | 37 | # e2e 38 | /e2e/*.js 39 | /e2e/*.map 40 | 41 | # System Files 42 | .DS_Store 43 | Thumbs.db 44 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.tabSize": 2 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular-Notes-App 2 | 3 | A notes app developed with Angular!! 4 | 5 | # Screenshots 6 | 7 | ![alt text](https://raw.githubusercontent.com/yTakkar/Angular-Notes-App/master/screenshots/Snap%202017-08-31%20at%2016.41.34.png) 8 | ![alt text](https://raw.githubusercontent.com/yTakkar/Angular-Notes-App/master/screenshots/Snap%202017-08-31%20at%2016.41.41.png) 9 | 10 | # Get Started 11 | 12 | 1. First run the App. 13 | 14 | ```javascript 15 | npm start 16 | ``` 17 | 18 | 2. Open the browser to check the result. 19 | ```javascript 20 | localhost:4200 21 | ``` 22 | -------------------------------------------------------------------------------- /e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('angular-notes-app App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to app!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "jasminewd2", 11 | "node" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular/cli'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular/cli/plugins/karma') 14 | ], 15 | client:{ 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | reports: [ 'html', 'lcovonly' ], 20 | fixWebpackSourcePaths: true 21 | }, 22 | angularCli: { 23 | environment: 'dev' 24 | }, 25 | reporters: ['progress', 'kjhtml'], 26 | port: 9876, 27 | colors: true, 28 | logLevel: config.LOG_INFO, 29 | autoWatch: true, 30 | browsers: ['Chrome'], 31 | singleRun: false 32 | }); 33 | }; 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-notes-app", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "test": "ng test", 10 | "lint": "ng lint", 11 | "e2e": "ng e2e" 12 | }, 13 | "private": true, 14 | "dependencies": { 15 | "@angular/animations": "^4.2.4", 16 | "@angular/common": "^4.2.4", 17 | "@angular/compiler": "^4.2.4", 18 | "@angular/core": "^4.2.4", 19 | "@angular/forms": "^4.2.4", 20 | "@angular/http": "^4.2.4", 21 | "@angular/platform-browser": "^4.2.4", 22 | "@angular/platform-browser-dynamic": "^4.2.4", 23 | "@angular/router": "^4.2.4", 24 | "core-js": "^2.4.1", 25 | "handy-notification": "^1.0.26", 26 | "handy-timeago": "^1.0.1", 27 | "jquery": "^3.2.1", 28 | "rxjs": "^5.4.2", 29 | "zone.js": "^0.8.14" 30 | }, 31 | "devDependencies": { 32 | "@angular/cli": "1.3.2", 33 | "@angular/compiler-cli": "^4.2.4", 34 | "@angular/language-service": "^4.2.4", 35 | "@types/jasmine": "~2.5.53", 36 | "@types/jasminewd2": "~2.0.2", 37 | "@types/node": "~6.0.60", 38 | "codelyzer": "~3.1.1", 39 | "jasmine-core": "~2.6.2", 40 | "jasmine-spec-reporter": "~4.1.0", 41 | "karma": "~1.7.0", 42 | "karma-chrome-launcher": "~2.1.1", 43 | "karma-cli": "~1.0.1", 44 | "karma-coverage-istanbul-reporter": "^1.2.1", 45 | "karma-jasmine": "~1.1.0", 46 | "karma-jasmine-html-reporter": "^0.2.2", 47 | "protractor": "~5.1.2", 48 | "ts-node": "~3.2.0", 49 | "tslint": "~5.3.2", 50 | "typescript": "~2.3.3" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /prepros-6.config: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Angular-Notes-App", 3 | "firstRun": false, 4 | "exportConfig": true, 5 | "fileConfigs": [ 6 | { 7 | "path": "src/styles/src/styles.scss", 8 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"src/styles/dist/styles.css\",\"autoCompile\":true,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 9 | } 10 | ], 11 | "fileTree": { 12 | "expandedDirs": [ 13 | "src", 14 | "src/styles", 15 | "src/styles/src" 16 | ], 17 | "hideSystemFiles": true, 18 | "systemFiles": [ 19 | ".*", 20 | "desktop.ini", 21 | "prepros.config", 22 | "$RECYCLE.BIN", 23 | "prepros.cfg", 24 | "prepros-6.config", 25 | "Prepros Export" 26 | ], 27 | "hideUnwatchedFiles": false 28 | }, 29 | "imports": [ 30 | { 31 | "path": "src/styles/src/styles.scss", 32 | "imports": [ 33 | "src/styles/src/_defaults.scss" 34 | ] 35 | } 36 | ], 37 | "projectView": { 38 | "selectedView": "file-tree" 39 | }, 40 | "fileWatcher": { 41 | "enabled": true, 42 | "watchedExtensions": [ 43 | "less", 44 | "sass", 45 | "scss", 46 | "styl", 47 | "md", 48 | "coffee", 49 | "jade", 50 | "haml", 51 | "slim", 52 | "ls", 53 | "kit", 54 | "png", 55 | "jpg", 56 | "jpeg", 57 | "pug", 58 | "css" 59 | ] 60 | }, 61 | "pathFilters": [ 62 | "node_modules", 63 | ".*", 64 | "bower_components", 65 | "prepros.config", 66 | "Prepros Export", 67 | "prepros-6.config", 68 | "prepros.cfg", 69 | "wp-admin", 70 | "wp-includes" 71 | ], 72 | "server": { 73 | "port": 7881, 74 | "assignNewPortAutomatically": true, 75 | "enable": true, 76 | "proxy": { 77 | "enable": false, 78 | "url": "" 79 | } 80 | }, 81 | "browser-sync": { 82 | "enable": false, 83 | "clicks": true, 84 | "forms": true, 85 | "scroll": true 86 | }, 87 | "live-reload": { 88 | "enable": true, 89 | "animate": true, 90 | "delay": 0 91 | }, 92 | "ftp-deploy": { 93 | "connectionType": "ftp", 94 | "remotePath": "", 95 | "uploadTimeout": 20000, 96 | "uploadOnChange": false, 97 | "ftp": { 98 | "secure": false, 99 | "host": "", 100 | "port": 21, 101 | "user": "", 102 | "password": "" 103 | }, 104 | "sftp": { 105 | "host": "", 106 | "port": 22, 107 | "usePrivateKey": false, 108 | "username": "", 109 | "password": "", 110 | "privateKey": "", 111 | "passphrase": "" 112 | }, 113 | "pathFilters": [ 114 | "config.rb", 115 | "prepros.config", 116 | "prepros-6.config", 117 | "node_modules", 118 | "Prepros Export", 119 | ".git", 120 | ".idea", 121 | ".sass-cache", 122 | ".hg", 123 | ".svn", 124 | ".cache", 125 | ".DS_Store", 126 | "*.sass", 127 | "*.scss", 128 | "*.less", 129 | "*.pug", 130 | "*.jade", 131 | "*.styl", 132 | "*.haml", 133 | "*.slim", 134 | "*.coffee", 135 | "*.ls", 136 | "*.kit", 137 | "*.ts" 138 | ], 139 | "history": [] 140 | }, 141 | "file-type-sass": "{\"compilers\":[\"node-sass\",\"autoprefixer\",\"minify-css\"]}", 142 | "file-type-less": "{\"compilers\":[\"less\",\"autoprefixer\",\"minify-css\"]}", 143 | "autoprefixer": { 144 | "browsers": "last 5 versions" 145 | }, 146 | "file-type-pug": "{\"compilers\":[\"pug\"]}", 147 | "file-type-css": "{\"compilers\":[\"autoprefixer\",\"cssnext\",\"minify-css\"]}", 148 | "file-type-javascript": "{\"compilers\":[\"concat-js\",\"babel\",\"uglify-js\"]}", 149 | "file-type-stylus": "{\"compilers\":[\"stylus\",\"autoprefixer\",\"minify-css\"]}", 150 | "file-type-markdown": "{\"compilers\":[\"markdown\"]}", 151 | "file-type-haml": "{\"compilers\":[\"haml\"]}", 152 | "file-type-slim": "{\"compilers\":[\"slim\"]}", 153 | "file-type-coffee-script": "{\"compilers\":[\"coffee-script\",\"uglify-js\"]}", 154 | "file-type-livescript": "{\"compilers\":[\"livescript\",\"uglify-js\"]}", 155 | "file-type-kit": "{\"compilers\":[\"kit\"]}", 156 | "uglify-js": { 157 | "ie8": false, 158 | "compress": { 159 | "sequences": true, 160 | "properties": true, 161 | "dead_code": true, 162 | "drop_debugger": true, 163 | "unsafe": false, 164 | "unsafe_comps": false, 165 | "unsafe_math": false, 166 | "unsafe_proto": false, 167 | "unsafe_regexp": false, 168 | "conditionals": true, 169 | "comparisons": true, 170 | "evaluate": true, 171 | "booleans": true, 172 | "loops": true, 173 | "unused": true, 174 | "toplevel": false, 175 | "top_retain": "", 176 | "hoist_funs": true, 177 | "hoist_vars": false, 178 | "if_return": true, 179 | "join_vars": true, 180 | "cascade": true, 181 | "collapse_vars": true, 182 | "reduce_vars": true, 183 | "warnings": true, 184 | "negate_iife": true, 185 | "pure_getters": false, 186 | "pure_funcs": [], 187 | "drop_console": false, 188 | "expression": false, 189 | "keep_fargs": true, 190 | "keep_fnames": false, 191 | "passes": 1, 192 | "keep_infinity": false, 193 | "side_effects": true, 194 | "global_defs": [] 195 | }, 196 | "output": { 197 | "ascii_only": false, 198 | "beautify": true, 199 | "bracketize": false, 200 | "comments": "", 201 | "indent_level": 4, 202 | "indent_start": 0, 203 | "inline_script": false, 204 | "keep_quoted_props": false, 205 | "max_line_len": false, 206 | "preamble": "", 207 | "preserve_line": false, 208 | "quote_keys": false, 209 | "quote_style": 0, 210 | "semicolons": true, 211 | "shebang": true, 212 | "width": 80 213 | } 214 | }, 215 | "cssnext": { 216 | "customProperties": true, 217 | "applyRule": true, 218 | "calc": false, 219 | "nesting": true, 220 | "customMedia": true, 221 | "mediaQueriesRange": true, 222 | "customSelectors": true, 223 | "attributeCaseInsensitive": true, 224 | "colorRebeccapurple": true, 225 | "colorHwb": true, 226 | "colorGray": true, 227 | "colorHexAlpha": true, 228 | "colorFunction": true, 229 | "fontVariant": true, 230 | "filter": true, 231 | "initial": true, 232 | "rem": true, 233 | "pseudoElements": true, 234 | "pseudoClassMatches": true, 235 | "pseudoClassNot": true, 236 | "pseudoClassAnyLink": true, 237 | "colorRgba": true, 238 | "overflowWrap": true 239 | }, 240 | "file-type-typescript": "{\"compilers\":[\"typescript\",\"uglify-js\"]}", 241 | "babel": { 242 | "useBabelRc": true, 243 | "presets": { 244 | "babel-preset-es2015": true 245 | }, 246 | "plugins": { 247 | "babel-plugin-syntax-jsx": true, 248 | "babel-plugin-transform-react-jsx": true, 249 | "babel-plugin-transform-async-to-generator": true, 250 | "babel-plugin-transform-class-properties": true, 251 | "babel-plugin-transform-object-rest-spread": true 252 | } 253 | }, 254 | "file-type-png": "{\"compilers\":[\"png\"]}", 255 | "file-type-jpg": "{\"compilers\":[\"jpg\"]}" 256 | } -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './e2e/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: 'e2e/tsconfig.e2e.json' 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /screenshots/Snap 2017-08-31 at 16.41.34.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yTakkar/Angular-Notes-App/6554fbd9d9b88b2b4637cd899d5302a35745f306/screenshots/Snap 2017-08-31 at 16.41.34.png -------------------------------------------------------------------------------- /screenshots/Snap 2017-08-31 at 16.41.41.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yTakkar/Angular-Notes-App/6554fbd9d9b88b2b4637cd899d5302a35745f306/screenshots/Snap 2017-08-31 at 16.41.41.png -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html' 6 | }) 7 | 8 | export class AppComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppComponent } from './app.component'; 5 | import { NotesComponent } from './notes/notes.component'; 6 | import { NoteComponent } from './note/note.component'; 7 | import { NothingComponent } from './nothing/nothing.component'; 8 | import { EndComponent } from './end/end.component'; 9 | import { CreateNoteComponent } from './create-note/create-note.component'; 10 | import { OverlayComponent } from './overlay/overlay.component'; 11 | import { TimeagoPipe } from './timeago.pipe'; 12 | import { ViewNoteComponent } from './view-note/view-note.component'; 13 | 14 | @NgModule({ 15 | declarations: [ 16 | AppComponent, 17 | NotesComponent, 18 | NoteComponent, 19 | NothingComponent, 20 | EndComponent, 21 | CreateNoteComponent, 22 | OverlayComponent, 23 | TimeagoPipe, 24 | ViewNoteComponent 25 | ], 26 | imports: [ 27 | BrowserModule 28 | ], 29 | providers: [], 30 | bootstrap: [AppComponent] 31 | }) 32 | export class AppModule { } 33 | -------------------------------------------------------------------------------- /src/app/create-note/create-note.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 | Create a note 6 |
7 |
8 | 9 | 10 |
11 |
12 | Back 13 | 14 |
15 |
16 | 17 |
18 | -------------------------------------------------------------------------------- /src/app/create-note/create-note.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Output, EventEmitter } from '@angular/core'; 2 | import $ from 'jquery'; 3 | 4 | @Component({ 5 | selector: 'app-create-note', 6 | templateUrl: './create-note.component.html' 7 | }) 8 | 9 | export class CreateNoteComponent implements OnInit { 10 | 11 | @Output() onBack = new EventEmitter(); 12 | @Output() onCreateNote = new EventEmitter(); 13 | 14 | _Toggle(e) { 15 | this.onBack.emit(e); 16 | } 17 | 18 | createNote(e) { 19 | e.preventDefault(); 20 | const obj: Object = { 21 | title: $('.n_title').val(), 22 | content: $('.n_content').val() 23 | }; 24 | this.onCreateNote.emit(obj); 25 | } 26 | 27 | constructor() { } 28 | 29 | ngOnInit() { 30 | $('.n_title').focus(); 31 | } 32 | 33 | } 34 | -------------------------------------------------------------------------------- /src/app/end/end.component.html: -------------------------------------------------------------------------------- 1 |
2 | {{ mssg }} 3 |
4 | -------------------------------------------------------------------------------- /src/app/end/end.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import $ from 'jquery'; 3 | 4 | @Component({ 5 | selector: 'app-end', 6 | templateUrl: './end.component.html' 7 | }) 8 | 9 | export class EndComponent implements OnInit { 10 | 11 | mssg: String = 'Looks like you\'ve reached the end'; 12 | 13 | ToTop() { 14 | $('html, body').animate({ scrollTop: 0 }, 450); 15 | } 16 | 17 | constructor() { } 18 | 19 | ngOnInit() { } 20 | 21 | } 22 | -------------------------------------------------------------------------------- /src/app/note/note.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 | 6 |
7 | You 8 | {{ note.time | timeago }} 9 |
10 |
11 |
12 | {{ note.title }} 13 |
14 |
15 | {{ note.content }} 16 |
17 |
18 | 19 | 23 | 24 | 30 | 31 |
32 | -------------------------------------------------------------------------------- /src/app/note/note.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-note', 5 | templateUrl: './note.component.html' 6 | }) 7 | 8 | export class NoteComponent implements OnInit { 9 | 10 | @Input() note; 11 | @Output() onDelete = new EventEmitter(); 12 | 13 | viewNote: Boolean = false; 14 | 15 | view_note(e) { 16 | e.preventDefault(); 17 | this.viewNote = !this.viewNote; 18 | } 19 | 20 | delete_note(e) { 21 | this.onDelete.emit(e); 22 | } 23 | 24 | constructor() { } 25 | 26 | ngOnInit() { } 27 | 28 | } 29 | -------------------------------------------------------------------------------- /src/app/notes.data.ts: -------------------------------------------------------------------------------- 1 | interface NInterface { 2 | id: number; 3 | time: number; 4 | title: string; 5 | content: string; 6 | } 7 | 8 | // tslint:disable-next-line:no-empty-interface 9 | interface NotesInterface extends Array {} 10 | 11 | const notes: NotesInterface = [ 12 | { 13 | id: 1, 14 | time: 1504176630103, 15 | title: 'First Title..', 16 | // tslint:disable-next-line:max-line-length 17 | content: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters' 18 | }, 19 | { 20 | id: 2, 21 | time: 1504176110203, 22 | title: 'Second Title..', 23 | // tslint:disable-next-line:max-line-length 24 | content: 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable.' 25 | }, 26 | { 27 | id: 3, 28 | time: 1503199024617, 29 | title: 'Third Title..', 30 | // tslint:disable-next-line:max-line-length 31 | content: 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.' 32 | }, 33 | { 34 | id: 4, 35 | time: 1503309104117, 36 | title: 'Fourth Title..', 37 | // tslint:disable-next-line:max-line-length 38 | content: 'The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.' 39 | }, 40 | { 41 | id: 5, 42 | time: 1503309024617, 43 | title: 'Fifth Title..', 44 | // tslint:disable-next-line:max-line-length 45 | content: 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable.' 46 | } 47 | ]; 48 | 49 | export default notes; 50 | -------------------------------------------------------------------------------- /src/app/notes/notes.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | {{ notes.length }} Notes 5 | Create note 6 |
7 | 8 | 9 | 10 |
11 | 15 |
16 | 17 | 18 | 19 | 22 | 23 | 24 | 28 | 29 | 30 |
31 | -------------------------------------------------------------------------------- /src/app/notes/notes.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import Notify from 'handy-notification'; 3 | import Notes from '../notes.data'; 4 | 5 | @Component({ 6 | selector: 'app-notes', 7 | templateUrl: './notes.component.html' 8 | }) 9 | 10 | export class NotesComponent implements OnInit { 11 | 12 | notes = Notes; 13 | 14 | create: Boolean = false; 15 | 16 | _Toggle(e) { 17 | e.preventDefault(); 18 | this.create = !this.create; 19 | } 20 | 21 | createNote(e) { 22 | const 23 | time: number = new Date().getTime(), 24 | { title, content } = e; 25 | 26 | this.notes.unshift({ 27 | id: time, 28 | time, 29 | title, 30 | content 31 | }); 32 | 33 | this.create = false; 34 | Notify({ value: 'Note Created!!' }); 35 | } 36 | 37 | deleteNote(e) { 38 | const f = this.notes.filter(el => el.id !== e ); 39 | this.notes = f; 40 | } 41 | 42 | constructor() { } 43 | 44 | ngOnInit() { } 45 | 46 | } 47 | -------------------------------------------------------------------------------- /src/app/nothing/nothing.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | {{ mssg }} 4 |
5 | -------------------------------------------------------------------------------- /src/app/nothing/nothing.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-nothing', 5 | templateUrl: './nothing.component.html' 6 | }) 7 | 8 | export class NothingComponent implements OnInit { 9 | 10 | mssg: String = 'No notes for you, go ahead and create one!!'; 11 | 12 | constructor() { } 13 | 14 | ngOnInit() { } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /src/app/overlay/overlay.component.html: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /src/app/overlay/overlay.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-overlay', 5 | templateUrl: './overlay.component.html' 6 | }) 7 | 8 | export class OverlayComponent implements OnInit { 9 | 10 | @Input() visible; 11 | 12 | constructor() { } 13 | 14 | ngOnInit() { } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /src/app/timeago.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | import TimeAgo from 'handy-timeago'; 3 | 4 | @Pipe({ 5 | name: 'timeago' 6 | }) 7 | 8 | export class TimeagoPipe implements PipeTransform { 9 | 10 | transform(time: Number, args?: any): any { 11 | return TimeAgo(time); 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /src/app/view-note/view-note.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | View note 5 |
6 |
7 |
8 | 9 |
10 | You 11 | {{ note.time | timeago }} 12 |
13 |
14 | {{ note.title }} 15 | {{ note.content }} 16 |
17 |
18 | Delete Note 19 | Done 20 |
21 |
22 |
23 | -------------------------------------------------------------------------------- /src/app/view-note/view-note.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-view-note', 5 | templateUrl: './view-note.component.html' 6 | }) 7 | 8 | export class ViewNoteComponent implements OnInit { 9 | 10 | @Input() note; 11 | @Output() onView = new EventEmitter(); 12 | @Output() onDelete = new EventEmitter(); 13 | 14 | doneViewing(e) { 15 | this.onView.emit(e); 16 | } 17 | 18 | deleteNote(e) { 19 | e.preventDefault(); 20 | this.onDelete.emit(this.note.id); 21 | } 22 | 23 | constructor() { } 24 | 25 | ngOnInit() { } 26 | 27 | } 28 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yTakkar/Angular-Notes-App/6554fbd9d9b88b2b4637cd899d5302a35745f306/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yTakkar/Angular-Notes-App/6554fbd9d9b88b2b4637cd899d5302a35745f306/src/assets/angular.png -------------------------------------------------------------------------------- /src/assets/large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yTakkar/Angular-Notes-App/6554fbd9d9b88b2b4637cd899d5302a35745f306/src/assets/large.jpg -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yTakkar/Angular-Notes-App/6554fbd9d9b88b2b4637cd899d5302a35745f306/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular Notes App 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule); 12 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** Evergreen browsers require these. **/ 41 | import 'core-js/es6/reflect'; 42 | import 'core-js/es7/reflect'; 43 | 44 | 45 | /** 46 | * Required to support Web Animations `@angular/animation`. 47 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation 48 | **/ 49 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 50 | 51 | 52 | 53 | /*************************************************************************************************** 54 | * Zone JS is required by Angular itself. 55 | */ 56 | import 'zone.js/dist/zone'; // Included with Angular CLI. 57 | 58 | 59 | 60 | /*************************************************************************************************** 61 | * APPLICATION IMPORTS 62 | */ 63 | 64 | /** 65 | * Date, currency, decimal and percent pipes. 66 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 67 | */ 68 | // import 'intl'; // Run `npm install --save intl`. 69 | /** 70 | * Need to import at least one locale-data with intl. 71 | */ 72 | // import 'intl/locale-data/jsonp/en'; 73 | -------------------------------------------------------------------------------- /src/styles/dist/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0px; 3 | margin: 0px; } 4 | 5 | body { 6 | font-family: "Open Sans", "Roboto", Tahoma, arial, sans-serif; 7 | background: #fbfbfb; 8 | font-size: 13px; 9 | color: #3d464d; 10 | font-weight: normal; } 11 | 12 | a { 13 | text-decoration: none; 14 | color: #2895F1; 15 | outline: none; } 16 | 17 | .a_disabled { 18 | cursor: not-allowed !important; 19 | pointer-events: none !important; 20 | background: #6ab9e8 !important; } 21 | 22 | .sec_btn_disabled { 23 | cursor: not-allowed !important; 24 | pointer-events: none !important; 25 | color: #d8c3c3 !important; } 26 | 27 | input[type="text"], input[type="email"], input[type="password"], textarea { 28 | border: 1px solid #eee; 29 | border-radius: 4px; 30 | font-family: "Open Sans", "Roboto", Tahoma, arial, sans-serif; 31 | color: #0b867a; 32 | outline: none; 33 | padding: 5px 5px; } 34 | 35 | input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { 36 | padding: 0 !important; 37 | border: 0 none !important; } 38 | 39 | textarea { 40 | word-break: break-all; 41 | font-size: 13px; } 42 | 43 | input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus { 44 | border: 1px solid #56b4ef !important; 45 | -webkit-box-shadow: 0px 0px 5px 1px #c8def0; 46 | box-shadow: 0px 0px 5px 1px #c8def0; } 47 | 48 | input[type="submit"], input[type="button"], .pri_btn { 49 | font-weight: 600; 50 | background: #1b9be9; 51 | border: 1px solid #1b9be9; 52 | color: #fff; 53 | border-radius: 3px; 54 | cursor: pointer; 55 | outline: none; } 56 | input[type="submit"]:hover, input[type="button"]:hover, .pri_btn:hover { 57 | opacity: .9; } 58 | input[type="submit"]:focus, input[type="button"]:focus, .pri_btn:focus { 59 | background: #198bd0; } 60 | 61 | input[type="submit"]:disabled, input[type="button"]:disabled { 62 | background: #6ab9e8 !important; 63 | cursor: auto !important; } 64 | input[type="submit"]:disabled:hover, input[type="button"]:disabled:hover { 65 | opacity: 1 !important; } 66 | 67 | .sec_btn { 68 | border: 1px solid #eee; 69 | background: #fbfbfb; 70 | color: #1b2733; 71 | border-radius: 3px; 72 | cursor: pointer; 73 | font-weight: 600; 74 | outline: none; } 75 | .sec_btn:hover { 76 | color: #1b2733; 77 | background-color: #fff7f7; } 78 | .sec_btn:focus { 79 | color: #1b2733; 80 | background: #f7ebeb; } 81 | 82 | .overlay { 83 | position: fixed; 84 | width: 100%; 85 | height: 100%; 86 | top: 0px; 87 | left: 0px; 88 | right: 0px; 89 | bottom: 0px; 90 | background: #000; 91 | opacity: 0.5 !important; 92 | z-index: 1; } 93 | 94 | .hidden_overlay { 95 | position: fixed; 96 | width: 100%; 97 | height: 100%; 98 | top: 0px; 99 | left: 0px; 100 | right: 0px; 101 | bottom: 0px; 102 | background: transparent !important; 103 | z-index: 2; } 104 | 105 | .handy-notify { 106 | position: fixed; 107 | background: #333; 108 | left: 2%; 109 | color: #fff; 110 | border-radius: 3px; 111 | padding: 12px 80px 12px 25px; 112 | font-size: 15px; 113 | cursor: pointer; 114 | text-align: left; 115 | z-index: 3; 116 | top: 105%; } 117 | 118 | .home_last_mssg { 119 | position: relative; 120 | border-radius: 4px; 121 | background: #fff; 122 | border: 1px solid #f7f5f5; 123 | font-size: 14px; 124 | text-align: center; 125 | padding: 10px; 126 | cursor: default; } 127 | .home_last_mssg img { 128 | position: relative; 129 | text-align: center; 130 | width: 150px; 131 | display: block; 132 | left: 48%; 133 | -webkit-transform: translate(-50%); 134 | -ms-transform: translate(-50%); 135 | transform: translate(-50%); } 136 | .home_last_mssg span { 137 | position: relative; 138 | text-align: center; 139 | display: block; 140 | left: -5px; } 141 | 142 | .modal { 143 | position: absolute; 144 | top: 50%; 145 | left: 50%; 146 | -webkit-transform: translate(-50%, -50%); 147 | -ms-transform: translate(-50%, -50%); 148 | transform: translate(-50%, -50%); 149 | position: fixed !important; 150 | box-shadow: 0 0 18px rgba(27, 31, 35, 0.4); 151 | -webkit-box-shadow: 0 0 18px rgba(27, 31, 35, 0.4); 152 | -moz-box-shadow: 0 0 18px rgba(27, 31, 35, 0.4); 153 | width: 300px; 154 | border-radius: 3px; 155 | z-index: 2; 156 | background: #fff; 157 | font-size: 14px; } 158 | .modal .modal_no { 159 | text-align: center; 160 | position: relative; 161 | top: 30px; } 162 | .modal .modal_no img { 163 | width: 150px; } 164 | .modal .modal_header { 165 | background: #f9f9f9; 166 | border-bottom: 1px solid #f7f5f5; 167 | padding: 10px; 168 | border-top-left-radius: 3px; 169 | border-top-right-radius: 3px; } 170 | .modal .modal_header span.title { 171 | font-weight: 600; } 172 | .modal .modal_middle { 173 | position: relative; 174 | padding: 10px; } 175 | .modal .modal_bottom { 176 | display: block; 177 | text-align: right; 178 | padding: 9px 5px 12px 5px; 179 | border-top: 1px solid #eee; 180 | margin-top: 0px; } 181 | .modal .modal_bottom a, .modal .modal_bottom input[type='submit'] { 182 | display: inline-block; 183 | padding: 4px 10px; 184 | font-weight: 600; } 185 | 186 | .notes_wrapper { 187 | margin-top: 70px; } 188 | 189 | .note { 190 | background: #fff; 191 | padding: 10px; 192 | display: block; 193 | font-size: 14px; 194 | border: 1px solid #f7f5f5; 195 | border-radius: 3px; 196 | margin-bottom: 10px; 197 | cursor: pointer; } 198 | .note:hover { 199 | border-color: #eee; } 200 | .note .note_header { 201 | margin-bottom: 7px; } 202 | .note .note_header img { 203 | height: 31px; 204 | width: 31px; 205 | border-radius: 50%; 206 | display: inline-block; } 207 | .note .note_header .note_h_left { 208 | display: inline-block; 209 | margin-left: 5px; 210 | width: 90%; } 211 | .note .note_header .note_h_left .note_username { 212 | display: block; 213 | color: #1b2733; 214 | font-weight: 600; 215 | position: relative; 216 | top: 2px; } 217 | .note .note_header .note_h_left .note_time { 218 | font-size: 13px; 219 | color: #66757f; 220 | position: relative; 221 | top: -1px; } 222 | .note .note_title, .note .note_content { 223 | color: #1b2733; } 224 | .note .note_title { 225 | margin-bottom: 4px; 226 | font-weight: 600; } 227 | 228 | .create_note { 229 | width: 380px; } 230 | .create_note input[type='text'], .create_note textarea { 231 | padding: 7px !important; 232 | width: 94%; 233 | font-size: 14px; } 234 | .create_note input[type="text"] { 235 | margin-bottom: 9px; } 236 | .create_note textarea { 237 | height: 250px; } 238 | .create_note .c_n_bottom { 239 | margin-top: 1px; } 240 | .create_note .c_n_bottom input[type='submit'] { 241 | margin-left: 5px; 242 | padding: 5px 10px; 243 | margin-right: 6px; 244 | font-size: 14px; } 245 | 246 | .content_editor { 247 | margin-top: 5px; } 248 | 249 | .page_end { 250 | padding: 10px; 251 | text-align: center; 252 | font-size: 14px; 253 | margin-top: 10px; 254 | color: #66757f; 255 | cursor: pointer; 256 | border-radius: 3px; 257 | border: 1px solid #fbfbfb; } 258 | .page_end:hover { 259 | border: 1px solid #eee; } 260 | 261 | .home { 262 | position: relative; 263 | width: 607px; 264 | margin-left: 365px; 265 | margin-bottom: 60px; } 266 | .home .home_info { 267 | margin-bottom: 10px; 268 | background: #fff; 269 | padding: 14px 10px; 270 | border: 1px solid #f7f5f5; 271 | border-radius: 3px; 272 | font-size: 15px; } 273 | .home .home_info a { 274 | position: absolute; 275 | right: 10px; 276 | padding: 4px 12px; 277 | top: 10px; } 278 | 279 | .view_note { 280 | width: 600px; } 281 | .view_note .v_n_middle .v_n_info { 282 | margin-bottom: 5px; } 283 | .view_note .v_n_middle .v_n_info img { 284 | width: 40px; 285 | height: 40px; 286 | border-radius: 50%; 287 | display: inline-block; } 288 | .view_note .v_n_middle .v_n_info .v_n_left { 289 | display: inline-block; 290 | margin-left: 5px; 291 | position: relative; 292 | top: -5px; } 293 | .view_note .v_n_middle .v_n_info .v_n_left .v_n_username { 294 | display: block; 295 | font-weight: 600; 296 | font-size: 15px; 297 | color: inherit; } 298 | .view_note .v_n_middle .v_n_info .v_n_left .v_n_time { 299 | font-size: 13px; 300 | color: #66757f; 301 | position: relative; 302 | top: -2px; } 303 | .view_note .v_n_middle .v_n_title { 304 | font-weight: 600; 305 | display: block; 306 | margin-bottom: 3px; 307 | font-size: 15px; 308 | outline: none; } 309 | .view_note .v_n_middle .v_n_content { 310 | display: block; 311 | outline: none; } 312 | .view_note .v_n_middle .v_n_title[contenteditable='true'], .view_note .v_n_middle .v_n_content[contenteditable='true'] { 313 | border: 1px solid #54BBFF; 314 | padding: 5px 5px !important; 315 | border-radius: 2px; } 316 | .view_note .v_n_bottom a { 317 | margin-left: 5px; } 318 | .view_note .v_n_bottom .v_n_cancel { 319 | margin-right: 5px; } 320 | .view_note .v_n_bottom .v_n_int { 321 | position: absolute; 322 | color: #66757f; 323 | bottom: 10px; 324 | left: 10px; } 325 | .view_note .v_n_bottom .v_n_int span.like_unlike { 326 | display: inline-block; 327 | height: 24px; 328 | cursor: pointer; 329 | -webkit-transition: all .1s ease-in-out; 330 | -o-transition: all .1s ease-in-out; 331 | transition: all .1s ease-in-out; } 332 | .view_note .v_n_bottom .v_n_int span.like_unlike:hover { 333 | color: #1b2733; 334 | -webkit-transform: scale(1.1); 335 | -ms-transform: scale(1.1); 336 | transform: scale(1.1); } 337 | .view_note .v_n_bottom .v_n_int .like_unlike_disabled { 338 | cursor: not-allowed !important; 339 | pointer-events: none !important; 340 | color: #d8c3c3 !important; } 341 | -------------------------------------------------------------------------------- /src/styles/src/_defaults.scss: -------------------------------------------------------------------------------- 1 | $a: #2895F1; 2 | $family: 'Open Sans', 'Roboto', Tahoma, arial, sans-serif; 3 | $dark: #1b2733; 4 | $fb: #fbfbfb; 5 | $ff: #fff; 6 | $ee: #eee; 7 | $pric: #1b9be9; 8 | $d_light: #66757f; 9 | $header: #f9f9f9; 10 | $header_border: #f7f5f5; 11 | $second_border: #f7f9fa; 12 | $third-border: #f6f7f9; 13 | 14 | @mixin center{ 15 | position: absolute; 16 | top: 50%; 17 | left: 50%; 18 | transform: translate(-50%, -50%); 19 | } 20 | 21 | @mixin modal-shadow{ 22 | box-shadow: 0 0 18px rgba(27,31,35,0.4); 23 | -webkit-box-shadow: 0 0 18px rgba(27,31,35,0.4); 24 | -moz-box-shadow: 0 0 18px rgba(27,31,35,0.4); 25 | } 26 | 27 | *{ 28 | padding: 0px; 29 | margin: 0px; 30 | } 31 | 32 | body{ 33 | font-family: $family; 34 | background: $fb; 35 | font-size: 13px; 36 | color: #3d464d; 37 | font-weight: normal; 38 | } 39 | 40 | a{ 41 | text-decoration: none; 42 | color: $a; 43 | outline: none; 44 | } 45 | 46 | .a_disabled{ 47 | cursor: not-allowed !important; 48 | pointer-events: none !important; 49 | background: #6ab9e8 !important; 50 | } 51 | 52 | .sec_btn_disabled{ 53 | cursor: not-allowed !important; 54 | pointer-events: none !important; 55 | color: #d8c3c3 !important; 56 | } 57 | 58 | input[type="text"],input[type="email"],input[type="password"],textarea{ 59 | border: 1px solid $ee; 60 | border-radius: 4px; 61 | font-family: $family; 62 | color: #0b867a; 63 | outline: none; 64 | padding: 5px 5px; 65 | } 66 | 67 | input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner{ 68 | padding: 0 !important; 69 | border: 0 none !important; 70 | } 71 | 72 | textarea{ 73 | word-break: break-all; 74 | font-size: 13px; 75 | } 76 | 77 | input[type="text"]:focus,input[type="password"]:focus, input[type="email"]:focus, textarea:focus{ 78 | border: 1px solid #56b4ef !important; 79 | box-shadow: 0px 0px 5px 1px #c8def0; 80 | } 81 | 82 | input[type="submit"],input[type="button"],.pri_btn{ 83 | font-weight: 600; 84 | background: $pric; 85 | border: 1px solid $pric; 86 | color: $ff;; 87 | border-radius: 3px; 88 | cursor: pointer; 89 | outline: none; 90 | &:hover{ opacity: .9; } 91 | &:focus{ background: #198bd0; } 92 | } 93 | 94 | input[type="submit"]:disabled, input[type="button"]:disabled{ 95 | background: #6ab9e8 !important; 96 | cursor: auto !important; 97 | &:hover{ opacity: 1 !important; } 98 | } 99 | 100 | .sec_btn{ 101 | border: 1px solid $ee; 102 | background: $fb; 103 | color: $dark; 104 | border-radius: 3px; 105 | cursor: pointer; 106 | font-weight: 600; 107 | outline: none; 108 | &:hover{ 109 | color: $dark; 110 | background-color: #fff7f7; 111 | } 112 | &:focus{ 113 | color: $dark; 114 | background: #f7ebeb; 115 | } 116 | } 117 | 118 | .overlay{ 119 | position: fixed; 120 | width: 100%; 121 | height: 100%; 122 | top: 0px; 123 | left: 0px; 124 | right: 0px; 125 | bottom: 0px; 126 | background: #000; 127 | opacity: 0.5 !important; 128 | z-index: 1; 129 | } 130 | 131 | .hidden_overlay{ 132 | position: fixed; 133 | width: 100%; 134 | height: 100%; 135 | top: 0px; 136 | left: 0px; 137 | right: 0px; 138 | bottom: 0px; 139 | background: transparent !important; 140 | z-index: 2; 141 | } 142 | 143 | .handy-notify{ 144 | position: fixed; 145 | background: #333; 146 | left: 2%; 147 | color: $ff; 148 | border-radius: 3px; 149 | padding: 12px 80px 12px 25px; 150 | font-size: 15px; 151 | cursor: pointer; 152 | text-align: left; 153 | z-index: 3; 154 | top: 105%; 155 | } 156 | 157 | .home_last_mssg{ 158 | position: relative; 159 | border-radius: 4px; 160 | background:$ff; 161 | border: 1px solid $header_border; 162 | font-size: 14px; 163 | text-align: center; 164 | padding: 10px; 165 | cursor: default; 166 | & img{ 167 | position: relative; 168 | text-align: center; 169 | width: 150px; 170 | display: block; 171 | left: 48%; 172 | transform: translate(-50%); 173 | } 174 | & span{ 175 | position: relative; 176 | text-align: center; 177 | display: block; 178 | left: -5px; 179 | } 180 | } 181 | 182 | .modal{ 183 | @include center; 184 | position: fixed !important; 185 | @include modal-shadow; 186 | width: 300px; 187 | border-radius: 3px; 188 | z-index: 2; 189 | background: $ff; 190 | font-size: 14px; 191 | & .modal_no{ 192 | text-align: center; 193 | position: relative; 194 | top: 30px; 195 | & img{ width: 150px; } 196 | } 197 | & .modal_header{ 198 | background: $header; 199 | border-bottom: 1px solid $header_border; 200 | padding: 10px; 201 | border-top-left-radius: 3px; 202 | border-top-right-radius: 3px; 203 | & span.title{ font-weight: 600; } 204 | } 205 | & .modal_middle{ 206 | position: relative; 207 | padding: 10px; 208 | } 209 | & .modal_bottom{ 210 | display: block; 211 | text-align: right; 212 | padding: 9px 5px 12px 5px; 213 | border-top: 1px solid $ee; 214 | margin-top: 0px; 215 | & a, & input[type='submit']{ 216 | display: inline-block; 217 | padding: 4px 10px; 218 | font-weight: 600; 219 | } 220 | } 221 | } 222 | -------------------------------------------------------------------------------- /src/styles/src/styles.scss: -------------------------------------------------------------------------------- 1 | @import 'defaults'; 2 | 3 | .notes_wrapper{ 4 | margin-top: 70px; 5 | } 6 | 7 | .note{ 8 | background: $ff; 9 | padding: 10px; 10 | display: block; 11 | font-size: 14px; 12 | border: 1px solid $header_border; 13 | border-radius: 3px; 14 | margin-bottom: 10px; 15 | cursor: pointer; 16 | &:hover{ border-color: $ee; } 17 | & .note_header{ 18 | margin-bottom: 7px; 19 | & img{ 20 | height: 31px; 21 | width: 31px; 22 | border-radius: 50%; 23 | display: inline-block; 24 | } 25 | & .note_h_left{ 26 | display: inline-block; 27 | margin-left: 5px; 28 | width: 90%; 29 | & .note_username{ 30 | display: block; 31 | color: $dark; 32 | font-weight: 600; 33 | position: relative; 34 | top: 2px; 35 | } 36 | & .note_time{ 37 | font-size: 13px; 38 | color: $d_light; 39 | position: relative; 40 | top: -1px; 41 | } 42 | } 43 | } 44 | & .note_title, & .note_content{ color: $dark; } 45 | & .note_title{ 46 | margin-bottom: 4px; 47 | font-weight: 600; 48 | } 49 | } 50 | 51 | .create_note{ 52 | width: 380px; 53 | & input[type='text'], & textarea{ 54 | padding: 7px !important; 55 | width: 94%; 56 | font-size: 14px; 57 | } 58 | & input[type="text"]{ margin-bottom: 9px; } 59 | & textarea{ height: 250px; } 60 | & .c_n_bottom{ 61 | margin-top: 1px; 62 | & input[type='submit']{ 63 | margin-left: 5px; 64 | padding: 5px 10px; 65 | margin-right: 6px; 66 | font-size: 14px; 67 | } 68 | } 69 | } 70 | 71 | .content_editor{ 72 | margin-top: 5px; 73 | } 74 | 75 | .page_end{ 76 | padding: 10px; 77 | text-align: center; 78 | font-size: 14px; 79 | margin-top: 10px; 80 | color: $d_light; 81 | cursor: pointer; 82 | border-radius: 3px; 83 | border: 1px solid $fb; 84 | &:hover{ border: 1px solid $ee; } 85 | } 86 | 87 | .home{ 88 | position: relative; 89 | width: 607px; 90 | margin-left: 365px; 91 | margin-bottom: 60px; 92 | & .home_info{ 93 | margin-bottom: 10px; 94 | background: $ff; 95 | padding: 14px 10px; 96 | border: 1px solid $header_border; 97 | border-radius: 3px; 98 | font-size: 15px; 99 | & a{ 100 | position: absolute; 101 | right: 10px; 102 | padding: 4px 12px; 103 | top: 10px; 104 | } 105 | } 106 | } 107 | 108 | .view_note{ 109 | width: 600px; 110 | & .v_n_middle{ 111 | & .v_n_info{ 112 | margin-bottom: 5px; 113 | & img{ 114 | width: 40px; 115 | height: 40px; 116 | border-radius: 50%; 117 | display: inline-block; 118 | } 119 | & .v_n_left{ 120 | display: inline-block; 121 | margin-left: 5px; 122 | position: relative; 123 | top: -5px; 124 | & .v_n_username{ 125 | display: block; 126 | font-weight: 600; 127 | font-size: 15px; 128 | color: inherit; 129 | } 130 | & .v_n_time{ 131 | font-size: 13px; 132 | color: $d_light; 133 | position: relative; 134 | top: -2px; 135 | } 136 | } 137 | } 138 | & .v_n_title{ 139 | font-weight: 600; 140 | display: block; 141 | margin-bottom: 3px; 142 | font-size: 15px; 143 | outline: none; 144 | } 145 | & .v_n_content{ 146 | display: block; 147 | outline: none; 148 | } 149 | & .v_n_title[contenteditable='true'], & .v_n_content[contenteditable='true']{ 150 | border: 1px solid #54BBFF; 151 | padding: 5px 5px !important; 152 | border-radius: 2px; 153 | } 154 | } 155 | & .v_n_bottom { 156 | a{ margin-left: 5px; } 157 | & .v_n_cancel{ margin-right: 5px; } 158 | & .v_n_int{ 159 | position: absolute; 160 | color: $d_light; 161 | bottom: 10px; 162 | left: 10px; 163 | span.like_unlike{ 164 | display: inline-block; 165 | height: 24px; 166 | cursor: pointer; 167 | transition: all .1s ease-in-out; 168 | &:hover{ 169 | color: $dark; 170 | transform: scale(1.1); 171 | } 172 | } 173 | & .like_unlike_disabled{ 174 | cursor: not-allowed !important; 175 | pointer-events: none !important; 176 | color: #d8c3c3 !important; 177 | } 178 | } 179 | } 180 | 181 | } 182 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/long-stack-trace-zone'; 4 | import 'zone.js/dist/proxy.js'; 5 | import 'zone.js/dist/sync-test'; 6 | import 'zone.js/dist/jasmine-patch'; 7 | import 'zone.js/dist/async-test'; 8 | import 'zone.js/dist/fake-async-test'; 9 | import { getTestBed } from '@angular/core/testing'; 10 | import { 11 | BrowserDynamicTestingModule, 12 | platformBrowserDynamicTesting 13 | } from '@angular/platform-browser-dynamic/testing'; 14 | 15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 16 | declare const __karma__: any; 17 | declare const require: any; 18 | 19 | // Prevent Karma from running prematurely. 20 | __karma__.loaded = function () {}; 21 | 22 | // First, initialize the Angular testing environment. 23 | getTestBed().initTestEnvironment( 24 | BrowserDynamicTestingModule, 25 | platformBrowserDynamicTesting() 26 | ); 27 | // Then we find all the tests. 28 | const context = require.context('./', true, /\.spec\.ts$/); 29 | // And load the modules. 30 | context.keys().map(context); 31 | // Finally, start Karma to run the tests. 32 | __karma__.start(); 33 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "baseUrl": "./", 6 | "module": "es2015", 7 | "types": [] 8 | }, 9 | "exclude": [ 10 | "test.ts", 11 | "**/*.spec.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | }, 13 | "files": [ 14 | "test.ts" 15 | ], 16 | "include": [ 17 | "**/*.spec.ts", 18 | "**/*.d.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "outDir": "./dist/out-tsc", 5 | "sourceMap": true, 6 | "declaration": false, 7 | "moduleResolution": "node", 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "target": "es5", 11 | "typeRoots": [ 12 | "node_modules/@types" 13 | ], 14 | "lib": [ 15 | "es2017", 16 | "dom" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "arrow-return-shorthand": true, 7 | "callable-types": true, 8 | "class-name": true, 9 | "comment-format": [ 10 | true, 11 | "check-space" 12 | ], 13 | "curly": true, 14 | "eofline": true, 15 | "forin": true, 16 | "import-blacklist": [ 17 | true, 18 | "rxjs" 19 | ], 20 | "import-spacing": true, 21 | "indent": [ 22 | true, 23 | "spaces" 24 | ], 25 | "interface-over-type-literal": true, 26 | "label-position": true, 27 | "max-line-length": [ 28 | true, 29 | 140 30 | ], 31 | "member-access": false, 32 | "member-ordering": [ 33 | true, 34 | { 35 | "order": [ 36 | "static-field", 37 | "instance-field", 38 | "static-method", 39 | "instance-method" 40 | ] 41 | } 42 | ], 43 | "no-arg": true, 44 | "no-bitwise": true, 45 | "no-console": [ 46 | true, 47 | "debug", 48 | "info", 49 | "time", 50 | "timeEnd", 51 | "trace" 52 | ], 53 | "no-construct": true, 54 | "no-debugger": true, 55 | "no-duplicate-super": true, 56 | "no-empty": false, 57 | "no-empty-interface": true, 58 | "no-eval": true, 59 | "no-inferrable-types": [ 60 | true, 61 | "ignore-params" 62 | ], 63 | "no-misused-new": true, 64 | "no-non-null-assertion": true, 65 | "no-shadowed-variable": true, 66 | "no-string-literal": false, 67 | "no-string-throw": true, 68 | "no-switch-case-fall-through": true, 69 | "no-trailing-whitespace": true, 70 | "no-unnecessary-initializer": true, 71 | "no-unused-expression": true, 72 | "no-use-before-declare": true, 73 | "no-var-keyword": true, 74 | "object-literal-sort-keys": false, 75 | "one-line": [ 76 | true, 77 | "check-open-brace", 78 | "check-catch", 79 | "check-else", 80 | "check-whitespace" 81 | ], 82 | "prefer-const": true, 83 | "quotemark": [ 84 | true, 85 | "single" 86 | ], 87 | "radix": true, 88 | "semicolon": [ 89 | true, 90 | "always" 91 | ], 92 | "triple-equals": [ 93 | true, 94 | "allow-null-check" 95 | ], 96 | "typedef-whitespace": [ 97 | true, 98 | { 99 | "call-signature": "nospace", 100 | "index-signature": "nospace", 101 | "parameter": "nospace", 102 | "property-declaration": "nospace", 103 | "variable-declaration": "nospace" 104 | } 105 | ], 106 | "typeof-compare": true, 107 | "unified-signatures": true, 108 | "variable-name": false, 109 | "whitespace": [ 110 | true, 111 | "check-branch", 112 | "check-decl", 113 | "check-operator", 114 | "check-separator", 115 | "check-type" 116 | ], 117 | "directive-selector": [ 118 | true, 119 | "attribute", 120 | "app", 121 | "camelCase" 122 | ], 123 | "component-selector": [ 124 | true, 125 | "element", 126 | "app", 127 | "kebab-case" 128 | ], 129 | "use-input-property-decorator": true, 130 | "use-output-property-decorator": true, 131 | "use-host-property-decorator": true, 132 | "no-input-rename": true, 133 | "no-output-rename": true, 134 | "use-life-cycle-interface": true, 135 | "use-pipe-transform-interface": true, 136 | "component-class-suffix": true, 137 | "directive-class-suffix": true, 138 | "no-access-missing-member": true, 139 | "templates-use-public": true, 140 | "invoke-injectable": true 141 | } 142 | } 143 | --------------------------------------------------------------------------------