From 2838964596dd7632a92cb184aa12ec60c37d650d Mon Sep 17 00:00:00 2001 From: David Cocom Date: Wed, 25 Jan 2017 10:48:50 -0600 Subject: [PATCH] Style details and small features updated. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Animation just loads once - Adding delete flow functionality - Adding new icons to fonts - Adding animation to menu open at navbar - Hiding not implemented options - Flows now are displayed in alphabetical order - Fixed height on header at flow diagram - Added test for flow list alphabetical order - Adding ‘Import / Export’ icons - Changed icon from download to import - Hiding ‘Import & Export’ options in app details - Changing SVG file to icon - Code refactor --- .../components/application.component.less | 1 + .../components/application.component.ts | 6 ++ .../components/application.tpl.html | 3 +- .../components/container.component.ts | 6 ++ .../components/container.tpl.html | 1 + .../components/flows.component.less | 8 ++- .../components/flows.component.spec.ts | 51 +++++++++++++++-- .../components/flows.component.ts | 33 ++++++++--- .../components/flows.tpl.html | 18 ++++-- .../components/app.list.tpl.html | 4 +- .../components/main.component.ts | 52 +++++++++++++----- .../flogo.apps.main/components/main.tpl.html | 2 +- .../components/canvas.component.less | 36 ++++++------ .../components/canvas.component.ts | 21 +++++++ .../components/canvas.tpl.html | 5 +- .../components/import-flow.tpl.html | 2 +- .../flogo/components/navbar.component.less | 9 ++- src/client/assets/flogo-icons.less | 48 ++++++++++------ src/client/assets/fonts/flogo-icon.eot | Bin 4380 -> 5156 bytes src/client/assets/fonts/flogo-icon.svg | 30 +++++----- src/client/assets/fonts/flogo-icon.ttf | Bin 4204 -> 4980 bytes src/client/assets/fonts/flogo-icon.woff | Bin 4280 -> 5056 bytes src/client/assets/main.less | 27 ++++++--- .../flogo.flows.detail.menu.hover.icon.svg | 15 ----- .../svg/flogo.flows.detail.menu.icon.svg | 15 ----- src/client/i18n/en.json | 4 ++ 26 files changed, 268 insertions(+), 129 deletions(-) delete mode 100644 src/client/assets/svg/flogo.flows.detail.menu.hover.icon.svg delete mode 100644 src/client/assets/svg/flogo.flows.detail.menu.icon.svg diff --git a/src/client/app/flogo.apps.details/components/application.component.less b/src/client/app/flogo.apps.details/components/application.component.less index 2eee7fd8c..86e983037 100644 --- a/src/client/app/flogo.apps.details/components/application.component.less +++ b/src/client/app/flogo.apps.details/components/application.component.less @@ -72,6 +72,7 @@ text-transform: uppercase; min-width: 124px; height: 40px; + display: none; &:nth-child(2) { margin: 0 15px; } diff --git a/src/client/app/flogo.apps.details/components/application.component.ts b/src/client/app/flogo.apps.details/components/application.component.ts index c1dd619a4..f3d7e9b91 100644 --- a/src/client/app/flogo.apps.details/components/application.component.ts +++ b/src/client/app/flogo.apps.details/components/application.component.ts @@ -1,4 +1,5 @@ import { Component, Input, Output, SimpleChanges, OnChanges, OnInit, ViewChild, EventEmitter } from '@angular/core'; + import { TranslateService } from 'ng2-translate/ng2-translate'; import { IFlogoApplicationModel, IFlogoApplicationFlowModel } from '../../../common/application.model'; import { AppDetailService, ApplicationDetail, ApplicationDetailState } from '../../flogo.apps/services/apps.service'; @@ -22,6 +23,7 @@ export class FlogoApplicationComponent implements OnChanges, OnInit { @Output() flowSelected: EventEmitter = new EventEmitter(); @Output() flowAdded: EventEmitter = new EventEmitter(); + @Output() flowDeleted: EventEmitter = new EventEmitter(); @Output() onDeletedApp: EventEmitter = new EventEmitter(); application: IFlogoApplicationModel; @@ -128,6 +130,10 @@ export class FlogoApplicationComponent implements OnChanges, OnInit { this.flowSelected.emit(flow); } + onFlowDelete(flow){ + this.flowDeleted.emit(flow); + } + onFlowImportSuccess(result: any) { let message = this.translate.instant('FLOWS:SUCCESS-MESSAGE-IMPORT'); notification(message, 'success', 3000); diff --git a/src/client/app/flogo.apps.details/components/application.tpl.html b/src/client/app/flogo.apps.details/components/application.tpl.html index 830e8b2fe..f08d5ea6b 100644 --- a/src/client/app/flogo.apps.details/components/application.tpl.html +++ b/src/client/app/flogo.apps.details/components/application.tpl.html @@ -49,6 +49,7 @@
+
  • @@ -90,7 +91,7 @@
    - +
diff --git a/src/client/app/flogo.apps.details/components/container.component.ts b/src/client/app/flogo.apps.details/components/container.component.ts index 202a789a1..bdc929330 100644 --- a/src/client/app/flogo.apps.details/components/container.component.ts +++ b/src/client/app/flogo.apps.details/components/container.component.ts @@ -71,6 +71,12 @@ export class FlogoApplicationContainerComponent implements OnInit, OnDestroy { this.appService.reload(); } + public onFlowDeleted(flow){ + this.flowsService.deleteFlow(flow.id).then(()=>{ + this.appService.reload(); + }); + } + private initSubscribe() { this.subscriptions = [ this.postService.subscribe(_.assign({}, SUB_EVENTS.addFlow, { callback: this.onAddFlow.bind(this) })) diff --git a/src/client/app/flogo.apps.details/components/container.tpl.html b/src/client/app/flogo.apps.details/components/container.tpl.html index a0cdd1f2d..63b246418 100644 --- a/src/client/app/flogo.apps.details/components/container.tpl.html +++ b/src/client/app/flogo.apps.details/components/container.tpl.html @@ -1,3 +1,4 @@ diff --git a/src/client/app/flogo.apps.flows/components/flows.component.less b/src/client/app/flogo.apps.flows/components/flows.component.less index c1d232105..b9320ad53 100644 --- a/src/client/app/flogo.apps.flows/components/flows.component.less +++ b/src/client/app/flogo.apps.flows/components/flows.component.less @@ -1,3 +1,4 @@ +@import "_variables"; .flogo-flow { position: relative; opacity: 0; @@ -75,7 +76,6 @@ position: absolute; top: -7px; right: 15px; - height: 94px; width: 129px; z-index: 1; transform: scale(0, 0); @@ -91,8 +91,12 @@ list-style: none; font-size: .875em; margin: 0; + padding: 0; .flogo-flow-menu__options__list__element { - padding: 3px 0; + padding: 3px 0 5px 20px; + &:hover{ + color: @color-secondary; + } } } } diff --git a/src/client/app/flogo.apps.flows/components/flows.component.spec.ts b/src/client/app/flogo.apps.flows/components/flows.component.spec.ts index cc825974c..2eae5a524 100644 --- a/src/client/app/flogo.apps.flows/components/flows.component.spec.ts +++ b/src/client/app/flogo.apps.flows/components/flows.component.spec.ts @@ -5,6 +5,7 @@ import {TranslateModule, TranslateLoader, TranslateStaticLoader} from 'ng2-trans import {ModalComponent} from 'ng2-bs3-modal/ng2-bs3-modal'; import {Http} from '@angular/http'; import {FlogoApplicationFlowsComponent} from './flows.component'; +import { FlogoModal } from '../../../common/services/modal.service'; @Component({ selector: 'container', @@ -17,6 +18,33 @@ import {FlogoApplicationFlowsComponent} from './flows.component'; class Container { @Output() changes = new EventEmitter(); flows: Array = [ + { + id: '879', + name: 'Log temperature', + description: 'A complex flow for apietusam faccum esequi berum. Hentias porerum ent omniend itatempoer porem uga. Luptati optaquisist quibus rem quam unt', + createdAt: new Date() + }, + { + id: '869', + name: 'Log temperature 2', + description: 'A complex flow for apietusam faccum esequi berum. Hentias porerum ent omniend itatempoer porem uga. Luptati optaquisist quibus rem quam unt', + createdAt: new Date() + }, + { + id: '897', + name: 'Manually adjust temperature', + description: 'A flow for apietusam faccum esequi berum. Hentias porerum ent omniend itatempoer porem uga. Luptati optaquisist quibus rem quam unt Hentias porerum ent omniend itatempoer porem uga. Luptati optaquisist quibus rem quam unt Luptas oilsksd as asdfwo', + createdAt: new Date() + }, + { + id: '987', + name: 'Raise temperature & notifiy operator', + description: 'A basic flow for apietusam', + createdAt: new Date() + } + ]; + + flowsDisorder: Array = [ { id: '897', name: 'Manually adjust temperature', @@ -37,7 +65,7 @@ class Container { }, { id: '869', - name: 'Log temperature 2', + name: 'Try to find pet', description: 'A complex flow for apietusam faccum esequi berum. Hentias porerum ent omniend itatempoer porem uga. Luptati optaquisist quibus rem quam unt', createdAt: new Date() } @@ -63,10 +91,25 @@ describe('Application flows', () => { useFactory: (http: Http) => new TranslateStaticLoader(http, '/base/dist/public/assets/i18n', '.json'), deps: [Http] })], - declarations: [ FlogoApplicationFlowsComponent, ModalComponent, Container ] // declare the test component + declarations: [ FlogoApplicationFlowsComponent, ModalComponent, Container ], // declare the test component + providers: [FlogoModal] }); }); + it('Should order the flows in alphabetical order', done => { + compileComponent() + .then(() => { + fixture = TestBed.createComponent(Container); + let comp = fixture.componentInstance; + comp.flows = comp.flowsDisorder; + fixture.detectChanges(); + let res = fixture.debugElement.queryAll(By.css('.flogo-flow-name')); + let nameList = res.map(element => element.nativeElement.innerHTML); + expect(nameList).toEqual(['Log temperature', 'Manually adjust temperature', 'Raise temperature & notifiy operator', 'Try to find pet']); + done(); + }); + }); + it('Should render 4 flows', done => { compileComponent() .then(() => { @@ -85,7 +128,7 @@ describe('Application flows', () => { fixture.detectChanges(); de = fixture.debugElement.query(By.css('.flogo-flow-name:nth-of-type(1)')); el = de.nativeElement; - expect(el.innerText).toEqual('Manually Adjust Temperature'); + expect(el.innerText).toEqual('Log Temperature'); done(); }); }); @@ -96,7 +139,7 @@ describe('Application flows', () => { fixture = TestBed.createComponent(Container); fixture.detectChanges(); let res: Array = fixture.debugElement.queryAll(By.css('.flogo-flow-description')); - el = res[1].nativeElement; + el = res[3].nativeElement; expect(el.innerText).toEqual('A basic flow for apietusam'); done(); }); diff --git a/src/client/app/flogo.apps.flows/components/flows.component.ts b/src/client/app/flogo.apps.flows/components/flows.component.ts index c5eeed6ac..7f4f5d8b1 100644 --- a/src/client/app/flogo.apps.flows/components/flows.component.ts +++ b/src/client/app/flogo.apps.flows/components/flows.component.ts @@ -1,7 +1,7 @@ -import { Component, Input, Output, EventEmitter } from '@angular/core'; -import { TranslateService } from 'ng2-translate/ng2-translate'; - -import { IFlogoApplicationFlowModel as FlowModel } from './../../../common/application.model'; +import {Component, Input, Output, EventEmitter, OnChanges, SimpleChanges} from '@angular/core'; +import {TranslateService} from 'ng2-translate/ng2-translate'; +import { FlogoModal } from '../../../common/services/modal.service'; +import {IFlogoApplicationFlowModel as FlowModel} from './../../../common/application.model'; @Component({ selector: 'flogo-apps-flows', @@ -9,17 +9,36 @@ import { IFlogoApplicationFlowModel as FlowModel } from './../../../common/appli templateUrl: 'flows.tpl.html', styleUrls: ['flows.component.css'] }) -export class FlogoApplicationFlowsComponent { +export class FlogoApplicationFlowsComponent implements OnChanges{ @Input() public flows: Array = []; @Output() public flowSelected: EventEmitter = new EventEmitter(); + @Output() + public deleteFlow: EventEmitter = new EventEmitter(); + + constructor(public translate: TranslateService, public flogoModal: FlogoModal) { + } - constructor(public translate: TranslateService) { + ngOnChanges(changes:SimpleChanges){ + this.flows = _.sortBy(this.flows, flow => flow.name.toLowerCase()); } - select(flow: FlowModel) { + trackByFlowId(index: number, flow: FlowModel) { + return flow ? flow.id : null; + } + + onSelect(flow: FlowModel) { this.flowSelected.emit(flow); } + onDeleteFlow(event: Event, flow: FlowModel) { + event.stopPropagation(); + let message = this.translate.instant('FLOWS:CONFIRM_DELETE', {flowName: flow.name}); + this.flogoModal.confirmDelete(message).then((res) => { + if (res) { + this.deleteFlow.emit(flow); + } + }); + } } diff --git a/src/client/app/flogo.apps.flows/components/flows.tpl.html b/src/client/app/flogo.apps.flows/components/flows.tpl.html index 54f5dba33..d46a313b2 100644 --- a/src/client/app/flogo.apps.flows/components/flows.tpl.html +++ b/src/client/app/flogo.apps.flows/components/flows.tpl.html @@ -1,4 +1,5 @@ -
+
@@ -10,18 +11,23 @@
    + +
  • + + {{ 'FLOWS:OPTION-DELETE' | translate}}
- +
diff --git a/src/client/app/flogo.apps.list/components/app.list.tpl.html b/src/client/app/flogo.apps.list/components/app.list.tpl.html index f4ad4c98b..67a6e152c 100644 --- a/src/client/app/flogo.apps.list/components/app.list.tpl.html +++ b/src/client/app/flogo.apps.list/components/app.list.tpl.html @@ -3,9 +3,11 @@
{{ 'APP-LIST:MY-APPS' | translate }}
+
diff --git a/src/client/app/flogo.apps.main/components/main.component.ts b/src/client/app/flogo.apps.main/components/main.component.ts index 5ca3594fb..c8676a448 100644 --- a/src/client/app/flogo.apps.main/components/main.component.ts +++ b/src/client/app/flogo.apps.main/components/main.component.ts @@ -2,9 +2,11 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { RESTAPIApplicationsService } from '../../../common/services/restapi/applications-api.service'; import { IFlogoApplicationModel, IFlogoApplicationFlowModel } from '../../../common/application.model'; +import { RESTAPIFlowsService } from '../../../common/services/restapi/flows-api.service'; +import { TranslateService } from 'ng2-translate/ng2-translate'; import { FlogoModal } from '../../../common/services/modal.service'; -import {flogoIDEncode} from "../../../common/utils"; +import { flogoIDEncode, notification } from "../../../common/utils"; @Component( { @@ -22,24 +24,14 @@ export class FlogoMainComponent implements OnInit { constructor( private _flogoModal: FlogoModal, private router: Router, + public translate: TranslateService, + private flowsService: RESTAPIFlowsService, public applicationServiceAPI: RESTAPIApplicationsService ) { } ngOnInit() { - this.applicationServiceAPI.recentFlows() - .then((flows: Array)=> { - flows = flows.length <= 3 ? flows : flows.slice(0,3); - flows.forEach(flow=>{flow.encodedId = flogoIDEncode(flow.id)}); - this.recent = flows; - }); - - this.applicationServiceAPI.allFlows() - .then((flows: Array)=> { - this.originalFlows = flows; - this.flows = this.getOriginalFlows(); - }); - + this.loadFlows(); } onChangedSearch(search) { @@ -66,8 +58,40 @@ export class FlogoMainComponent implements OnInit { }); } + loadFlows() { + this.applicationServiceAPI.recentFlows() + .then((flows: Array) => { + flows = flows.length <= 3 ? flows : flows.slice(0, 3); + flows.forEach(flow => { + flow.encodedId = flogoIDEncode(flow.id) + }); + this.recent = flows; + }); + + this.applicationServiceAPI.allFlows() + .then((flows: Array) => { + this.originalFlows = flows; + this.flows = this.getOriginalFlows(); + }); + } + onFlowSelected(flow) { this.router.navigate(['/flows', flogoIDEncode(flow._id)]); } + onFlowDeleted(flow) { + this.flowsService.deleteFlow(flow._id) + .then(() => { + let message = this.translate.instant('FLOWS:SUCCESS-MESSAGE-FLOW-DELETED'); + notification(message, 'success', 3000) + }) + .then(() => { + this.loadFlows(); + }) + .catch(err => { + let message = this.translate.instant('FLOWS:ERROR-MESSAGE-REMOVE-FLOW', err); + notification(message, 'error', 3000); + console.error(err); + }) + } } diff --git a/src/client/app/flogo.apps.main/components/main.tpl.html b/src/client/app/flogo.apps.main/components/main.tpl.html index bcf0ba9ea..d37479f6f 100644 --- a/src/client/app/flogo.apps.main/components/main.tpl.html +++ b/src/client/app/flogo.apps.main/components/main.tpl.html @@ -42,7 +42,7 @@

{{ 'FLOWS:ALL' | translate }}

- + diff --git a/src/client/app/flogo.flows.detail/components/canvas.component.less b/src/client/app/flogo.flows.detail/components/canvas.component.less index dbda62cf5..ce8a0b2fa 100644 --- a/src/client/app/flogo.flows.detail/components/canvas.component.less +++ b/src/client/app/flogo.flows.detail/components/canvas.component.less @@ -1,8 +1,5 @@ @import "_variables"; -@flogo-flow-detail-header-selected-color:#1573ca; -@flogo-flow-detail-header-unselected-color:#666666; - :host { display: flex; align-items: stretch; @@ -78,12 +75,16 @@ .flogo-flow-detail { background-color: #FAFAFA; + height: 113px; + display: flex; + align-items: center; } .flogo-flow-detail-name { font-size: 24px; - color: #666666; + color: @color-plane; margin: 0; + margin-bottom: -5px; line-height: 1.5; } @@ -117,7 +118,6 @@ } .flogo-flow-detail-log-button-container { - margin-top: 36px; width: 40px; height: 40px; margin-right: 10px; @@ -143,11 +143,13 @@ .flogo-flow-detail-menu{ margin-right: 15px; - margin-top: 36px; } .flogo-flow-detail-header { - padding: 20px 0 30px 30px; + + .flogo-flow-detail-name + span{ + font-size: .875em; + } .flogo-flow-detail-header-back { display: flex; @@ -155,28 +157,28 @@ .flogo-flow-detail-header-back-icon { cursor: pointer; - width: 20px; margin-top: 10px; - li { - font-size: 30px; - position: absolute; - top: 20px; - color: @flogo-flow-detail-header-unselected-color; + .flogo-icon-back { + font-size: 1.2em; + padding: 0 10px; + color: @color-secondary; } } .flogo-flow-detail-header-back-app-name { + font-size: .875em; + color: @color-secondary; cursor: pointer; - color: @flogo-flow-detail-header-selected-color; } &.--hover { .flogo-flow-detail-header-back-app-name { - text-decoration: underline; + color: @color-primary; + font-weight: bold; } - .flogo-flow-detail-header-back-icon li { - color: @flogo-flow-detail-header-selected-color; + .flogo-flow-detail-header-back-icon .flogo-icon { + color: @color-primary } } } diff --git a/src/client/app/flogo.flows.detail/components/canvas.component.ts b/src/client/app/flogo.flows.detail/components/canvas.component.ts index 16cf0bba7..4dbe5309c 100755 --- a/src/client/app/flogo.flows.detail/components/canvas.component.ts +++ b/src/client/app/flogo.flows.detail/components/canvas.component.ts @@ -948,6 +948,27 @@ export class FlogoCanvasComponent implements OnInit { } } + deleteFlow() { + let message = this.translate.instant('FLOWS:CONFIRM_DELETE', {flowName: this.flow.name}); + this._flogoModal.confirmDelete(message) + .then((res) => { + if (res) { + this._restAPIFlowsService.deleteFlow(this.flowId) + .then(() => { + this.navigateToApp(); + }) + .then(() => { + let message = this.translate.instant('FLOWS:SUCCESS-MESSAGE-FLOW-DELETED'); + notification(message, 'success', 3000); + }) + .catch(err => { + let message = this.translate.instant('FLOWS:ERROR-MESSAGE-REMOVE-FLOW', err); + notification(message, 'error'); + console.error(err); + }); + } + }) + } exportTriggerAndFlow() { return this._exportTriggerAndFlow.bind(this); diff --git a/src/client/app/flogo.flows.detail/components/canvas.tpl.html b/src/client/app/flogo.flows.detail/components/canvas.tpl.html index 1001fb08d..ce961311d 100755 --- a/src/client/app/flogo.flows.detail/components/canvas.tpl.html +++ b/src/client/app/flogo.flows.detail/components/canvas.tpl.html @@ -11,7 +11,7 @@ (click)="navigateToApp()" (mouseover)="onMouseOverBackControl()" (mouseout)="onMouseOutBackControl()"> -
  • +

    @@ -29,6 +29,7 @@

    +
    diff --git a/src/client/app/flogo.flows.import/components/import-flow.tpl.html b/src/client/app/flogo.flows.import/components/import-flow.tpl.html index e729104ee..1921880ed 100644 --- a/src/client/app/flogo.flows.import/components/import-flow.tpl.html +++ b/src/client/app/flogo.flows.import/components/import-flow.tpl.html @@ -1,5 +1,5 @@ diff --git a/src/client/app/flogo/components/navbar.component.less b/src/client/app/flogo/components/navbar.component.less index a6b142dcf..ffd748e9f 100644 --- a/src/client/app/flogo/components/navbar.component.less +++ b/src/client/app/flogo/components/navbar.component.less @@ -40,13 +40,16 @@ ul.flogo-header__help-menu-content { background-color: #ffffff; box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5); border: solid 1px #727272; - display: none; list-style: none; margin: 0; min-width: 280px; padding: 9px 15px; position: absolute; - right: 0; + right: 30px; + top: 40px; + transform: scale(0); + transform-origin: top right; + transition: all 300ms ease-in; li, a { margin: 0; @@ -92,7 +95,7 @@ ul.flogo-header__help-menu-content { .flogo-header__help-menu:hover { .flogo-header__help-menu-content { - display: block; + transform: scale(1); } .flogo-header__help-menu-btn { diff --git a/src/client/assets/flogo-icons.less b/src/client/assets/flogo-icons.less index 254f1576a..4dee065d7 100755 --- a/src/client/assets/flogo-icons.less +++ b/src/client/assets/flogo-icons.less @@ -1,10 +1,10 @@ @font-face { font-family: 'flogo-icon'; - src: url('fonts/flogo-icon.eot?gsmp63'); - src: url('fonts/flogo-icon.eot?gsmp63#iefix') format('embedded-opentype'), - url('fonts/flogo-icon.ttf?gsmp63') format('truetype'), - url('fonts/flogo-icon.woff?gsmp63') format('woff'), - url('fonts/flogo-icon.svg?gsmp63#flogo-icon') format('svg'); + src: url('fonts/flogo-icon.eot?dz3w7j'); + src: url('fonts/flogo-icon.eot?dz3w7j#iefix') format('embedded-opentype'), + url('fonts/flogo-icon.ttf?dz3w7j') format('truetype'), + url('fonts/flogo-icon.woff?dz3w7j') format('woff'), + url('fonts/flogo-icon.svg?dz3w7j#flogo-icon') format('svg'); font-weight: normal; font-style: normal; } @@ -24,46 +24,58 @@ -moz-osx-font-smoothing: grayscale; } -.flogo-icon-edit:before { +.flogo-icon-import:before { + content: "\e910"; +} +.flogo-icon-export:before { + content: "\e911"; +} +.flogo-icon-add:before { content: "\e900"; } -.flogo-icon-delete:before { +.flogo-icon-back:before { content: "\e901"; } -.flogo-icon-add:before { +.flogo-icon-debug:before { content: "\e902"; } -.flogo-icon-debug:before { +.flogo-icon-delete:before { content: "\e903"; } .flogo-icon-download:before { content: "\e904"; } -.flogo-icon-export:before { +.flogo-icon-edit:before { content: "\e905"; } -.flogo-icon-help:before { +.flogo-icon-upload:before { content: "\e906"; } -.flogo-icon-info:before { +.flogo-icon-help:before { content: "\e907"; } -.flogo-icon-info-dark:before { +.flogo-icon-info-outline:before { content: "\e908"; } -.flogo-icon-link:before { +.flogo-icon-info:before { content: "\e909"; } -.flogo-icon-log:before { +.flogo-icon-kebabmenu:before { content: "\e90a"; } -.flogo-icon-search:before { +.flogo-icon-link:before { content: "\e90b"; } -.flogo-icon-trigger:before { +.flogo-icon-log:before { content: "\e90c"; } -.flogo-icon-video:before { +.flogo-icon-search:before { content: "\e90d"; } +.flogo-icon-trigger:before { + content: "\e90e"; +} +.flogo-icon-video:before { + content: "\e90f"; +} diff --git a/src/client/assets/fonts/flogo-icon.eot b/src/client/assets/fonts/flogo-icon.eot index cb44f1fc997348adf53323ce58f2e42c37b7af72..54c12826b68012e614e1c18ad14a0a3d69e32099 100755 GIT binary patch delta 1228 zcmZuwO>7%g5T1E&ci--MopkNpb+Q<{UjMZPOyaEVNK^@jUIL;Q3Tk^uYMRhc#nh+~ z1W{y_s;CGd5sVNZ4pADFA0f5W^u~<>>VX3&M-D|O0)zw{%Bk_1Sv#$e%3X>!k^G3pEXaNUIrf4#t(&Y;C!py z#A!6!SMYIKxAD35HSV_%wt5|YAHN7`0C^I}y+RR7Sn;bhoWhB+V_S;QFooo^?AJ(K z1QSBj1b#2#x|7yKa0EXVTH1a>75KHVB9wvGg_?H4)MtXah)0|hguV1W=K=o|rr;@P zP>+70SSwzY^4R`{{oT&X8|?*ltaC$N<1LP7dmZ*FH5CI7%9K2~-z!w8Lu!jw^Dg!O zn1MetQ}G`|TJG8Ki#X#~`gHL6JzI&&ptGoTr4|F;+vZ(^dDNM*td7@mcP2n`F`V|_QD*EwZES5NJDQ}{j zVhP?2Zo2uryVgx$-bFXhfA6;1nK!t?wOt}&$ckb{5ShYtQ`HPM!cmshks&=6A|q9t zJNe?2l}uWG{m8)#KRP(1yMEiv<=o&rPX}9GGAtRT5}_LGAyj15HvV)_Vp>e-hN1{N zdM2~)z{76RvXb_m$yOE^7^J{0Qow_GQh=tV_U(*GQ_*XL4?;s_>~Wgjr_slks%t`XqA$7o4vdZBwVZpK&GvP~>FuBK6*u?A zU2zI;BWIDA&~#PM_lXiRM(1f7VtBY6H7r%r=`9}!H4XnF9N6XA_14_*{(m4Mg)D4d zsg2(8?F&P-mNVe{L6Q!DutK&K@?;GOdI5QL2Z!8_;o1N2Vf@>j7$i8ONGKrn!RsIg&lpN_pIVGQQl}Y7YVTt!BJ#5*5HzC?DWoc(XwS$yc>|+2ko?1#Ir$=M!em>P50g`wOg1wz z+b~YnWnHq_kZl3;=1{IbEXs^PjX?bA=FG|Q{5D@1xLH8vFL*;3?v2yTnr)%atwY9#~2ZHqQbI*m5ucf8!!w&u3`{k=w{#r>DcThbdM1LE=p6g diff --git a/src/client/assets/fonts/flogo-icon.svg b/src/client/assets/fonts/flogo-icon.svg index dd08fb18f..61615754a 100755 --- a/src/client/assets/fonts/flogo-icon.svg +++ b/src/client/assets/fonts/flogo-icon.svg @@ -7,18 +7,22 @@ - - - - + + + + - - - - - - - - - + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/client/assets/fonts/flogo-icon.ttf b/src/client/assets/fonts/flogo-icon.ttf index e9ee452f120a12ba49373876a746399e72e6f0a0..65b80bfabbb10a447b90e1cf5f48933c34ea6428 100755 GIT binary patch delta 1228 zcmZuwO>7%g5T1E&ci;Xw$=bW?crkYTPYa}uv$i8qIYR0s{1gxcwLLU7O=+lN8q@+o z6q$mGKnRJ}2mz<4srVBTKc*4~4oFlW4je!^aNtmcB0wPE5KgVv%-U&%R92du_sz_k z{pNdb|Crb;wgCaafM%_`#UVH;F|7loR3!_tR>ridAC3PL9R4|u@eg9bbR zEn?^wOZ8IsUS7bC!~X6(E}idOz=Pd{yvo}gPxZU(8DbTMEL5m^NFZCR5=G)gZ|hp< z|1kr9Zm#Ozf%Lj=!PjukuMWb&3)d|r+6LXv)SlF4!24HtkMAc1=ZQyV1ReUgU7oVt z+tA8XCoxC3oSn)lj+L=6Udk48Sw&Et?Z#6Wm)**ArB-j?EUWodnwoYD@}pRqhJHz)6oAl0I_VRfzIL*_+Mm8C4NzfLdn(S6oWYsbMbWvhjROqIn z2q$tfvwhbNFKOFJ=cbu<4j7oEz$Ph>g#}W8rX~7L#-gd{G{OU+p)$@CP4Cm_<(wQ2 zRIB<8Hj6^BhdK;3sK<8F-3m1*iPEssRiVN&t&0)v@K3!0_QqEeg}m1eF7aRU9%3LR z?bwaPD7P(wLa1)UaD=L3R1<34{L3{QRn;}2xsfNm?YqheypZ=UvjYPiarVkj__UY* z_?kGySCKO#Dl}acbU{%<#;BjBA%@MJh-s^uPG@;@sA>2Ug}*-8hX>BJ=SO$`1BMhv zVf~|e;;Qfb5UID_VSJDz=>P~TWE)|etR+D|Ag^xWFt%lQ>Ob)?|J7EGlQ#z)b+91? zGq8j@K8Nc}Vn=z6pXKY4E4?MBzDh=J zNrfFFqdx-!AJ7a2kDUBu$3$@t5jmhh1W-UNH?g9CL4lzc$Zr7h74i~uQwt}){sQDL z09vxDAiuZ-=ujXK@Bzs)Ff-qqc)*^KcM_vFBkyD%#>~lztO=8QnLkY4%4o7VkjaK| zaxKe}&5f)Jm^Uxw{KKLQ@+}a5x;b-lJipCX25uIRX$)5ui&eqs$tMKN>xCfVU`Ylh zAO+-e0C6r5vw`GT82lhGPs580#1>FqttkF~>14 fU{PUN!OF&Zhz%G3;CK*X=w{#r>DW9?@E#)o{Ps~a diff --git a/src/client/assets/fonts/flogo-icon.woff b/src/client/assets/fonts/flogo-icon.woff index 828c252c21f83138c96275e591ab4cfee70c006d..ea4827f82764355d25da7831c72c64c2db8b189d 100755 GIT binary patch delta 1257 zcmZux-D@0G6hG(QnYr_|o6PRaY%;F9-S4*6m~3Wu1J=z;DMo8VP_cbzT-(@KvbNG- zD^`{&6-0#A5vk%s`awkz{8$Aae5e=@AAC^q2UH}e2(}OLsojZZcGJAnh2OpR{O&pD zp7XnR=iA)1ihJ_$y?X(He#vWK^yekO;Nq}*epj-y?NGaQ8~_(+Y0q;(?V zz9U=R#PE^DSDq(s1z>1bgdHFJesy8Kbr@jyCi&DOm~VV_c7aF$YdhJ+2;xWn%R+nU z6mk2=ekQ^!@|DG7hsbZ%xzM)pqL?9c-XlX|#fU_$ZAR@P*(B?spK@HoE*Cei^a=@)Sn!blGcERRZ!* zCGSB2`Erd)q`GLdwy6KN8Td0ZHUAN$;jRV0j5B_%Pls>bwUj6fx{}tDIt=*6ZQkPt zNb@SVRvXyP=h z`!(vCBKrG7SQ+EAB)`dOhNXBfyzZ4s-f}O6B@ew4|Et#ta&K{kYs11YWksJOSimY(F@P=Y`B(BM@>SHj-N z@@T2(b;9fX&!UGIN@+WJFI8075knzVH)c3O)iI$7HD%s#4M$aVO=xcHq_=a=_$Yo; z^lq_(eI0T7_HX#ASNw8Ioboy3%t#1LR|P##l#nsXr)h{$awlfms;1Lj-WO>~f1mz0 z0s%fhc&RftwEJH$q=<#pFB+qF=AamFJme1e{w7HWK(<0yi+Dm?f{l=7b<>WxP2ic} zT-<(`2u?8jDRi(Q15>bwI=+spOkziQoxjUhC0F`T&d8^gDdjz3i}%T!$^#ePhFCw6 N(MK%Vy%GNj{{t={-cbMm delta 455 zcmX@0zC%%@+~3WOfsp|S1a>fRgXx@!BHHz$$+?LI3=E7JK%o#277x2LB|WhiB(?|0 z=YV2?^qk5xpx6-x1|Ay_RuMa#l#!a4!oa`>RKj2e!aSLU?ioNqpqK@auL8pC$C=M& z&aO$Ca* z0b0HagbOFW{!)-%TmtmT47fUGAd8v#-eev|dq&>LK8)T#at34O&qmL;3dvMylW{E_nyi!vxcfcVqRnUmxBZN4&avj7Dc7_KZ9tAf#!MFh?3 zg&^W!Nd_h$1>|!8aV`+Ef#g^i{{Mr}U^$RHObv`a1`-1UE(Q?>IR-z5V+;=%>liOE nnK3gl$1yKpQDIrZ%Eo$#O%A9E - - - 7F23602D-B68A-4AA7-9739-2263655E4D57 - Created with sketchtool. - - - - - - - - - - \ No newline at end of file diff --git a/src/client/assets/svg/flogo.flows.detail.menu.icon.svg b/src/client/assets/svg/flogo.flows.detail.menu.icon.svg deleted file mode 100644 index 81c8aa269..000000000 --- a/src/client/assets/svg/flogo.flows.detail.menu.icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - D18539D7-C8FE-4F7B-8BB1-E492E1DF0871 - Created with sketchtool. - - - - - - - - - - \ No newline at end of file diff --git a/src/client/i18n/en.json b/src/client/i18n/en.json index b42f6bc5e..b208989cd 100644 --- a/src/client/i18n/en.json +++ b/src/client/i18n/en.json @@ -55,6 +55,7 @@ "FLOW-NAME:RENAME": "Rename flow", "FLOW-NAME:GETTING-FLOW-NAME": "Error getting flow name", "FLOWS:ALL": "All Flows", + "FLOWS:CONFIRM_DELETE": "Are you sure you want to delete the flow \"{{flowName}}\"?", "FLOWS:CREATED": "Created {{value}}", "FLOWS:CREATE_FLOW_ERROR": "An error occurred creating the flow", "FLOWS:ERROR-MESSAGE-IMPORT":"{{value}}", @@ -62,6 +63,9 @@ "FLOWS:FEATURED-VIDEO-TUTORIAL": "Featured Video tutorial", "FLOWS:MY-FLOWS": "My Flows", "FLOWS:NEW-INSTRUCTIONS": "We have got some new instructional videos you can check out that can help you", + "FLOWS:OPTION-DELETE": "Delete", + "FLOWS:OPTION-EXPORT": "Export", + "FLOWS:OPTION-RENAME": "Rename", "FLOWS:RECENTLY-MODIFIED": "Recently Modified", "FLOWS:SEARCH": "Filter", "FLOWS:SUCCESS-MESSAGE-FLOW-CREATED": "Flow was created successfully!",