bia-framework
Version:
Bia Framework to work with angular 2
581 lines (543 loc) • 27.5 kB
HTML
<div class="grid grid-direction-columns-sm grid-full-h">
<!--Coluna Details-->
<div class="cell cell-sm-3 bg-color-gray-800 cell-full-h">
<div class="grid grid-direction-rows-sm grid-full-h">
<div class="cell wrapper-md ">
<span class="texte text-title"> Header</span>
</div>
<div class="cell cell-scroll-vertical">
<div class="grid grid-direction-rows-sm grid-vertical-center-sm">
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">Primeiro</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">Ultimo</span>
</div>
</div>
</div>
</div>
</div>
<div class="cell wrapper-md">
<span class="texte text-title"> Footer</span>
</div>
<div class="cell cell-scroll-vertical">
<div class="grid grid-direction-rows-sm grid-vertical-center-sm">
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">Primeiro</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">VariableName</span>
</div>
</div>
</div>
<div class="cell">
<div class="grid grid-direction-columns-sm">
<!--icon-->
<div class="cell wrapper-xsm">
<icon source="variable" size="xxsm" color="warning"></icon>
</div>
<!--Variable Name-->
<div class="cell">
<span class="text text-body-1 text-color-white">Ultimo</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Coluna Details-->
<div class="cell bg-color-gray-700">
</div>
</div>
<!--<div class="grid grid-direction-columns-sm">-->
<!--<!–Graph Component List–>-->
<!--<div class="cell cell-lg-2 cell-sm-3 bg-color-gray-900">-->
<!-- Add Variables, Nodes and Components -->
<!--<div class="grid grid-direction-rows-sm">-->
<!--<div class="cell wrapper-sm bg-color-black"><span class="text text-menu text-color-white">Object View</span></div>-->
<!--<div class="cell">-->
<!--<div class="grid grid-direction-columns-sm grid-horizontal-space-around-sm">-->
<!--<div class="cell wrapper-sm">-->
<!--<odisseia-button-->
<!--clickBehavior="button"-->
<!--type="icon"-->
<!--icon="variable"-->
<!--iconColor="white"-->
<!--iconPlace="rows"-->
<!--text=""-->
<!--(commmand)="createVariable()"-->
<!--color="white">-->
<!--</odisseia-button>-->
<!--</div>-->
<!--<div class="cell wrapper-sm">-->
<!--<odisseia-button-->
<!--clickBehavior="button"-->
<!--type="icon"-->
<!--icon="function"-->
<!--iconColor="white"-->
<!--iconPlace="rows"-->
<!--text=""-->
<!--color="white">-->
<!--</odisseia-button>-->
<!--</div>-->
<!--<div class="cell wrapper-sm">-->
<!--<odisseia-button-->
<!--clickBehavior="button"-->
<!--type="icon"-->
<!--icon="variable"-->
<!--iconColor="white"-->
<!--iconPlace="rows"-->
<!--text=""-->
<!--color="white">-->
<!--</odisseia-button>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="cell cell-auto">-->
<!--<div class="grid grid-direction-rows-sm">-->
<!--<div class="cell wrapper-sm bg-color-gray-800"><span class="text text-menu text-color-white">Variables</span></div>-->
<!--<div class="cell b-b" *ngFor="#variable of currentVariables" draggable="true" (click)="onSelectVariable(variable)">-->
<!--<div class="grid grid-direction-columns-sm grid-vertical-center-sm">-->
<!--<!–icon–>-->
<!--<div class="cell wrapper-xsm">-->
<!--<icon source="variable" size="xxsm" [color]="variable.type.color"></icon>-->
<!--</div>-->
<!--<!–Variable Name–>-->
<!--<div class="cell">-->
<!--<span class="text text-body-1 text-color-white">{{variable.name}}</span>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="cell cell-auto">-->
<!--<div class="grid grid-direction-rows-sm" >-->
<!--<odisseia-form #detailForm>-->
<!--<div class="cell wrapper-sm bg-color-gray-800"><span class="text text-menu text-color-white">Details</span></div>-->
<!--<div class="cell wrapper-sm" *ngIf="!selectedVariable"><span class="text text-caption ">Escolha uma variável para ver os detalhes...</span></div>-->
<!--<div class="cell" *ngIf="selectedVariable">-->
<!--<div class="grid grid-direction-columns-sm">-->
<!--<div class="cell cell-sm-4"><span class="text text-caption text-color-white">Variable Name</span></div>-->
<!--<div class="cell cell-sm-8">-->
<!--<odisseia-input-->
<!--name="variableName"-->
<!--description="nome de usuário"-->
<!--[(bind)]="selectedVariable.name"-->
<!--inputType="text">-->
<!--</odisseia-input>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</odisseia-form>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<!–Network–>-->
<!--<div class="cell cell-auto" draggable="true">-->
<!--<svg id="svgout" class="flow" width="100%" height="100%"></svg>-->
<!--</div>-->
<!--</div>-->
<!--<!–<svg–>-->
<!--<!–class="flow"–>-->
<!--<!–viewBox="0 0 600 600"–>-->
<!--<!–xmlns="http://www.w3.org/2000/svg"–>-->
<!--<!–(mousedown)="onMouseDown($event)"–>-->
<!--<!–(mousemove)="onMouseMove($event)"–>-->
<!--<!–(mouseup)="onMouseUp($event)"–>-->
<!--<!–(mousewheel)="onMouseWheel($event, component)">–>-->
<!--<!–<defs>–>-->
<!--<!–<filter xmlns="http://www.w3.org/2000/svg" id="shadow-1">–>-->
<!--<!–<feFlood flood-opacity="0.12" flood-color="rgb(0,0,0)" result="flood" id="feFlood4286"/>–>-->
<!--<!–<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4288"/>–>-->
<!--<!–<feGaussianBlur in="composite" stdDeviation="1.5" result="blur" id="feGaussianBlur4290"/>–>-->
<!--<!–<feOffset dx="0" dy="1" result="offset" id="feOffset4292"/>–>-->
<!--<!–<feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4294"/>–>-->
<!--<!–<feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4332"/>–>-->
<!--<!–<feFlood id="feFlood4334" flood-opacity="0.24" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic"/>–>-->
<!--<!–<feComposite id="feComposite4336" in2="fbSourceGraphic" in="flood" operator="in" result="composite1"/>–>-->
<!--<!–<feGaussianBlur id="feGaussianBlur4338" in="composite" stdDeviation="1" result="blur"/>–>-->
<!--<!–<feOffset id="feOffset4340" dx="0" dy="1" result="offset"/>–>-->
<!--<!–<feComposite id="feComposite4342" in2="offset" in="fbSourceGraphic" operator="over" result="composite2"/>–>-->
<!--<!–</filter>–>-->
<!--<!–</defs>–>-->
<!--<!–<g data-component–>-->
<!--<!–*ngFor="#component of myNetwork.components"–>-->
<!--<!–(mousedown)="onNodeMouseDown($event, component)"–>-->
<!--<!–(mouseup)="onNodeMouseUp($event, component)"–>-->
<!--<!–(mousemove)="onNodeMouseMove($event, component)"–>-->
<!--<!–class="flow-component z-depth-3"–>-->
<!--<!–[ngClass]="{isDraging:component.layout.isDraging}"–>-->
<!--<!–attr.transform="translate({{component.layout.x}} , {{component.layout.y}}) scale({{currentScale}})"–>-->
<!--<!–style="filter:url(#shadow-1)">–>-->
<!--<!–<!–Component–>–>-->
<!--<!–<rect–>-->
<!--<!–class="flow-node-rect"–>-->
<!--<!–ry="2"–>-->
<!--<!–rx="2"–>-->
<!--<!–x="5%"–>-->
<!--<!–y="5%"–>-->
<!--<!–width="20%"–>-->
<!--<!–height="10%">–>-->
<!--<!–</rect>–>-->
<!--<!–<!–x="{{node.width()/2}}"–>–>-->
<!--<!–<text–>-->
<!--<!–x="15%"–>-->
<!--<!–y="7%"–>-->
<!--<!–class="flow-node-title"–>-->
<!--<!–text-anchor="middle"–>-->
<!--<!–alignment-baseline="middle">–>-->
<!--<!–{{component.type}}–>-->
<!--<!–</text>–>-->
<!--<!–<!– Input ports–>–>-->
<!--<!–<circle class="flow-port"–>-->
<!--<!–*ngFor="#port of component.inputPorts"–>-->
<!--<!–r="5"–>-->
<!--<!–cx="5%"–>-->
<!--<!–cy="9%">–>-->
<!--<!–</circle>–>-->
<!--<!–<!– Output ports–>–>-->
<!--<!–<circle *ngFor="#port of component.outputPorts"–>-->
<!--<!–class="flow-port"–>-->
<!--<!–r="5"–>-->
<!--<!–cx="25%"–>-->
<!--<!–cy="9%">–>-->
<!--<!–</circle>–>-->
<!--<!–<!–debug–>–>-->
<!--<!–<text–>-->
<!--<!–x="10"–>-->
<!--<!–y="20"–>-->
<!--<!–class="flow-node-title"–>-->
<!--<!–text-anchor="start"–>-->
<!--<!–>–>-->
<!--<!–{{component.layout.x}}–>-->
<!--<!–</text>–>-->
<!--<!–<text–>-->
<!--<!–x="40"–>-->
<!--<!–y="20"–>-->
<!--<!–class="flow-node-title"–>-->
<!--<!–text-anchor="start"–>-->
<!--<!–>–>-->
<!--<!–{{component.layout.y}}–>-->
<!--<!–</text>–>-->
<!--<!–<!–MOUSE–>–>-->
<!--<!–<text–>-->
<!--<!–x="100"–>-->
<!--<!–y="10"–>-->
<!--<!–class="flow-node-title"–>-->
<!--<!–text-anchor="start"> Mouse–>-->
<!--<!–</text>–>-->
<!--<!–<text–>-->
<!--<!–x="100"–>-->
<!--<!–y="20"–>-->
<!--<!–class="flow-node-title"–>-->
<!--<!–text-anchor="start"–>-->
<!--<!–>–>-->
<!--<!–{{currentMousePoint.x}}–>-->
<!--<!–</text>–>-->
<!--<!–<text–>-->
<!--<!–x="120"–>-->
<!--<!–y="20"–>-->
<!--<!–class="flow-node-title"–>-->
<!--<!–text-anchor="start"–>-->
<!--<!–>–>-->
<!--<!–{{currentMousePoint.y}}–>-->
<!--<!–</text>–>-->
<!--<!–<!–clicked–>–>-->
<!--<!–<text–>-->
<!--<!–x="150"–>-->
<!--<!–y="10"–>-->
<!--<!–class="flow-node-title"–>-->
<!--<!–text-anchor="start"> Clickwd–>-->
<!--<!–</text>–>-->
<!--<!–<text–>-->
<!--<!–x="150"–>-->
<!--<!–y="20"–>-->
<!--<!–class="flow-node-title"–>-->
<!--<!–text-anchor="start"–>-->
<!--<!–>–>-->
<!--<!–{{currentClickedPoint.x}}–>-->
<!--<!–</text>–>-->
<!--<!–<text–>-->
<!--<!–x="170"–>-->
<!--<!–y="20"–>-->
<!--<!–class="flow-node-title"–>-->
<!--<!–text-anchor="start"–>-->
<!--<!–>–>-->
<!--<!–{{currentClickedPoint.y}}–>-->
<!--<!–</text>–>-->
<!--<!–</g>–>-->
<!--<!–</svg>–>-->