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 --> <!-- Buttons Controls -->
<div class="buttons-control"> <div class="buttons-control">
<button ngbPopover='{{ "i18n.action.zoom" | translate | titleCase }} +' <button
class="btn btn-sm btn-secondary btn-zoom-increase" ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} +"
data-placement="bottom" class="btn btn-sm btn-secondary btn-zoom-increase"
triggers="mouseenter:mouseleave" placement="bottom"
(click)=zoomIn() > triggers="mouseenter:mouseleave"
<i class="fa fa-plus"></i> (click)="zoomIn()"
</button> >
<button ngbPopover='{{ "i18n.action.zoom" | translate | titleCase }} -' <i class="fa fa-plus"></i>
class="btn btn-sm btn-secondary btn-zoom-decrease" </button>
data-placement="bottom" <button
triggers="mouseenter:mouseleave" ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} -"
(click)=zoomOut() > class="btn btn-sm btn-secondary btn-zoom-decrease"
<i class="fa fa-minus"></i> placement="bottom"
</button> triggers="mouseenter:mouseleave"
<button ngbPopover='{{ "i18n.action.center" | translate | titleCase }}' (click)="zoomOut()"
class="btn btn-sm btn-secondary btn-zoom-center" >
data-placement="bottom" <i class="fa fa-minus"></i>
triggers="mouseenter:mouseleave" </button>
(click)="recenterPlot()" > <button
<i class="fa fa-arrows"></i> ngbPopover="{{ 'i18n.action.center' | translate | titleCase }}"
</button> class="btn btn-sm btn-secondary btn-zoom-center"
<button ngbPopover='{{ "i18n.action.delete" | translate | titleCase }}' placement="bottom"
class="btn btn-sm btn-secondary btn-trash" triggers="mouseenter:mouseleave"
data-placement="bottom" (click)="recenterPlot()"
triggers="mouseenter:mouseleave" >
(click)="cleanPlot()" > <i class="fa fa-arrows"></i>
<i class="fa fa-trash"></i> </button>
</button> <button
<button ngbPopover='{{ "i18n.action.download" | translate | titleCase }} PNG' ngbPopover="{{ 'i18n.action.delete' | translate | titleCase }}"
class="btn btn-sm btn-secondary btn-download" class="btn btn-sm btn-secondary btn-trash"
data-placement="bottom" placement="bottom"
triggers="mouseenter:mouseleave" triggers="mouseenter:mouseleave"
(click)=exportPlot() > (click)="cleanPlot()"
<i class="fa fa-download"></i> >
</button> <i class="fa fa-trash"></i>
<button id="settings" </button>
class="btn btn-sm btn-secondary btn-setting" <button
placement="bottom" ngbPopover="{{ 'i18n.action.download' | translate | titleCase }} PNG"
closePopoverDirective class="btn btn-sm btn-secondary btn-download"
[ngbPopover]=popoverCanvas placement="bottom"
popoverTitle='{{ "i18n.object.settings" | translate | titleCase }}' triggers="mouseenter:mouseleave"
#popover="ngbPopover" (click)="exportPlot()"
tiggers="click"> >
<i class="fa fa-gear"></i> <i class="fa fa-download"></i>
</button> </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>
<div class="card"> <div class="card">
<div class="card-block contenedor-canvas" > <div class="card-block contenedor-canvas">
<!-- Download Link --> <!-- Download Link -->
<a id="download-plot" class="download-plot" href="#" download="Plot.svg" style="display: none"> <a
Download Canvas id="download-plot"
</a> class="download-plot"
href="#"
download="Plot.svg"
style="display: none"
>
Download Canvas
</a>
<!-- Settings Popover Content --> <!-- Settings Popover Content -->
<ng-template #popoverCanvas> <ng-template #popoverCanvas>
<div class="form-group settings-popover-content"> <div class="form-group settings-popover-content">
<div class="chart-controls setting-section"> <div class="chart-controls setting-section">
<label> <label>
<input <input
type="checkbox" type="checkbox"
name="grid" name="grid"
class="form-control form-control-sm" class="form-control form-control-sm"
[checked]= settings.grid [checked]="settings.grid"
(click)="toggleGrid()"> (click)="toggleGrid()"
{{ "i18n.object.grid" | translate | titleCase }} />
</label> {{ "i18n.object.grid" | translate | titleCase }}
<label> </label>
<input <label>
type="checkbox" <input
name="axis" type="checkbox"
class="form-control form-control-sm" name="axis"
[checked]= settings.axis class="form-control form-control-sm"
(click)="toggleAxis()"> [checked]="settings.axis"
{{ "i18n.object.axes" | translate | titleCase }} (click)="toggleAxis()"
</label> />
<!-- <label> {{ "i18n.object.axes" | translate | titleCase }}
</label>
<!-- <label>
<input <input
type="checkbox" type="checkbox"
name="tip" name="tip"
...@@ -85,86 +105,98 @@ ...@@ -85,86 +105,98 @@
(click)="toggleTip()"> (click)="toggleTip()">
{{ "i18n.object.tip" | translate | titleCase }} {{ "i18n.object.tip" | translate | titleCase }}
</label> --> </label> -->
<label [class.disabled]="funciones.length === 0"> <label [class.disabled]="funciones.length === 0">
<input <input
type="checkbox" type="checkbox"
[attr.disabled]="funciones.length === 0 ? '' : null" [attr.disabled]="funciones.length === 0 ? '' : null"
[checked]=animation.boton [checked]="animation.boton"
(click)="multiGraf(value)"> (click)="multiGraf(value)"
{{ "i18n.msg.figure.multiPlot" | translate | titleCase }} />
</label> {{ "i18n.msg.figure.multiPlot" | translate | titleCase }}
</div> </label>
<hr> </div>
<div class="zoom-control setting-section"> <hr />
<div [class.disabled]="funciones.length === 0" style="display: flex;"> <div class="zoom-control setting-section">
<span style="margin-right: 8px; align-self: center;"> <div [class.disabled]="funciones.length === 0" style="display: flex">
{{ "i18n.action.zoom" | translate | titleCase }} <span style="margin-right: 8px; align-self: center">
</span> {{ "i18n.action.zoom" | translate | titleCase }}
<input </span>
type="number" <input
class="form-control form-control-sm" type="number"
[attr.disabled]="funciones.length === 0 ? '' : null" class="form-control form-control-sm"
[(ngModel)]="animation.zoo" [attr.disabled]="funciones.length === 0 ? '' : null"
[max]="1000000" [(ngModel)]="animation.zoo"
[min]="8" [max]="1000000"
(change)="setZoom()" [min]="8"
style="width: 70px;" (change)="setZoom()"
/> style="width: 70px"
</div> />
</div> </div>
<hr> </div>
<div class="animation-controls setting-section" <hr />
[class.disabled]="animation.data.length === 0"> <div
<label>{{ "i18n.msg.figure.animationSpeed" | translate }}:</label> class="animation-controls setting-section"
<div> [class.disabled]="animation.data.length === 0"
<button class="btn btn-sm btn-secondary" >
[attr.disabled]="animation.data.length === 0 ? '' : null" <label>{{ "i18n.msg.figure.animationSpeed" | translate }}:</label>
(click)='decreaseSpeed()'> <div>
<i class="fa fa-minus"></i> <button
</button> class="btn btn-sm btn-secondary"
<button class="btn btn-sm btn-secondary" [attr.disabled]="animation.data.length === 0 ? '' : null"
[attr.disabled]="animation.data.length === 0 ? '' : null" (click)="decreaseSpeed()"
(click)='restoreSpeed()'> >
<span>1x</span> <i class="fa fa-minus"></i>
</button> </button>
<button class="btn btn-sm btn-secondary" <button
[attr.disabled]="animation.data.length === 0 ? '' : null" class="btn btn-sm btn-secondary"
(click)='increaseSpeed()'> [attr.disabled]="animation.data.length === 0 ? '' : null"
<i class="fa fa-plus"></i> (click)="restoreSpeed()"
</button> >
<span class="speed-value"> <span>1x</span>
{{animation.speedX | number:'1.0'}}x </button>
</span> <button
</div> class="btn btn-sm btn-secondary"
</div> [attr.disabled]="animation.data.length === 0 ? '' : null"
</div> (click)="increaseSpeed()"
</ng-template> >
<i class="fa fa-plus"></i>
<!-- Animation --> </button>
<div class="animation" *ngIf="animation.data.length>0"> <span class="speed-value">
<button class="btn btn-sm btn-secondary btn-play" {{ animation.speedX | number: "1.0" }}x
data-placement="bottom" </span>
*ngIf="!animation.playing" </div>
(click)="runAnimation()" > </div>
<i class="fa fa-play"></i> </div>
</button> </ng-template>
<button class="btn btn-sm btn-secondary btn-pause"
data-placement="bottom"
*ngIf="animation.playing"
(click)="pauseAnimation()" >
<i class="fa fa-pause"></i>
</button>
<ngb-progressbar <!-- Animation -->
class="progressbar" <div class="animation" *ngIf="animation.data.length > 0">
type="info" <button
[value]="((animation.currentFrame+1)/animation.data.length)*100"> class="btn btn-sm btn-secondary btn-play"
</ngb-progressbar> placement="bottom"
</div> *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 --> <ngb-progressbar
<div #graph2DContainer id="graph2D-container"> class="progressbar"
type="info"
</div> [value]="((animation.currentFrame + 1) / animation.data.length) * 100"
>
</ngb-progressbar>
</div> </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 @@ ...@@ -37,7 +37,7 @@
<button <button
ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} +" ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} +"
triggers="mouseenter:mouseleave" triggers="mouseenter:mouseleave"
data-placement="bottom" placement="bottom"
class="btn btn-sm btn-secondary" class="btn btn-sm btn-secondary"
(click)="zoomIn()" (click)="zoomIn()"
> >
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
<button <button
ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} -" ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} -"
triggers="mouseenter:mouseleave" triggers="mouseenter:mouseleave"
data-placement="bottom" placement="bottom"
class="btn btn-sm btn-secondary" class="btn btn-sm btn-secondary"
(click)="zoomOut()" (click)="zoomOut()"
> >
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
<button <button
ngbPopover="{{ 'i18n.action.center' | translate | titleCase }}" ngbPopover="{{ 'i18n.action.center' | translate | titleCase }}"
triggers="mouseenter:mouseleave" triggers="mouseenter:mouseleave"
data-placement="bottom" placement="bottom"
class="btn btn-sm btn-secondary" class="btn btn-sm btn-secondary"
(click)="center()" (click)="center()"
> >
...@@ -145,7 +145,7 @@ ...@@ -145,7 +145,7 @@
<button <button
ngbPopover="{{ 'i18n.action.delete' | translate | titleCase }}" ngbPopover="{{ 'i18n.action.delete' | translate | titleCase }}"
triggers="mouseenter:mouseleave" triggers="mouseenter:mouseleave"
data-placement="bottom" placement="bottom"
class="btn btn-sm btn-secondary" class="btn btn-sm btn-secondary"
(click)="clear()" (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