From 5513e9c16c1b6112ff267472f321f0a2939b1c18 Mon Sep 17 00:00:00 2001
From: ncamera <nico_camera98@hotmail.com>
Date: Fri, 11 Nov 2022 00:50:28 -0300
Subject: [PATCH] =?UTF-8?q?Mejorar=20distribuci=C3=B3n=20de=20buttons=20en?=
=?UTF-8?q?=20el=20tab=20de=20archivos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../layout/archivos/archivos.component.html | 211 +++++++-----------
.../src/styles/_responsive.scss | 12 +
.../src/styles/bootstrap/_card.scss | 3 +-
3 files changed, 93 insertions(+), 133 deletions(-)
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 d0f451e..6193e34 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 74807dc..1cb26f2 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 177504f..1c8c6b2 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);
}
--
GitLab