Skip to content
Snippets Groups Projects
Commit c0aa80e2 authored by ncamera's avatar ncamera
Browse files

Arreglar posición de popovers

parent f8fc8d77
No related branches found
No related tags found
1 merge request!1Se actualiza Angular a la versión 13 y se resuelven vulnerabilidades
Hide whitespace changes
Inline Side-by-side
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html
+ 185
− 153
View file @ c0aa80e2
<!-- Buttons Controls -->
<div class="buttons-control">
<button ngbPopover='{{ "i18n.action.zoom" | translate | titleCase }} +'
class="btn btn-sm btn-secondary btn-zoom-increase"
data-placement="bottom"
triggers="mouseenter:mouseleave"
(click)=zoomIn() >
<i class="fa fa-plus"></i>
</button>
<button ngbPopover='{{ "i18n.action.zoom" | translate | titleCase }} -'
class="btn btn-sm btn-secondary btn-zoom-decrease"
data-placement="bottom"
triggers="mouseenter:mouseleave"
(click)=zoomOut() >
<i class="fa fa-minus"></i>
</button>
<button ngbPopover='{{ "i18n.action.center" | translate | titleCase }}'
class="btn btn-sm btn-secondary btn-zoom-center"
data-placement="bottom"
triggers="mouseenter:mouseleave"
(click)="recenterPlot()" >
<i class="fa fa-arrows"></i>
</button>
<button ngbPopover='{{ "i18n.action.delete" | translate | titleCase }}'
class="btn btn-sm btn-secondary btn-trash"
data-placement="bottom"
triggers="mouseenter:mouseleave"
(click)="cleanPlot()" >
<i class="fa fa-trash"></i>
</button>
<button ngbPopover='{{ "i18n.action.download" | translate | titleCase }} PNG'
class="btn btn-sm btn-secondary btn-download"
data-placement="bottom"
triggers="mouseenter:mouseleave"
(click)=exportPlot() >
<i class="fa fa-download"></i>
</button>
<button id="settings"
class="btn btn-sm btn-secondary btn-setting"
placement="bottom"
closePopoverDirective
[ngbPopover]=popoverCanvas
popoverTitle='{{ "i18n.object.settings" | translate | titleCase }}'
#popover="ngbPopover"
tiggers="click">
<i class="fa fa-gear"></i>
</button>
<button
ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} +"
class="btn btn-sm btn-secondary btn-zoom-increase"
placement="bottom"
triggers="mouseenter:mouseleave"
(click)="zoomIn()"
>
<i class="fa fa-plus"></i>
</button>
<button
ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} -"
class="btn btn-sm btn-secondary btn-zoom-decrease"
placement="bottom"
triggers="mouseenter:mouseleave"
(click)="zoomOut()"
>
<i class="fa fa-minus"></i>
</button>
<button
ngbPopover="{{ 'i18n.action.center' | translate | titleCase }}"
class="btn btn-sm btn-secondary btn-zoom-center"
placement="bottom"
triggers="mouseenter:mouseleave"
(click)="recenterPlot()"
>
<i class="fa fa-arrows"></i>
</button>
<button
ngbPopover="{{ 'i18n.action.delete' | translate | titleCase }}"
class="btn btn-sm btn-secondary btn-trash"
placement="bottom"
triggers="mouseenter:mouseleave"
(click)="cleanPlot()"
>
<i class="fa fa-trash"></i>
</button>
<button
ngbPopover="{{ 'i18n.action.download' | translate | titleCase }} PNG"
class="btn btn-sm btn-secondary btn-download"
placement="bottom"
triggers="mouseenter:mouseleave"
(click)="exportPlot()"
>
<i class="fa fa-download"></i>
</button>
<button
id="settings"
class="btn btn-sm btn-secondary btn-setting"
placement="bottom"
closePopoverDirective
[ngbPopover]="popoverCanvas"
popoverTitle="{{ 'i18n.object.settings' | translate | titleCase }}"
#popover="ngbPopover"
tiggers="click"
>
<i class="fa fa-gear"></i>
</button>
</div>
<div class="card">
<div class="card-block contenedor-canvas" >
<!-- Download Link -->
<a id="download-plot" class="download-plot" href="#" download="Plot.svg" style="display: none">
Download Canvas
</a>
<div class="card-block contenedor-canvas">
<!-- Download Link -->
<a
id="download-plot"
class="download-plot"
href="#"
download="Plot.svg"
style="display: none"
>
Download Canvas
</a>
<!-- Settings Popover Content -->
<ng-template #popoverCanvas>
<div class="form-group settings-popover-content">
<div class="chart-controls setting-section">
<label>
<input
type="checkbox"
name="grid"
class="form-control form-control-sm"
[checked]= settings.grid
(click)="toggleGrid()">
{{ "i18n.object.grid" | translate | titleCase }}
</label>
<label>
<input
type="checkbox"
name="axis"
class="form-control form-control-sm"
[checked]= settings.axis
(click)="toggleAxis()">
{{ "i18n.object.axes" | translate | titleCase }}
</label>
<!-- <label>
<!-- Settings Popover Content -->
<ng-template #popoverCanvas>
<div class="form-group settings-popover-content">
<div class="chart-controls setting-section">
<label>
<input
type="checkbox"
name="grid"
class="form-control form-control-sm"
[checked]="settings.grid"
(click)="toggleGrid()"
/>
{{ "i18n.object.grid" | translate | titleCase }}
</label>
<label>
<input
type="checkbox"
name="axis"
class="form-control form-control-sm"
[checked]="settings.axis"
(click)="toggleAxis()"
/>
{{ "i18n.object.axes" | translate | titleCase }}
</label>
<!-- <label>
<input
type="checkbox"
name="tip"
......@@ -85,86 +105,98 @@
(click)="toggleTip()">
{{ "i18n.object.tip" | translate | titleCase }}
</label> -->
<label [class.disabled]="funciones.length === 0">
<input
type="checkbox"
[attr.disabled]="funciones.length === 0 ? '' : null"
[checked]=animation.boton
(click)="multiGraf(value)">
{{ "i18n.msg.figure.multiPlot" | translate | titleCase }}
</label>
</div>
<hr>
<div class="zoom-control setting-section">
<div [class.disabled]="funciones.length === 0" style="display: flex;">
<span style="margin-right: 8px; align-self: center;">
{{ "i18n.action.zoom" | translate | titleCase }}
</span>
<input
type="number"
class="form-control form-control-sm"
[attr.disabled]="funciones.length === 0 ? '' : null"
[(ngModel)]="animation.zoo"
[max]="1000000"
[min]="8"
(change)="setZoom()"
style="width: 70px;"
/>
</div>
</div>
<hr>
<div class="animation-controls setting-section"
[class.disabled]="animation.data.length === 0">
<label>{{ "i18n.msg.figure.animationSpeed" | translate }}:</label>
<div>
<button class="btn btn-sm btn-secondary"
[attr.disabled]="animation.data.length === 0 ? '' : null"
(click)='decreaseSpeed()'>
<i class="fa fa-minus"></i>
</button>
<button class="btn btn-sm btn-secondary"
[attr.disabled]="animation.data.length === 0 ? '' : null"
(click)='restoreSpeed()'>
<span>1x</span>
</button>
<button class="btn btn-sm btn-secondary"
[attr.disabled]="animation.data.length === 0 ? '' : null"
(click)='increaseSpeed()'>
<i class="fa fa-plus"></i>
</button>
<span class="speed-value">
{{animation.speedX | number:'1.0'}}x
</span>
</div>
</div>
</div>
</ng-template>
<!-- Animation -->
<div class="animation" *ngIf="animation.data.length>0">
<button class="btn btn-sm btn-secondary btn-play"
data-placement="bottom"
*ngIf="!animation.playing"
(click)="runAnimation()" >
<i class="fa fa-play"></i>
</button>
<button class="btn btn-sm btn-secondary btn-pause"
data-placement="bottom"
*ngIf="animation.playing"
(click)="pauseAnimation()" >
<i class="fa fa-pause"></i>
</button>
<label [class.disabled]="funciones.length === 0">
<input
type="checkbox"
[attr.disabled]="funciones.length === 0 ? '' : null"
[checked]="animation.boton"
(click)="multiGraf(value)"
/>
{{ "i18n.msg.figure.multiPlot" | translate | titleCase }}
</label>
</div>
<hr />
<div class="zoom-control setting-section">
<div [class.disabled]="funciones.length === 0" style="display: flex">
<span style="margin-right: 8px; align-self: center">
{{ "i18n.action.zoom" | translate | titleCase }}
</span>
<input
type="number"
class="form-control form-control-sm"
[attr.disabled]="funciones.length === 0 ? '' : null"
[(ngModel)]="animation.zoo"
[max]="1000000"
[min]="8"
(change)="setZoom()"
style="width: 70px"
/>
</div>
</div>
<hr />
<div
class="animation-controls setting-section"
[class.disabled]="animation.data.length === 0"
>
<label>{{ "i18n.msg.figure.animationSpeed" | translate }}:</label>
<div>
<button
class="btn btn-sm btn-secondary"
[attr.disabled]="animation.data.length === 0 ? '' : null"
(click)="decreaseSpeed()"
>
<i class="fa fa-minus"></i>
</button>
<button
class="btn btn-sm btn-secondary"
[attr.disabled]="animation.data.length === 0 ? '' : null"
(click)="restoreSpeed()"
>
<span>1x</span>
</button>
<button
class="btn btn-sm btn-secondary"
[attr.disabled]="animation.data.length === 0 ? '' : null"
(click)="increaseSpeed()"
>
<i class="fa fa-plus"></i>
</button>
<span class="speed-value">
{{ animation.speedX | number: "1.0" }}x
</span>
</div>
</div>
</div>
</ng-template>
<ngb-progressbar
class="progressbar"
type="info"
[value]="((animation.currentFrame+1)/animation.data.length)*100">
</ngb-progressbar>
</div>
<!-- Animation -->
<div class="animation" *ngIf="animation.data.length > 0">
<button
class="btn btn-sm btn-secondary btn-play"
placement="bottom"
*ngIf="!animation.playing"
(click)="runAnimation()"
>
<i class="fa fa-play"></i>
</button>
<button
class="btn btn-sm btn-secondary btn-pause"
placement="bottom"
*ngIf="animation.playing"
(click)="pauseAnimation()"
>
<i class="fa fa-pause"></i>
</button>
<!-- Graph Container -->
<div #graph2DContainer id="graph2D-container">
</div>
<ngb-progressbar
class="progressbar"
type="info"
[value]="((animation.currentFrame + 1) / animation.data.length) * 100"
>
</ngb-progressbar>
</div>
</div>
\ No newline at end of file
<!-- Graph Container -->
<div #graph2DContainer id="graph2D-container"></div>
</div>
</div>
Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.html
+ 4
− 4
View file @ c0aa80e2
......@@ -37,7 +37,7 @@
<button
ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} +"
triggers="mouseenter:mouseleave"
data-placement="bottom"
placement="bottom"
class="btn btn-sm btn-secondary"
(click)="zoomIn()"
>
......@@ -47,7 +47,7 @@
<button
ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} -"
triggers="mouseenter:mouseleave"
data-placement="bottom"
placement="bottom"
class="btn btn-sm btn-secondary"
(click)="zoomOut()"
>
......@@ -57,7 +57,7 @@
<button
ngbPopover="{{ 'i18n.action.center' | translate | titleCase }}"
triggers="mouseenter:mouseleave"
data-placement="bottom"
placement="bottom"
class="btn btn-sm btn-secondary"
(click)="center()"
>
......@@ -145,7 +145,7 @@
<button
ngbPopover="{{ 'i18n.action.delete' | translate | titleCase }}"
triggers="mouseenter:mouseleave"
data-placement="bottom"
placement="bottom"
class="btn btn-sm btn-secondary"
(click)="clear()"
>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment