Skip to content

Commit

Permalink
added split screen markdown editor with code mirror and showdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@gaccettola
gaccettola committed Apr 16, 2017
1 parent b43590f commit af0c52a
Show file tree
Hide file tree
Showing 20 changed files with 2,144 additions and 324 deletions.
11 changes: 11 additions & 0 deletions client_desktop/source/src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ import { DesignerComponentPropTerminal } from '../pages/designer/designer.com

import { DesignerService } from '../pages/designer/designer.component.service';

import { EditorComponent } from '../pages/editor/editor.component';

import { SettingsComponent } from '../pages/settings/settings.component';

import { AuthenticatedGuardAll } from '../services/authenticated.guard.all';
Expand All @@ -58,6 +60,10 @@ import { AuthenticatedGuardLogin } from '../services/authenticated.guar
import { AuthenticatedResolveAll } from '../services/authenticated.resolve.all';
import { AuthenticatedResolveLogin } from '../services/authenticated.resolve.login';

import { CodemirrorComponent } from '../controls/ngCodeMirror/codemirror.component';

import { MdModule } from 'ng2-md';

@NgModule (
{
declarations :
Expand All @@ -71,12 +77,15 @@ import { AuthenticatedResolveLogin } from '../services/authenticated.reso
, DashboardComponent
, MailComponent
, DesignerComponent

, DesignerComponentPropBase
, DesignerComponentPropCanvas
, DesignerComponentPropConnector
, DesignerComponentPropItem
, DesignerComponentPropTerminal
, EditorComponent
, SettingsComponent
, CodemirrorComponent
],
imports :
[
Expand All @@ -87,6 +96,8 @@ import { AuthenticatedResolveLogin } from '../services/authenticated.reso
, MaterialModule
, FlexLayoutModule
, AppRouting

, MdModule
],
providers :
[
Expand Down
10 changes: 10 additions & 0 deletions client_desktop/source/src/app/app.routing.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { RouterModule } from '@angular/router';
import { LoginComponent } from '../pages/login/login.component';
import { DashboardComponent } from '../pages/dashboard/dashboard.component';
import { DesignerComponent } from '../pages/designer/designer.component.base';
import { EditorComponent } from '../pages/editor/editor.component';
import { MailComponent } from '../pages/mail/mail.component';
import { SettingsComponent } from '../pages/settings/settings.component';

Expand Down Expand Up @@ -43,6 +44,15 @@ const appRoutes: any[] =
token : AuthenticatedResolveAll
}
},
{
path : 'editor',
component : EditorComponent,
canActivate : [ AuthenticatedGuardAll ],
resolve :
{
token : AuthenticatedResolveAll
}
},
{
path : 'mail',
component : MailComponent,
Expand Down
159 changes: 1 addition & 158 deletions client_desktop/source/src/pages/designer/designer.component.base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
[style.height]="current_height"
[style.min-height]="current_height" >

<div fxLayout="row" fxFlex class="component-view">
<div fxLayout="row" fxFlex class="designer-background">

<div fxLayout="column" class="designer-host" fxFlex >

Expand Down Expand Up @@ -64,7 +64,6 @@
[(ngModel)]="selected_cy" >
</md-input-container>


<div class="designer-host-toolbar-host" *ngIf="uiInstance.hide_properties"
(click)="on_show_properties ( )" >
<md-icon class="designer-host-toolbar-icon">chevron_left</md-icon>
Expand All @@ -83,162 +82,6 @@
(mousemove)="on_background_mousemove ( $event )"
(mouseup)="on_background_mouseup ( $event )">

<defs>
<filter id="shadow-2dp" x="-50%" y="-100%" width="200%" height="300%">
<feOffset in="SourceAlpha" result="offA" dy="2" />
<feOffset in="SourceAlpha" result="offB" dy="1" />
<feOffset in="SourceAlpha" result="offC" dy="3" />
<feMorphology in="offC" result="spreadC" operator="erode" radius="2" />
<feGaussianBlur in="offA" result="blurA" stdDeviation="1" /><!--2px 0-->
<feGaussianBlur in="offB" result="blurB" stdDeviation="2.5" /><!--5px 0-->
<feGaussianBlur in="spreadC" result="blurC" stdDeviation="0.5" /><!--1px -2px-->
<feFlood flood-opacity="0.14" result="opA" />
<feFlood flood-opacity="0.12" result="opB" />
<feFlood flood-opacity="0.20" result="opC" />
<feComposite in="opA" in2="blurA" result="shA" operator="in" />
<feComposite in="opB" in2="blurB" result="shB" operator="in" />
<feComposite in="opC" in2="blurC" result="shC" operator="in" />
<feMerge>
<feMergeNode in="shA" />
<feMergeNode in="shB" />
<feMergeNode in="shC" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="shadow-3dp" x="-50%" y="-100%" width="200%" height="300%">
<feOffset in="SourceAlpha" result="offA" dy="3" />
<feOffset in="SourceAlpha" result="offB" dy="1" />
<feOffset in="SourceAlpha" result="offC" dy="3" />
<feMorphology in="offC" result="spreadC" operator="erode" radius="2" />
<feGaussianBlur in="offA" result="blurA" stdDeviation="2" /><!--4px 0-->
<feGaussianBlur in="offB" result="blurB" stdDeviation="4" /><!--8px 0-->
<feGaussianBlur in="spreadC" result="blurC" stdDeviation="1.5" /><!--3px -2px-->
<feFlood flood-opacity="0.14" result="opA" />
<feFlood flood-opacity="0.12" result="opB" />
<feFlood flood-opacity="0.40" result="opC" />
<feComposite in="opA" in2="blurA" result="shA" operator="in" />
<feComposite in="opB" in2="blurB" result="shB" operator="in" />
<feComposite in="opC" in2="blurC" result="shC" operator="in" />
<feMerge>
<feMergeNode in="shA" />
<feMergeNode in="shB" />
<feMergeNode in="shC" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="shadow-4dp" x="-50%" y="-100%" width="200%" height="300%">
<feOffset in="SourceAlpha" result="offA" dy="4" />
<feOffset in="SourceAlpha" result="offB" dy="1" />
<feOffset in="SourceAlpha" result="offC" dy="2" />
<feMorphology in="offC" result="spreadC" operator="erode" radius="1" />
<feGaussianBlur in="offA" result="blurA" stdDeviation="2.5" /><!--5px 0-->
<feGaussianBlur in="offB" result="blurB" stdDeviation="5" /><!--10px 0-->
<feGaussianBlur in="spreadC" result="blurC" stdDeviation="2" /><!--4px -1px-->
<feFlood flood-opacity="0.14" result="opA" />
<feFlood flood-opacity="0.12" result="opB" />
<feFlood flood-opacity="0.40" result="opC" />
<feComposite in="opA" in2="blurA" result="shA" operator="in" />
<feComposite in="opB" in2="blurB" result="shB" operator="in" />
<feComposite in="opC" in2="blurC" result="shC" operator="in" />
<feMerge>
<feMergeNode in="shA" />
<feMergeNode in="shB" />
<feMergeNode in="shC" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="shadow-6dp" x="-50%" y="-100%" width="200%" height="300%">
<feOffset in="SourceAlpha" result="offA" dy="6" />
<feOffset in="SourceAlpha" result="offB" dy="1" />
<feOffset in="SourceAlpha" result="offC" dy="3" />
<feMorphology in="offC" result="spreadC" operator="erode" radius="1" />
<feGaussianBlur in="offA" result="blurA" stdDeviation="5" /><!--10px 0-->
<feGaussianBlur in="offB" result="blurB" stdDeviation="9" /><!--18px 0-->
<feGaussianBlur in="spreadC" result="blurC" stdDeviation="2.5" /><!--5px -1px-->
<feFlood flood-opacity="0.14" result="opA" />
<feFlood flood-opacity="0.12" result="opB" />
<feFlood flood-opacity="0.40" result="opC" />
<feComposite in="opA" in2="blurA" result="shA" operator="in" />
<feComposite in="opB" in2="blurB" result="shB" operator="in" />
<feComposite in="opC" in2="blurC" result="shC" operator="in" />
<feMerge>
<feMergeNode in="shA" />
<feMergeNode in="shB" />
<feMergeNode in="shC" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="shadow-8dp" x="-50%" y="-100%" width="200%" height="300%">
<feOffset in="SourceAlpha" result="offA" dy="8" />
<feOffset in="SourceAlpha" result="offB" dy="3" />
<feOffset in="SourceAlpha" result="offC" dy="5" />
<feMorphology in="offA" result="spreadA" operator="dilate" radius="1" />
<feMorphology in="offB" result="spreadB" operator="dilate" radius="2" />
<feMorphology in="offC" result="spreadC" operator="erode" radius="3" />
<feGaussianBlur in="spreadA" result="blurA" stdDeviation="5" /><!--10px 1px-->
<feGaussianBlur in="spreadB" result="blurB" stdDeviation="7" /><!--14px 2px-->
<feGaussianBlur in="spreadC" result="blurC" stdDeviation="2.5" /><!--5px -3px-->
<feFlood flood-opacity="0.14" result="opA" />
<feFlood flood-opacity="0.12" result="opB" />
<feFlood flood-opacity="0.40" result="opC" />
<feComposite in="opA" in2="blurA" result="shA" operator="in" />
<feComposite in="opB" in2="blurB" result="shB" operator="in" />
<feComposite in="opC" in2="blurC" result="shC" operator="in" />
<feMerge>
<feMergeNode in="shA" />
<feMergeNode in="shB" />
<feMergeNode in="shC" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="shadow-12dp" x="-50%" y="-100%" width="200%" height="300%">
<feOffset in="SourceAlpha" result="offA" dy="12" />
<feOffset in="SourceAlpha" result="offB" dy="4" />
<feOffset in="SourceAlpha" result="offC" dy="6" />
<feMorphology in="offA" result="spreadA" operator="dilate" radius="1" />
<feMorphology in="offB" result="spreadB" operator="dilate" radius="3" />
<feMorphology in="offC" result="spreadC" operator="erode" radius="4" />
<feGaussianBlur in="spreadA" result="blurA" stdDeviation="8" /><!--16px 1px-->
<feGaussianBlur in="spreadB" result="blurB" stdDeviation="11" /><!--22px 3px-->
<feGaussianBlur in="spreadC" result="blurC" stdDeviation="3.5" /><!--7px -4px-->
<feFlood flood-opacity="0.14" result="opA" />
<feFlood flood-opacity="0.12" result="opB" />
<feFlood flood-opacity="0.40" result="opC" />
<feComposite in="opA" in2="blurA" result="shA" operator="in" />
<feComposite in="opB" in2="blurB" result="shB" operator="in" />
<feComposite in="opC" in2="blurC" result="shC" operator="in" />
<feMerge>
<feMergeNode in="shA" />
<feMergeNode in="shB" />
<feMergeNode in="shC" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="shadow-16dp" x="-50%" y="-100%" width="200%" height="300%">
<feOffset in="SourceAlpha" result="offA" dy="16" />
<feOffset in="SourceAlpha" result="offB" dy="6" />
<feOffset in="SourceAlpha" result="offC" dy="8" />
<feMorphology in="offA" result="spreadA" operator="dilate" radius="2" />
<feMorphology in="offB" result="spreadB" operator="dilate" radius="5" />
<feMorphology in="offC" result="spreadC" operator="erode" radius="5" />
<feGaussianBlur in="spreadA" result="blurA" stdDeviation="12" /><!--24px 2px-->
<feGaussianBlur in="spreadB" result="blurB" stdDeviation="15" /><!--30px 5px-->
<feGaussianBlur in="spreadC" result="blurC" stdDeviation="5" /><!--10px -5px-->
<feFlood flood-opacity="0.14" result="opA" />
<feFlood flood-opacity="0.12" result="opB" />
<feFlood flood-opacity="0.40" result="opC" />
<feComposite in="opA" in2="blurA" result="shA" operator="in" />
<feComposite in="opB" in2="blurB" result="shB" operator="in" />
<feComposite in="opC" in2="blurC" result="shC" operator="in" />
<feMerge>
<feMergeNode in="shA" />
<feMergeNode in="shB" />
<feMergeNode in="shC" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>

<g *ngFor="let item_conn of uiInstance.listof_item_conn">

<path class="designer-item-connection designer-item-connection-line"
Expand Down
7 changes: 7 additions & 0 deletions client_desktop/source/src/pages/designer/designer.component.base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@ $danger: #f53d3d;
$light: #f4f4f4;
$dark: #222;

.designer-background {

background: white;
//display: inline-block;
//position: relative;
}

.designer-host {

}
Expand Down
64 changes: 64 additions & 0 deletions client_desktop/source/src/pages/editor/editor.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@

<!--class="flex-container-row "-->
<!--class="flex-container-row complete-width"-->

<!--class="flex-container-col "-->
<!--class="flex-container-col complete-height"-->

<!--fxLayout="column" fxFlex-->

<div class="flex-container-col complete-height"
[style.height]="current_height"
[style.min-height]="current_height" >

<div fxLayout="row" class="editor-host-toolbar">

<md-input-container class="editor-host-toolbar-title"
(change)="on_change_editor_title($event)" >
<input mdInput type="text" min="0" max="9999"
[(ngModel)]="doc.title" >
</md-input-container>

<span fxFlex></span>

<div fxLayout="row" class="editor-host-toolbar-slide" >
<div fxLayout="column" class="editor-host-toolbar-slide-label" fxFlex>{{view_mode_label}}
</div>
<div fxLayout="column" class="editor-host-toolbar-slide-ctrl" >
<md-slider min="1" max="3" step="1"
[(ngModel)]="editor_config.view_mode"
(click)="on_toggle_preview ( )">
</md-slider>
</div>
</div>

</div>

<div fxLayout="row" fxFlex class="editor-background">

<div *ngIf="editor_config.view_mode===1||editor_config.view_mode===3"
class="editor-area-pad"></div>

<codemirror fxLayout="column" fxFlex="50"
[ngClass]="{'hide-panel': editor_config.view_mode===3}"
class="card editor-area"
[(ngModel)]="codemirror_code"
[config]="codemirror_config"
(focus)="onCodeMirrorEditorFocused($event)"
(change)="onCodeMirrorEditorChanged($event)"
(blur)="onCodeMirrorEditorBlur($event)" >
</codemirror>

<!--[innerHTML]="inner_html_md"-->
<div fxLayout="column" fxFlex="50"
class="card editor-preview markdown-body"
[ngClass]="{'hide-panel': editor_config.view_mode===1}"
[md]="inner_html_md" [options]="options" >
</div>

<div *ngIf="editor_config.view_mode===1||editor_config.view_mode===3"
class="editor-area-pad"></div>

</div>

</div>
Loading

0 comments on commit af0c52a

Please sign in to comment.