-
Notifications
You must be signed in to change notification settings - Fork 13
Definición de temas
El fichero common/themes/definitions/<NombreDelTena>/<NombreDelTema>.js es el fichero principal de definición del tema. En él se definen sus variables principales, tales como la paleta de colores o la fuente empleadas. Se trata de un diccionario con la siguiente estructura:
export const DEFINITION = {
viewName: ['English title', 'Spanish title'],
font: 'Ubuntu',
background: {
f16_9: [
'#ffffff',
'url(/themes/orange/background_images/back169.jpg)',
],
f4_3: [
'#ffffff',
'url(/themes/orange/background_images/back43.jpg)',
],
},
colors: {
themeColor1: '#17CFC8',
themeColor2: '#ff444d',
themeColor3: '#4bff9f',
themeColor4: '#65caff',
themeColor5: '#ffbe45',
themeColor6: '#1d1d1d',
themeColor7: '#1d1d1d',
},
images: {
template1: { left: 'left.jpg' },
template3: { topLeft: 'forest.jpg', topRight: 'jungle.jpg', bottomLeft: 'desert.jpg', bottomRight: 'meadow.jpg' },
template7: { left: 'placeholder.svg' },
},
};A continuación se detallan algunos de los parámetros del diccionario.
Array que contiene el nombre del tema en español (primera posición) y en inglés (segunda posición).
Fuente utilizada por el tema. Ha de estar disponible en Google Fonts.
Define los colores e imágenes de fondo disponibles en el tema. Se difenrencian en dos grupos según la relación de aspecto del recurso (4:3 ó 16:9). De esta forma pueden elegirse imágenes distintas para cada caso. La imágenes escogidas deberán ubicarse en el directorio dist/themes/<NombreDelTema>/background_images/
Define la paleta de colores del tema mediante un sistema de clave-valor. La clave ha de ser de la forma themeColorX. Los colores pueden introducirse tanto en formato rgb como rgba.
Algunas de las plantillas de EDiphy contienen instancias de plugin de imágenes. En este campo pueden modificarse las imágenes mostradas por defecto en esas intancias para cada una de las plantillas. Se emplea un diccionario que tiene como clave cada una de las plantillas y como valores diccionarios con palabras clave que toman como valor la imagena asignada a cada instancia. Por ejemplo:
images: {
template1: { left: 'left.jpg' },
template3: { background: 1, topLeft: 'forest.jpg', topRight: 'jungle.jpg', bottomLeft: 'desert.jpg', bottomRight: 'meadow.jpg' },
template7: { left: 'placeholder.svg' },
},Las plantillas de la herramienta que contienen imágenes son la 1, la 3 y la 7. Por ejemplo, en el código anterior se asigna a la imagen superior izquierda (topLeft) la imagen forest.jpg. Las claves a emplear en estas plantillas son leftpara la 1 y 7 y topLeft, topRight, bottomLeft y bottomRight para la 3. En caso de que se creen nuevas plantillas para el tema puedes emplear las claves que prefieras para cada una de las instancias de imagen contenidas en dichas plantillas. Más adelante se explica como definir nuevas plantillas para un tema.
Además, puedes utilizar este campo para definir la imagen de fondo por defecto de cada una de las plantillas. Para ello introduce como clave background y como valor la posición de la imagen deseada dentro del array de imágenes de fondo (background). En el ejemplo se define para la plantilla 3 la segunda imagen definida 1dentro del campo background.
A la hora de añadir nuevas diapositivas, EDiphy ofrece trece plantillas prediseñadas. El sistema de temas permite definir plantillas adicionales a las ya existentes mediante JSON:
templates: [
{
"name": "CustomTemplate1",
"boxes": [
{
"box": {
"x": "0",
"y": "0",
"width": "25%",
"height": "100%",
},
"toolbar": {
"name": "HotspotImages",
"url": `templates/template1/left`,
},
"thumbnail": {
"icon": "filter_hdr",
"icon_color": "#D1550F",
"color": "#ff9a3c",
},
},
{
"box": {
"x": "30%",
"y": "10%",
"width": "60%",
"height": "12%",
},
"toolbar": {
"name": "BasicText",
"text": "<h1 class='no_margins'>" + i18n.t('templates.text_images') + "</h1>",
"style": { "color": 'var(--themeColor1)' },
},
"thumbnail": {
"icon": "",
"icon_color": "",
"color": "#D1550F",
},
},
{
"box": {
"x": "30%",
"y": "30%",
"width": "60%",
"height": "40%",
},
"toolbar": {
"name": "BasicText",
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque diam urna, hendrerit porta sollicitudin nec, gravida quis massa. Aenean ac mi nulla. Phasellus ac dui consectetur, ultrices dui at, convallis quam. Quisque ac varius nibh. Pellentesque egestas, sem a placerat laoreet, enim lectus volutpat nisi, at vulputate tortor leo ac risus. Mauris pretium et enim eu faucibus. Vestibulum ornare odio eget eros ullamcorper, et iaculis libero venenatis. </p>",
},
"thumbnail": {
"icon": "format_align_left",
"icon_color": "#706F6F",
"color": "#B2B2B2",
},
},
],
},
],Como se observa, para cada plantilla se define un campo name con el nombre de la misma y uno boxesque contiene un array de objetos que definen las instancias de plugin inicializadas en la plantilla. Cada uno de los objetos contiene los siguientes campos:
Sirve para definir el tamaño y posición de la caja de contenido de la instanciad de plugin. Los campos x e y definen la posición de la esquina superior izquierda de la misma mediante offsets porcentuales. Los campos width y height, también en unidades porcentuales, definen el ancho y alto de la caja.
Define el tipo de plugin al que pertenece la instancia en su campo nameasí como los valores que pueda requerir el estado inicial del plugin. En el ejemplo se intruduce el campo textpara una instancia de plugin de caja de texto.
En caso de introducir una instancia de plugin de imagen HotspotImage de define la imagen por defecto a través del campo url. En este caso se pueden emplear las imágenes definidas en el campo images del diccionario de definición del tema mediante la sintaxis: url: templates/<clave_template>/<clave_imagen.
También es posible definir estilos inline declarándolos dentro de un campo style.
En el modal de adición de nuevas diapositivas se muestran miniaturas de las plantillas. Estas miniaturas se contruyen en base a las plugins instanciados en el campo boxes. En thumbnail es posible definir un icono (icon)que se posicione sobre la caja en la miniatura (material icons) así como el color del mismo y de la caja (icon_colory color). Se recomienda definir un estilo parecido al tema que permita al usuario distinguir a simple vista que las plantillas son personalizadas y no las propias de la aplicación.
Adicionalmente se dispone de un fichero SCSS en el que es posible definir nuevas reglas de estilo para el tema creado, mediante asignación de clases. Puedes encontrar dicho fichero en common/themes/scss-files/<NombreDelTena>/<NombreDelTema>.scss. Para el tema por defecto de EDiphy el fichero es:
.default {
font-family: var(--themePrimaryFont, 'Ubuntu');
.title {
display: block;
background-color: transparent;
.cab {
font-size: 2em;
padding: 1em;
.cabtabla_numero{
padding: 0.2em 0.3em;
line-height: 1em;
color: var(--themeColor1);
font-family: var(--themePrimaryFont, 'Ubuntu');
}
.editCourseTitle{
font-size: 1em;
height: auto;
border-radius: 0;
border-color: var(--themeColor1);
}
.editNavTitle{
font-size: 0.8em;
height: auto;
border-radius: 0;
border-color: var(--themeColor1);
}.editNavSubTitle{
font-size: 0.6em;
height: auto;
border-radius: 0;
color: var(--themeColor1);
}
h1{
margin: 0.1em;
font-size: 1em;
color: var(--themeColor1);
}
h2{
margin: 0.4em;
font-size: 0.8em;
color: var(--themeColor1);
}
h3{
margin: 0.4em;
font-size: 0.7em;
color: var(--themeColor3);
}
h4{
margin: 0.4em;
font-size: 0.6em;
color: var(--themeColor4);
}
.breadcrumb a{
margin: 0.4em;
}
.infoIcon {
cursor: help;
font-size: 0.9em;
color: #555;
vertical-align: top;
position: absolute;
top: 0.7em;
right: 0.7em;
}
}
}
}Para que el tema creado se aplique correctamente es obligatorio que la clase principal del fichero tenga el mismo nombre del tema .nombreDelTema. La estructura deseada se crea por defecto al utilizar la herramienta CLI.
En el fichero se emplean como variables personalizables CSS los colores definidos en el campo colors del sistema básico. De esta forma es posible asignar determinados colores a cada elemento.
Importante: todas las reglas de estilo deberán tener unidades relativas em. De lo contrario el sistema de temas transformara las unidades en px a emtomando como tamaño base 14px.