diff --git a/Frontend Angular 4/src/app/layout/archivos/archivos.component.html b/Frontend Angular 4/src/app/layout/archivos/archivos.component.html index d0f451ea2d8312909e9e43c682a25e7a4ca45d4d..6193e34b28938d41ceddd12e081fb7d93375504e 100755 --- a/Frontend Angular 4/src/app/layout/archivos/archivos.component.html +++ b/Frontend Angular 4/src/app/layout/archivos/archivos.component.html @@ -27,102 +27,65 @@ <a ngbNavLink>{{ "i18n.msg.file.myFiles" | translate }}</a> <ng-template ngbNavContent> <div class="card"> - <div> - <div - class="btn-group pull-right" - style="cursor: pointer; margin-top: -9px" + <div class="matefun-tab-options"> + <button + ngbPopover="{{ 'i18n.action.new' | translate | titleCase }}" + triggers="mouseenter:mouseleave" + data-placement="bottom" + type="button" + class="btn btn-sm btn-secondary" + data-toggle="dropdown" + aria-haspopup="true" + aria-expanded="false" > - <button - ngbPopover="{{ - 'i18n.action.goBack' | translate | titleCase - }}" - triggers="mouseenter:mouseleave" - data-placement="bottom" - class="btn btn-sm btn-secondary pull-right" - *ngIf="directorioActual.padreId != -1" - style=" - cursor: pointer; - margin-top: -33.5px; - margin-right: 73px; - height: 30px; - " - (click)="navBack()" - > - <i class="fa fa-arrow-up"></i> - </button> + <i class="fa fa-plus"></i> + </button> + <div class="dropdown-menu"> + <a class="dropdown-item" (click)="mkFile(true)"> + {{ "i18n.object.file" | translate | titleCase }} + </a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" (click)="mkFile(false)"> + {{ "i18n.object.folder" | translate | titleCase }} + </a> </div> - <!-- <button class="btn btn-sm btn-secondary pull-right" style="cursor: pointer; margin-top: -35px;" > - <i class="fa fa-plus"></i> - </buton> --> - <div - class="btn-group pull-right" - style=" - cursor: pointer; - margin-top: -42px; - height: 30px; - width: 29px; - " + + <button + ngbPopover="{{ + 'i18n.action.goBack' | translate | titleCase + }}" + triggers="mouseenter:mouseleave" + data-placement="bottom" + class="btn btn-sm btn-secondary" + (click)="navBack()" + *ngIf="directorioActual.padreId != -1" > - <button - ngbPopover="{{ 'i18n.action.new' | translate | titleCase }}" - triggers="mouseenter:mouseleave" - data-placement="bottom" - style="cursor: pointer; border-radius: 3px" - type="button" - class="btn btn-sm btn-secondary" - data-toggle="dropdown" - aria-haspopup="true" - aria-expanded="false" - > - <i class="fa fa-plus"></i> - </button> - <div class="dropdown-menu"> - <a class="dropdown-item" (click)="mkFile(true)"> - {{ "i18n.object.file" | translate | titleCase }} - </a> - <div class="dropdown-divider"></div> - <a class="dropdown-item" (click)="mkFile(false)"> - {{ "i18n.object.folder" | translate | titleCase }} - </a> - </div> - </div> + <i aria-hidden="true" class="fa fa-arrow-up"></i> + </button> - <div - class="btn-group pull-right" - style=" - cursor: pointer; - margin-top: -42px; - height: 30px; - width: 29px; - margin-right: 36px; - " + <button + ngbPopover="{{ 'i18n.action.order' | translate | titleCase }}" + triggers="mouseenter:mouseleave" + data-placement="bottom" + type="button" + class="btn btn-sm btn-secondary" + data-toggle="dropdown" + aria-haspopup="true" + aria-expanded="false" > - <button - ngbPopover="{{ - 'i18n.action.order' | translate | titleCase - }}" - triggers="mouseenter:mouseleave" - data-placement="bottom" - style="cursor: pointer; border-radius: 3px; width: 36px" - type="button" - class="btn btn-sm btn-secondary" - data-toggle="dropdown" - aria-haspopup="true" - aria-expanded="false" - > - <i class="fa fa-sort"></i> - </button> - <div class="dropdown-menu"> - <a class="dropdown-item" (click)="ordenarPorTipo()"> - {{ "i18n.msg.order.kind" | translate }} - </a> - <div class="dropdown-divider"></div> - <a class="dropdown-item" (click)="ordenarPorFecha()"> - {{ "i18n.msg.order.date" | translate }} - </a> - </div> + <i class="fa fa-sort"></i> + </button> + <div class="dropdown-menu"> + <a class="dropdown-item" (click)="ordenarPorTipo()"> + {{ "i18n.msg.order.kind" | translate }} + </a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" (click)="ordenarPorFecha()"> + {{ "i18n.msg.order.date" | translate }} + </a> </div> </div> + <div class="card-block"> <div class="row listado-archivos" @@ -162,47 +125,31 @@ <li [ngbNavItem]="2"> <a ngbNavLink>{{ "i18n.action.shared" | translate | titleCase }}</a> <ng-template ngbNavContent> - <div class="card"> - <div> - <div - class="btn-group pull-right" - style=" - cursor: pointer; - margin-top: -42px; - height: 30px; - width: 29px; - margin-right: 36px; - " + <div class="card" *ngIf="esAlumno"> + <div class="matefun-tab-options"> + <button + ngbPopover="{{ 'i18n.action.order' | translate | titleCase }}" + triggers="mouseenter:mouseleave" + data-placement="bottom" + type="button" + class="btn btn-sm btn-secondary" + data-toggle="dropdown" + aria-haspopup="true" + aria-expanded="false" > - <button - ngbPopover="{{ - 'i18n.action.order' | translate | titleCase - }}" - triggers="mouseenter:mouseleave" - data-placement="bottom" - style="cursor: pointer; border-radius: 3px; width: 36px" - type="button" - class="btn btn-sm btn-secondary" - data-toggle="dropdown" - aria-haspopup="true" - aria-expanded="false" - > - <i class="fa fa-sort"></i> - </button> - <div class="dropdown-menu"> - <a class="dropdown-item" (click)="ordenarPorTipo()"> - {{ "i18n.msg.order.kind" | translate }} - </a> - <div class="dropdown-divider"></div> - <a class="dropdown-item" (click)="ordenarPorFecha()"> - {{ "i18n.msg.order.date" | translate }} - </a> - </div> + <i aria-hidden="true" class="fa fa-sort"></i> + </button> + <div class="dropdown-menu"> + <a class="dropdown-item" (click)="ordenarPorTipo()"> + {{ "i18n.msg.order.kind" | translate }} + </a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" (click)="ordenarPorFecha()"> + {{ "i18n.msg.order.date" | translate }} + </a> </div> </div> - </div> - <div class="card" *ngIf="esAlumno"> <div class="card-block"> <div class="row listado-archivos" @@ -221,14 +168,15 @@ " (click)="seleccionarArchivo(arch)" class="col-sm-3 col-4 matefun-file-wrapper" + style="cursor: pointer" > <i class="fa fa-file-text" - style="font-size: 3em; cursor: pointer; color: #ff8383" + style="font-size: 3em; color: #ff8383" aria-hidden="true" ></i> - <p style="cursor: pointer">{{ arch.nombre }}</p> + <p>{{ arch.nombre }}</p> </div> </div> </div> @@ -251,7 +199,7 @@ class="btn btn-sm btn-secondary pull-left mr-2" (click)="cargarArchivo()" > - <i class="fa fa-pencil"></i> + <i aria-hidden="true" class="fa fa-pencil"></i> </button> <button ngbPopover="{{ 'i18n.action.delete' | translate | titleCase }}" @@ -260,7 +208,7 @@ class="btn btn-sm btn-secondary pull-left mr-2" (click)="mostrarEliminarDialogo()" > - <i class="fa fa-remove"></i> + <i aria-hidden="true" class="fa fa-remove"></i> </button> <button ngbPopover="{{ 'i18n.action.move' | translate | titleCase }} {{ @@ -271,7 +219,7 @@ class="btn btn-sm btn-secondary pull-left mr-2" (click)="seleccionarDirectorioAMover()" > - <i class="fa fa-cut"></i> + <i aria-hidden="true" class="fa fa-cut"></i> </button> <button class="btn btn-sm btn-secondary pull-left mr-2" @@ -369,6 +317,7 @@ <i style="color: rgb(220, 220, 220); font-size: 10em; padding: 0.1em" class="fa fa-file-text" + aria-hidden="true" ></i> </div> </div> diff --git a/Frontend Angular 4/src/styles/_responsive.scss b/Frontend Angular 4/src/styles/_responsive.scss index 74807dc69002ee75b76a56b7758c0b60eaf29265..1cb26f291acbf8aa2385a3aee14df0024e017707 100755 --- a/Frontend Angular 4/src/styles/_responsive.scss +++ b/Frontend Angular 4/src/styles/_responsive.scss @@ -137,3 +137,15 @@ text { // top: 80px !important; // } // } + +.matefun-tab-options { + display: flex; + align-self: flex-end; + position: relative; + width: fit-content; + transform: translateY(-33px); + + & > button { + width: 30px; + } +} diff --git a/Frontend Angular 4/src/styles/bootstrap/_card.scss b/Frontend Angular 4/src/styles/bootstrap/_card.scss index 177504f7f4004b9afcdc9bc8e0250695313cee3e..1c8c6b26e93f916bcc9a37121abb6b53d5339a50 100755 --- a/Frontend Angular 4/src/styles/bootstrap/_card.scss +++ b/Frontend Angular 4/src/styles/bootstrap/_card.scss @@ -3,10 +3,9 @@ // .card { - position: relative; display: flex; flex-direction: column; - background-color: $card-bg; + position: relative; border: $card-border-width solid $card-border-color; @include border-radius($card-border-radius); }