feat(plex-layout): sidebar expansible/contraible #232
Conversation
JSantarelli
commented
Sep 26, 2020
•
JSantarelli
commented
- Es un atributo que permite desplegar o replegar el sidebar según su necesidad de uso, permitiendo al usuario realizar operaciones de carga y edición en un espacio flexible (antiguamente estático y reducido).
- Se implementa mediante el selector [resizable]=true y presenta atributos que delimitan y secuencian su expansión: [min], [max] y [steps].
- Toma como valor máximo 10 y mínimo 2 de las 12 columnas que componen el layout.
- Los pasos intermedios pueden setearse en 0 | 1 | 2 | 3 tomando como valor por defecto '0'.
- Se acciona mediate eventos de click o dragueo.
JSantarelli
force-pushed
the
plex-152
branch
2 times, most recently
from
2ddbf75
to
d98bb43
Compare
|
La rebaseás y sale! |
JSantarelli
force-pushed
the
plex-152
branch
2 times, most recently
from
a7a936f
to
b03301e
Compare
src/lib/layout/layout.component.ts
Outdated
| @@ -40,26 +40,41 @@ import { Subscription } from 'rxjs-compat/Subscription'; | |||
| [class.focused]="foco === 'sidebar'" | |||
| [class.not-focused]="foco && foco !== 'sidebar'"> | |||
| <ng-content select="plex-layout-sidebar"></ng-content> | |||
| </div> | |||
| <span class="resizable-btn-wrapper" [class.resizable]="resizable === 'true'" draggable="true"> | |||
There was a problem hiding this comment.
- Debería hacerse una comparación booleana en lugar de con strings.
draggablequedó sin uso, no?
| <span class="resizable-btn-wrapper" [class.resizable]="resizable === 'true'" draggable="true"> | |
| <span class="resizable-btn-wrapper" [class.resizable]="resizable"> |
There was a problem hiding this comment.
-
Ah bien, gracias andrews...corrijo
-
Está el evento dragover aplicado al plex-button que extiende/contrae
There was a problem hiding this comment.
Agregaría un *ngIf para que no siquieran existan los botonees si no resizable
src/lib/layout/layout.component.ts
Outdated
| this.cambiaValor(this.sidebarSize); | ||
| } | ||
|
|
||
| public contraer() { |
There was a problem hiding this comment.
Me parece que la funcionalidad de contraer y expandir debería ser configurable, quizá por pasos con mínimos y máximos:
Ej: el sidebar se contrae/expande entre 4 y 6 columnas, pasando de 2 en 2, algo como:
<plex-layout resizable="true" min="4" max="6" step="2">
Si te parece lo podemos analizar.
There was a problem hiding this comment.
Buenísimo, Podemos hacer unas pruebas para una primera versión con esos parámetros y una vez implementado monitorear su uso.
|
@JSantarelli está genial la funcionalidad, me parece que le falta un toque para que sea más configurable, te parece que lo sigamos viendo en plex-lab? jaja |
src/lib/layout/layout.component.ts
Outdated
|
|
||
| private subscription1: Subscription; | ||
| private subscription2: Subscription; | ||
| private valorInicial = new BehaviorSubject<number>(4); |
There was a problem hiding this comment.
Esta variable no se usa para nada.
src/lib/layout/layout.component.ts
Outdated
| @@ -40,26 +40,41 @@ import { Subscription } from 'rxjs-compat/Subscription'; | |||
| [class.focused]="foco === 'sidebar'" | |||
| [class.not-focused]="foco && foco !== 'sidebar'"> | |||
| <ng-content select="plex-layout-sidebar"></ng-content> | |||
| </div> | |||
| <span class="resizable-btn-wrapper" [class.resizable]="resizable === 'true'" draggable="true"> | |||
There was a problem hiding this comment.
Agregaría un *ngIf para que no siquieran existan los botonees si no resizable
Gracias marian por las observaciones. En este punto, por defecto el recurso está en 'false'. Sólo se activará en las pantallas que consideremos necesaria la expansión del sidebar. |
Ese comentario se me olvido borrarlo. Después lo vi. 👍 |
JSantarelli
force-pushed
the
plex-152
branch
5 times, most recently
from
e3f9cc5
to
e32f644
Compare
* fix(plex-item): expande contenedor badge, margina botones * feat(plex-list): item seleccionable opcional * fix(plex-accordion): se normalizan con y sin title * fix(plex-item): herencia de CSS incorrecta * fix(plex-hint): se reduce size de icon * feat(plex-list): items inverted Co-authored-by: Julio Santarelli <santarellijulio@gmail.com>
# [7.3.0](v7.2.0...v7.3.0) (2020-10-27) ### Bug Fixes * **plex-bool:** mejora contraste en sidebar invert ([#235](#235)) ([d1d4831](d1d4831)) * **plex-item:** corrige ancho de buttons ([#237](#237)) ([e72811d](e72811d)) ### Features * **plex-item:** opcional seleccionable ([#212](#212)) ([8150029](8150029))
## [7.3.1](v7.3.0...v7.3.1) (2020-10-30) ### Bug Fixes * **accordion:** se arregla layout interno ([#239](#239)) ([33f5fbb](33f5fbb))
