diff --git a/.gitignore b/.gitignore index dbaf57a..3d96de5 100644 --- a/.gitignore +++ b/.gitignore @@ -99,3 +99,5 @@ typings/ # next.js build output .next + +package-lock.json diff --git a/angular.json b/angular.json index 3ba8730..d53184a 100644 --- a/angular.json +++ b/angular.json @@ -8,7 +8,11 @@ "sourceRoot": "src", "projectType": "application", "prefix": "app", - "schematics": {}, + "schematics": { + "@schematics/angular:component": { + "styleext": "scss" + } + }, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", @@ -23,9 +27,15 @@ "src/assets" ], "styles": [ - "src/styles.css" + "src/sass/styles.scss", + "./node_modules/bootstrap/dist/css/bootstrap.css", + "./node_modules/bootstrap/dist/css/bootstrap-grid.css", + "./node_modules/bootstrap/dist/css/bootstrap-reboot.css" ], - "scripts": [] + "scripts": [ + "./node_modules/jquery/dist/jquery.min.js", + "./node_modules/bootstrap/dist/js/bootstrap.js" + ] }, "configurations": { "production": { diff --git a/package.json b/package.json index a12bf3c..d1a0109 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@angular/platform-browser": "^6.0.3", "@angular/platform-browser-dynamic": "^6.0.3", "@angular/router": "^6.0.3", + "bootstrap": "^4.2.1", "core-js": "^2.5.4", "rxjs": "^6.0.0", "zone.js": "^0.8.26" @@ -41,7 +42,7 @@ "karma-coverage-istanbul-reporter": "~2.0.0", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", - "protractor": "~5.3.0", + "protractor": "^5.4.2", "ts-node": "~5.0.1", "tslint": "~5.9.1", "typescript": "~2.7.2" diff --git a/src/app/app.component.html b/src/app/app.component.html index fa2706a..4f4d8dd 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,20 +1,2 @@ - -
-

- Welcome to {{ title }}! -

- Angular Logo -
-

Here are some links to help you start:

- + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 7b0f672..0b23d3c 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import * as $ from 'node_modules/jquery/dist/jquery'; @Component({ selector: 'app-root', @@ -7,4 +8,90 @@ import { Component } from '@angular/core'; }) export class AppComponent { title = 'app'; + + ngOnInit() { + $(document).ready(() => { + $('#sidebarCollapse').on('click', () => { + $('#sidebar').toggleClass('active'); + $('.hideable').toggleClass('hide'); + }); + $('#content nav div.collapse li a.nav-link i.far.fa-star').hover(() => { + $('#content nav div.collapse li a.nav-link i.far.fa-star').toggleClass('fas'); + }); + $('#content nav div.collapse li a.nav-link i.far.fa-trash-alt').hover(() => { + $('#content nav div.collapse li a.nav-link i.far.fa-trash-alt').toggleClass('fas'); + }); + $('#content nav div.collapse li a.nav-link i.far.fa-paper-plane').hover(() => { + $('#content nav div.collapse li a.nav-link i.far.fa-paper-plane').toggleClass('fas'); + }); + // $('#command').keyup((e) => { + // const code = (e.keyCode ? e.keyCode : e.which); + // if (code === 13) { + // $('#widgets').children().addClass('hide'); + // $('#successAlert').addClass('hide'); + // $('#dangetAlert').addClass('hide'); + // $('#intentBox').addClass('hide'); + // const command = document.getElementById('command').value; + // if (command) { + // const text = { text: command }; + // recastclient.getAndCallProcessIntent(command, text); + // } else { + // dom.showEmptyCommandMessage('Please type some relevant words in the command box.'); + // } + // } + // }); + $('#btnFavorites').click(() => { + + }); + $('#btnClearCommand').click(() => { + $('#command').val(''); + $('#command').focus(); + }); + function hitEnter(command) { + const commandInputField = $('#command'); + if (command) commandInputField.val(command); + const e = $.Event('keyup'); + e.which = 13; + commandInputField.focus(); + commandInputField.trigger(e); + } + $('#btnFireCommand').click(() => { + hitEnter(""); + }); + $('#hideInfoAlert').on('click', () => { + $('#intentBox').addClass('hide'); + }); + $('#hideSuccessAlert').on('click', () => { + $('#successAlert').addClass('hide'); + }); + $('#conversations').on('click', '.close', function () { + const $target = $(this).closest('.card'); + const line = $target.next(); + $target.hide('slow', () => { $target.remove(); }); + line.hide('slow', () => { line.remove(); }); + }); + $('#conversations').on('click', '.btn.btn-info.float-right', function () { + const parentText = $(this).closest('.card-text').text(); + const command = parentText.substring(0, parentText.indexOf('Repeat')); + hitEnter(command); + }); + $('#hideDangerAlert').on('click', () => { + $('#dangerAlert').addClass('hide'); + }); + // $('#git_bridge').on('click', () => { + // window.location.href = 'https://github.com/login/oauth/authorize?scope=user:email:repo&client_id=f6f649a1fe2dfea082ba'; + // }); + const localHistory = JSON.parse(window.localStorage.getItem('currentState')); + // window.onload = initOps(); + + function initOps() { + $('#command').focus(); + // dom.loadConversations(helper.concatenateAndSort(localHistory)); + } + if (window.location.href.match(/\?code=(.*)/)) { + const code = window.location.href.match(/\?code=(.*)/)[1]; + // app.getToken(code); + } + }); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f657163..63658c9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,14 +1,18 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; +import { SidebarComponent } from './components/l2/sidebar/sidebar.component'; @NgModule({ declarations: [ - AppComponent + AppComponent, + SidebarComponent ], imports: [ - BrowserModule + BrowserModule, + FormsModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/components/l2/sidebar/sidebar.component.html b/src/app/components/l2/sidebar/sidebar.component.html new file mode 100644 index 0000000..e820978 --- /dev/null +++ b/src/app/components/l2/sidebar/sidebar.component.html @@ -0,0 +1,70 @@ +
+ +
diff --git a/src/app/components/l2/sidebar/sidebar.component.scss b/src/app/components/l2/sidebar/sidebar.component.scss new file mode 100644 index 0000000..fc45b9b --- /dev/null +++ b/src/app/components/l2/sidebar/sidebar.component.scss @@ -0,0 +1,436 @@ +@import "./src/sass/_variables.scss"; + +a, +a:hover, +a:focus { + color: inherit; + text-decoration: none; + transition: all 0.3s; +} + +.navbar { + padding: 15px 10px; + background: #fff; + border: none; + border-radius: 0 5px 5px 0; + margin-bottom: 40px; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); +} + +.navbar-btn { + box-shadow: none; + outline: none !important; + border: none; +} + +.line { + width: 100%; + height: 1px; + border-bottom: 1px dashed #ddd; + margin: 20px 0; +} + +i, +span { + display: inline-block; +} + +/* --------------------------------------------------- + SIDEBAR STYLE +----------------------------------------------------- */ + +.wrapper { + display: flex; + align-items: stretch; +} + +#sidebar { + min-width: 250px; + max-width: 250px; + background: $theme-supplementer; + color: $themeColor-Dark; + transition: all 0.3s; +} + +#sidebar.active { + min-width: 80px; + max-width: 80px; + text-align: center; +} + +#sidebar.active .sidebar-header h3, +#sidebar.active .CTAs { + display: none; +} + +.sidebar-header h3 { + display: inline; + padding-left: 0.6em; + vertical-align: middle; +} + +#sidebar.active .sidebar-header strong { + display: block; +} + +#sidebar ul li a { + text-align: left; +} + +#sidebar.active ul li a { + padding: 20px 10px; + text-align: center; + font-size: 0.85em; +} + +#sidebar.active ul li a i { + margin-right: 0; + display: block; + font-size: 1.8em; + margin-bottom: 5px; +} + +#sidebar.active ul ul a { + padding: 10px !important; +} + +#sidebar.active .dropdown-toggle::after { + top: auto; + bottom: 10px; + right: 50%; + -webkit-transform: translateX(50%); + -ms-transform: translateX(50%); + transform: translateX(50%); +} + +#sidebar .sidebar-header { + padding: 20px; + background:$themeColor-Dark; +} + +#sidebar .sidebar-header strong { + display: none; + font-size: 1.8em; +} + +#sidebar ul.components { + padding: 20px 0; + border-bottom: 3px solid $themeColor-Dark; +} + +#sidebar ul li a { + padding: 10px; + font-size: 1.1em; + display: block; +} + +#sidebar ul li a:hover { + color: #7386D5; + background: #fff; +} + +#sidebar ul li a i { + margin-right: 10px; +} + +#sidebar ul li.active>a, +a[aria-expanded="true"] { + color: $theme-supplementer; + background:$themeColor-Dark; +} + +a[data-toggle="collapse"] { + position: relative; +} + +.dropdown-toggle::after { + display: block; + position: absolute; + top: 50%; + right: 20px; + transform: translateY(-50%); +} + +ul ul a { + font-size: 0.9em !important; + padding-left: 30px !important; + background: white; + font-weight: bolder; +} + +ul.CTAs { + padding: 20px; +} + +ul.CTAs a { + text-align: center; + font-size: 0.9em !important; + display: block; + border-radius: 5px; + margin-bottom: 5px; +} + +a.download { + background: #fff; + color: #7386D5; +} + +a.article, +a.article:hover { + background: #6d7fcc !important; + color: #fff !important; +} + +/* --------------------------------------------------- + CONTENT STYLE +----------------------------------------------------- */ + +#content { + width: 100%; + padding: 20px; + min-height: 100vh; + transition: all 0.3s; +} + +/* --------------------------------------------------- + MEDIAQUERIES +----------------------------------------------------- */ + +@media (max-width: 768px) { + #sidebar { + min-width: 80px; + max-width: 80px; + text-align: center; + margin-left: -80px !important; + } + .dropdown-toggle::after { + top: auto; + bottom: 10px; + right: 50%; + -webkit-transform: translateX(50%); + -ms-transform: translateX(50%); + transform: translateX(50%); + } + #sidebar.active { + margin-left: 0 !important; + } + #sidebar .sidebar-header h3, + #sidebar .CTAs { + display: none; + } + #sidebar .sidebar-header strong { + display: block; + } + #sidebar ul li a { + padding: 20px 10px; + } + #sidebar ul li a span { + font-size: 0.85em; + } + #sidebar ul li a i { + margin-right: 0; + display: block; + } + #sidebar ul ul a { + padding: 10px !important; + } + #sidebar ul li a i { + font-size: 1.3em; + } + #sidebar { + margin-left: 0; + } + #sidebarCollapse span { + display: none; + } + .text-muted { + color: #bcb !important; + } +} + +@media(min-width: 576px) { + .card-group>.card:first-child { + border-top-right-radius: .25rem; + border-bottom-right-radius: .25rem; + } + .card-group>.card:not(:first-child):not(:last-child):not(:only-child) { + border-radius: .25rem; + } + .card-group>.card:last-child { + border-top-left-radius: .25rem; + border-bottom-left-radius: .25rem; + } +} +/* ------------------------------------------------- +ADDITIONS +--------------------------------------------------*/ +.hide { + display: none; +} + +.prompt { + display: flex; + width: 2em; + border-right: 1px solid #c99034; + background-color: #f5d38b; + width: 4%; + margin-bottom: 40px; + border-radius: 4px 0 0 4px; +} + +.promptext { + animation:blinkingText 0.8s infinite; + color: #975f04; + text-align: center; + line-height: 2em; + font: 1.5em bolder; + margin: auto; +} + +.good { + animation: anim .3s ease-in-out; +} + +.repoLink { + color: #000; + font-weight: bolder; + text-decoration: underline; +} + +.headerprompt { + display: flex; + width: 100%; +} + +.logotext { + color: $theme-supplementer; +} + +#content nav div.collapse li a.nav-link i.far { + color: $theme-supplementer; + font-size: 1.8em; + padding: 0.2em; +} + +#loading-img { + background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat; + height: 100%; + z-index: 20; +} + +.overlay { + background: #e9e9e9; + display: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 0.5; +} + +.loader { + border: 0px solid #f3f3f3; + border-radius: 50%; + border-top: 2px solid #3498db; + border-right: 2px solid #3498db; + width: 20px; + height: 20px; + -webkit-animation: spin 2s linear infinite; /* Safari */ + animation: spin 2s linear infinite; + } +.card:not(.widget) { + background: linear-gradient(to right, white, lightblue) +} +.light-red { + // background:linear-gradient(white, lightblue); + background: linear-gradient(to right, white, #dfc99a) +} + +// f3d98c +.featureRequest { + background-color : #007bff; + color: white; + font-size: 1.5em; + padding: 10px 20px; + border-radius: 30px; +} + + #featureRequest { + position: fixed; + bottom: 2em; + right: 2.5em; + } + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +@keyframes anim { + 0% { + display: none; + opacity: 0; + } + 1% { + display: block; + opacity: 0; + transform: scale(0); + } + 100% { + opacity: 1; + transform: scale(1); + } +} +@keyframes blinkingText { + 0%{ color: #000; } + 49%{ color: transparent; } + 50%{ color: transparent; } + 99%{ color:transparent; } + 100%{ color: #000; } +} + +/* -------------------------------------------------- + OVERRIDES + --------------------------------------------------*/ + .btn:not(.featureRequest) { + background-color: $theme-supplementer; + color: $themeColor-Dark + } + + #content #header .navbar { + width: 96%; + } + + .navbar-form { + width: 88%; + } + + .form-control { + padding: .6rem 1em; + } + + .container-fluid { + padding-left: 0.3em; + } + + .card-group { + flex-direction:column; + } + + #command.form-control { + width: 87%; + } + + .ml-auto { + margin-left: 0!important; + } + + .btn-info { + border-color: orange; + } + + .btn-info:hover { + border-color: orange; + opacity: 1 +} \ No newline at end of file diff --git a/src/app/components/l2/sidebar/sidebar.component.spec.ts b/src/app/components/l2/sidebar/sidebar.component.spec.ts new file mode 100644 index 0000000..f29709f --- /dev/null +++ b/src/app/components/l2/sidebar/sidebar.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SidebarComponent } from './sidebar.component'; + +describe('SidebarComponent', () => { + let component: SidebarComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SidebarComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SidebarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/l2/sidebar/sidebar.component.ts b/src/app/components/l2/sidebar/sidebar.component.ts new file mode 100644 index 0000000..60de369 --- /dev/null +++ b/src/app/components/l2/sidebar/sidebar.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-sidebar', + templateUrl: './sidebar.component.html', + styleUrls: ['./sidebar.component.scss'] +}) +export class SidebarComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/index.html b/src/index.html index 836c1e2..7d00428 100644 --- a/src/index.html +++ b/src/index.html @@ -7,6 +7,9 @@ + + diff --git a/src/sass/_mixins.scss b/src/sass/_mixins.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss new file mode 100644 index 0000000..291175d --- /dev/null +++ b/src/sass/_variables.scss @@ -0,0 +1,4 @@ +$themeColor-Light: #f3e2c7; +$themeColor-Dark:#252525; +$theme-font: verdana, sans-serif; +$theme-supplementer: #f39c12; \ No newline at end of file diff --git a/src/sass/styles.scss b/src/sass/styles.scss new file mode 100644 index 0000000..f30ba95 --- /dev/null +++ b/src/sass/styles.scss @@ -0,0 +1,19 @@ +@import "./src/sass/_variables.scss"; + +html { + height: 100%; +} + +body { + font-family: 'Poppins', sans-serif; + background-color: $themeColor-Dark; + min-height: 100%; +} + +p { + font-family: 'Poppins', sans-serif; + font-size: 1.1em; + font-weight: 300; + line-height: 1.7em; + // color: #999; +} \ No newline at end of file