Los componentes son uno de los bloques de construcción clave del sistema de diseño. Cada componente ha sido diseñado y codificado para resolver un problema específico de la interfaz de usuario, como presentar una lista de opciones, permitir el envío de un formulario, proporcionar comentarios al usuario, etc.
Todos los componentes han sido diseñados para trabajar armoniosamente juntos, como partes de un todo mayor. Es por esto que cada componente deber ser integrado y construido siguiendo nuestros lineamientos de usabilidad y guías de construcción. Toda esta información se encuentra en la página Lineamientos de construcción de nuestro sistema de diseño. Además se debe tener en consideración la accesibilidad en el uso de la tipografía y la accesibilidad del color.
Para una mejor navegación puedes revisar la Tabla de contenidos.
Planificación
La construcción del planificador de recursos se basó en el código de Full Calendar el cual nos dió el pie inicial para definir la estructura y funcionalidades de este componente.
La vista de planificación cuenta con varios módulos dentro del mismo.
Filtros: los cuales son relacionados a las tareas, pero pueden ser modificados según la necesidad del negocio.
Selector de tiempo: puedes seleccionar un rango de fechas, moverte entre días, y cambiar la manera de desplegar la información de día a semana.
Planificador: vamos a descomponer las funcionalidades a continuación.
El planificador cuenta con dos niveles de profundidad, tareas y sub tareas asociadas, además del despliegue de información contempla iconos para ejecutar diferentes acciones.
Información de la tarea: Nombre, Estatus, Ubicación, ID asociado, Hora.
Información de la sub tarea: Tipo, Ubicación, Estatus, Hora.
Caret down: cada tarea que tiene asociadas sub tareas mostrará este ícono para desplegar el detalle de las sub tareas asociadas.
Icono de Información: donde se despliega información relacionada a la tarea (Numero de tarea, ID asociado, tipo de tarea, ubicación, etapa)
Icono de Edición: Te muestra la vista de edición de esa tarea.
Icono de Más: Es para agregar una tarea o sub tarea asociada dependiendo del nivel en el que se ubique.
Vista Planificación
Detalle subtarea
Interacciones
Hover nueva orden de trabajo
Hover nueva sub tarea
Hover información tarea
Componentes asociados
La vista de planificación necesita integrar un selector de tiempo para fijar la información de la columna de las horas y sub tareas.
Además tiene la opción de poder ser filtrado con algunos parámetros.
Selector de tiempo
Filtros
Formularios
Text Field
Los componentes Text Field son usados como campos de texto, su contenido puede ser números, textos o alfanumérico.
Text Area
Los componentes Text Area son utilizados como campos de texto, se diferencian de los Text Field en que son capaces de almacenar una cantidad mucho mayor de texto, incluso son capaces de crecer para contener más información.
Search
El componente Search es utilizado para realizar la busqueda del contenido de forma mucho mas rápida, evitando tener que revisar cada sección para encontrar lo que se está buscando.
Item List
Permiten crear conjuntos de elementos en forma de lista en un
menú desplegable.
Switch
Los Switches son componentes que representan una variable booleana (TRUE / FALSE), Principalmente relacionado a configuraciones.
File
El componente File es utilizado para visualizar, agrupar y seleccionar archivos dentro de una vista.
Slide-sheet
El Frame Sidesheet es utilizado como un menú configurable lateral, puede ser usado como formulario o panel de configuración.
Picker date
El componente Picker Date es utilizado como una forma expliícita y sencilla de seleccionar una fecha.
Picker Time
El componente Picker Time es utilizado como una forma expliícita y sencilla de seleccionar una hora.
Tablas
Las tablas de datos muestran conjuntos de datos en filas y columnas.
Mobile
Task
El Frame Task es utilizado como la fusión de dos componentes.
Está construido en Frame para permitir utilizar su función de Auto Layout.
El componente Task Title es utilizado como tarea o etapa principal, puede mostrar la cantidad de tareas pendientes además de un Progress Bar.
Task item
El componente Task Item es utilizado como apéndice de Task Title, representa una tarea individual y puede tener solo 2 valores.
Mensajes
Dialog
El componente Dialog es utilizado para dar información o solicitar una acción al usuario. Los botones deben ajustarse por separado.
Banner
El componente Banner es utilizado para desplegar información importante y permite tomar decisiones relacionadas a dicha información.
Event
El componente Event es utilizado para visualizar un evento o trabajo, dispone información realcionada y contiene un componente Alert.
Ayuda
Snack Bar
Los componentes Snackbar son utilizados como respuesta a un acción ejectudada por un usuario. Pueden tener acciones.
Scrollbar
El componente Scroll Bar es utilizado para desplazar la pantalla en el dispositivo, puede ser utilizado tanto verticalmente como horizontalmente.
Divider
El componente Divider es utilizado como un separador, ayuda a crear jerarquía y separar visualmente espacios.
Tooltip
Indicadores o información. Aparecen a través de un hover, se suele usar para indicar la acción que ejecutará un botón.
Chip
Los “Chips” son pequeñas etiquetas, pueden ser usadas como filtros clickeables o como identificadores y clasificadores.
Tarjetas
Content cards
Block
Data
El componente Data es utilizado principalmente en el Dashboard, dispone información de datos a modo de resumen.
