scottk/OptimCloud-gw-ui
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/OptimCloud-gw-ui.git synced 2025-11-02 03:07:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #9 from stephb9959/31-device-notes-display

Browse Source 
31 device notes display
This commit is contained in:
Charles
2021-07-07 09:51:18 -04:00
committed by GitHub
parent cc8be05594 c4b19a3b24
commit 4b2bde3c3a
13 changed files with 203 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/locales/de/translation.json
View File

@@ -25,6 +25,8 @@
"title": "Gerätebefehle"
},
"common": {
"add": "Hinzufügen",
"adding_ellipsis": "Hinzufügen ...",
"are_you_sure": "Bist du sicher?",
"cancel": "Abbrechen",
"certificate": "Zertifikat",
@@ -38,6 +40,7 @@
"connected": "Verbindung wurde hergestellt",
"copied": "kopiert!",
"copy_to_clipboard": "In die Zwischenablage kopieren",
"created_by": "Erstellt von",
"custom_date": "Benutzerdefiniertes Datum",
"date": "Datum",
"day": "tag",
@@ -72,6 +75,7 @@
"na": "(unbekannt)",
"need_date": "Du brauchst ein Datum...",
"no": "Nein",
"no_items": "Keine Gegenstände",
"not_connected": "Nicht verbunden",
"off": "Aus",
"on": "An",
@@ -103,6 +107,7 @@
"last_configuration_change": "Letzte Konfigurationsänderung",
"last_configuration_download": "Letzter Konfigurations-Download",
"location": "Ort",
"note": "Hinweis",
"notes": "Anmerkungen",
"owner": "Inhaber",
"title": "Gerätekonfiguration",

5
public/locales/en/translation.json
View File

@@ -25,6 +25,8 @@
"title": "Command History"
},
"common": {
"add": "Add",
"adding_ellipsis": "Adding...",
"are_you_sure": "Are you sure?",
"cancel": "Cancel",
"certificate": "Certificate",
@@ -38,6 +40,7 @@
"connected": "Connected",
"copied": "Copied!",
"copy_to_clipboard": "Copy to clipboard",
"created_by": "Created By",
"custom_date": "Custom Date",
"date": "Date",
"day": "day",
@@ -72,6 +75,7 @@
"na": "N/A",
"need_date": "You need a date...",
"no": "No",
"no_items": "No Items",
"not_connected": "Not Connected",
"off": "Off",
"on": "On",
@@ -103,6 +107,7 @@
"last_configuration_change": "Last Configuration Change",
"last_configuration_download": "Last Configuration Download",
"location": "Location",
"note": "Note",
"notes": "Notes",
"owner": "Owner",
"title": "Configuration",

5
public/locales/es/translation.json
View File

@@ -25,6 +25,8 @@
"title": "Historial de Comandos"
},
"common": {
"add": "Añadir",
"adding_ellipsis": "Añadiendo ...",
"are_you_sure": "¿Estás seguro?",
"cancel": "Cancelar",
"certificate": "Certificado",
@@ -38,6 +40,7 @@
"connected": "Conectado",
"copied": "Copiado!",
"copy_to_clipboard": "Copiar al portapapeles",
"created_by": "Creado por",
"custom_date": "Fecha personalizada",
"date": "Fecha",
"day": "día",
@@ -72,6 +75,7 @@
"na": "N / A",
"need_date": "Necesitas una cita ...",
"no": "No",
"no_items": "No hay articulos",
"not_connected": "No conectado",
"off": "Apagado",
"on": "en",
@@ -103,6 +107,7 @@
"last_configuration_change": "Último cambio de configuración",
"last_configuration_download": "Descarga de la última configuración",
"location": "Ubicación",
"note": "Nota",
"notes": "Notas",
"owner": "Propietario",
"title": "Configuración",

5
public/locales/fr/translation.json
View File

@@ -25,6 +25,8 @@
"title": "Historique des commandes"
},
"common": {
"add": "Ajouter",
"adding_ellipsis": "Ajouter...",
"are_you_sure": "Êtes-vous sûr?",
"cancel": "annuler",
"certificate": "Certificat",
@@ -38,6 +40,7 @@
"connected": "Connecté",
"copied": "Copié!",
"copy_to_clipboard": "Copier dans le presse-papier",
"created_by": "Créé par",
"custom_date": "Date personnalisée",
"date": "Rendez-vous amoureux",
"day": "journée",
@@ -72,6 +75,7 @@
"na": "N / A",
"need_date": "Vous avez besoin d'un rendez-vous...",
"no": "Non",
"no_items": "Pas d'objet",
"not_connected": "Pas connecté",
"off": "De",
"on": "sur",
@@ -103,6 +107,7 @@
"last_configuration_change": "Dernière modification de configuration",
"last_configuration_download": "Téléchargement de la dernière configuration",
"location": "Emplacement",
"note": "Remarque",
"notes": "Remarques",
"owner": "Propriétaire",
"title": "Configuration",

5
public/locales/pt/translation.json
View File

@@ -25,6 +25,8 @@
"title": "Histórico de Comandos"
},
"common": {
"add": "Adicionar",
"adding_ellipsis": "Adicionando ...",
"are_you_sure": "Você tem certeza?",
"cancel": "Cancelar",
"certificate": "Certificado",
@@ -38,6 +40,7 @@
"connected": "Conectado",
"copied": "Copiado!",
"copy_to_clipboard": "Copiar para área de transferência",
"created_by": "Criado Por",
"custom_date": "Data personalizada",
"date": "Encontro",
"day": "dia",
@@ -72,6 +75,7 @@
"na": "N / D",
"need_date": "Você precisa de um encontro ...",
"no": "Não",
"no_items": "Nenhum item",
"not_connected": "Não conectado",
"off": "Fora",
"on": "em",
@@ -103,6 +107,7 @@
"last_configuration_change": "Última Mudança de Configuração",
"last_configuration_download": "Último download da configuração",
"location": "Localização",
"note": "Nota",
"notes": "notas",
"owner": "Proprietário",
"title": "Configuração",

32
src/assets/icons/CoreuiLogo.js Normal file
View File

@@ -0,0 +1,32 @@
export const logo = [
'608 134',
`
<title>coreui react pro</title>
<g>
<g style="fill:#00a1ff">
<path d="M362.0177,90.1512,353.25,69.4149a.2507.2507,0,0,0-.2559-.1914H343.01a.2263.2263,0,0,0-.2559.2559V90.0233a.5657.5657,0,0,1-.64.64h-1.2163a.5652.5652,0,0,1-.64-.64V46.5028a.5655.5655,0,0,1,.64-.64H353.442a9.9792,9.9792,0,0,1,7.7437,3.2324A12.2,12.2,0,0,1,364.13,57.64a12.4389,12.4389,0,0,1-2.24,7.584,9.37,9.37,0,0,1-6.08,3.7441c-.1709.086-.2139.1915-.128.3194l8.7041,20.6084.064.2558q0,.5127-.5757.5118h-1.1523A.703.703,0,0,1,362.0177,90.1512ZM342.754,48.3593v18.496a.2259.2259,0,0,0,.2559.2559h10.3037a7.6713,7.6713,0,0,0,6.0166-2.5918,9.8807,9.8807,0,0,0,2.3037-6.8164,10.2875,10.2875,0,0,0-2.272-6.9756,7.6033,7.6033,0,0,0-6.0483-2.624H343.01A.2263.2263,0,0,0,342.754,48.3593Z"/>
<path d="M401.3263,48.1034H381.2945a.2262.2262,0,0,0-.2558.2559v18.496a.2259.2259,0,0,0,.2558.2559h13.8238a.5664.5664,0,0,1,.6406.64v.96a.5663.5663,0,0,1-.6406.6406H381.2945a.2263.2263,0,0,0-.2558.2559v18.56a.2258.2258,0,0,0,.2558.2558h20.0318a.5671.5671,0,0,1,.6406.6407v.96a.566.566,0,0,1-.6406.64H379.1827a.5653.5653,0,0,1-.64-.64V46.5028a.5656.5656,0,0,1,.64-.64h22.1436a.5664.5664,0,0,1,.6406.64v.96A.5663.5663,0,0,1,401.3263,48.1034Z"/>
<path d="M439.047,90.1512l-2.4317-8.832a.2971.2971,0,0,0-.32-.1924H419.5274a.2957.2957,0,0,0-.32.1924l-2.3681,8.7676a.6577.6577,0,0,1-.7036.5762H414.919a.5385.5385,0,0,1-.5756-.7041l12.0317-43.584a.6436.6436,0,0,1,.7041-.5117h1.6a.6442.6442,0,0,1,.7041.5117l12.16,43.584.0644.1923q0,.5127-.64.5118h-1.2163A.6428.6428,0,0,1,439.047,90.1512ZM419.9435,78.9188a.3031.3031,0,0,0,.2236.0967h15.4883a.3048.3048,0,0,0,.2236-.0967c.0645-.0635.0742-.1162.0322-.1592l-7.872-28.9287c-.043-.0849-.086-.1279-.128-.1279s-.0859.043-.1279.1279L419.9112,78.76C419.8683,78.8026,419.879,78.8553,419.9435,78.9188Z"/>
<path d="M456.6017,87.911a11.6372,11.6372,0,0,1-3.3277-8.7041V57.1913a11.4158,11.4158,0,0,1,3.36-8.5762,12.0941,12.0941,0,0,1,8.8-3.2637,12.2566,12.2566,0,0,1,8.8643,3.2315,11.3927,11.3927,0,0,1,3.36,8.6084v.64a.5663.5663,0,0,1-.6406.6407l-1.28.0634q-.6408,0-.64-.5761v-.8321a9.289,9.289,0,0,0-2.6558-6.9121,10.6734,10.6734,0,0,0-14.0161,0,9.2854,9.2854,0,0,0-2.6563,6.9121V79.3993a9.2808,9.2808,0,0,0,2.6563,6.9121,10.67,10.67,0,0,0,14.0161,0,9.2843,9.2843,0,0,0,2.6558-6.9121v-.7686q0-.5757.64-.5752l1.28.0635a.5667.5667,0,0,1,.6406.6406v.5118a11.4952,11.4952,0,0,1-3.36,8.64,13.6227,13.6227,0,0,1-17.6963,0Z"/>
<path d="M514.4376,46.5028v.96a.5658.5658,0,0,1-.64.6406H503.046a.2263.2263,0,0,0-.2559.2559v41.664a.566.566,0,0,1-.6406.64h-1.2158a.5652.5652,0,0,1-.64-.64V48.3593a.2266.2266,0,0,0-.2558-.2559H489.8619a.5656.5656,0,0,1-.64-.6406v-.96a.5656.5656,0,0,1,.64-.64H513.798A.5658.5658,0,0,1,514.4376,46.5028Z"/>
<path d="M522.0665,89.5116a2.8385,2.8385,0,0,1-.8-2.0488,2.9194,2.9194,0,0,1,.8-2.1114,2.7544,2.7544,0,0,1,2.08-.832,2.8465,2.8465,0,0,1,2.9438,2.9434,2.7541,2.7541,0,0,1-.832,2.08,2.9221,2.9221,0,0,1-2.1118.8008A2.754,2.754,0,0,1,522.0665,89.5116Z"/>
<path d="M542.4054,88.0077a11.3123,11.3123,0,0,1-3.2-8.416v-5.44a.5656.5656,0,0,1,.64-.64h1.2158a.5661.5661,0,0,1,.64.64v5.5039a9.1424,9.1424,0,0,0,2.5283,6.72,8.9745,8.9745,0,0,0,6.6875,2.5605,8.7908,8.7908,0,0,0,9.28-9.28V46.5028a.5655.5655,0,0,1,.64-.64h1.2163a.566.566,0,0,1,.64.64V79.5917a11.2545,11.2545,0,0,1-3.2325,8.416,13.0618,13.0618,0,0,1-17.0556,0Z"/>
<path d="M580.35,88.1034a10.4859,10.4859,0,0,1-3.36-8.1279v-1.792a.5663.5663,0,0,1,.64-.6407h1.0884a.5668.5668,0,0,1,.64.6407v1.6a8.5459,8.5459,0,0,0,2.752,6.6562,10.5353,10.5353,0,0,0,7.36,2.4961,9.8719,9.8719,0,0,0,6.9761-2.3681,8.2161,8.2161,0,0,0,2.56-6.336,8.4,8.4,0,0,0-1.12-4.416,11.3812,11.3812,0,0,0-3.3281-3.3926,71.6714,71.6714,0,0,0-6.1763-3.7119,71.0479,71.0479,0,0,1-6.24-3.84,12.1711,12.1711,0,0,1-3.4238-3.68,10.2614,10.2614,0,0,1-1.28-5.3438,9.8579,9.8579,0,0,1,3.0718-7.7441,12.0122,12.0122,0,0,1,8.32-2.752q5.6954,0,8.96,3.1036a10.8251,10.8251,0,0,1,3.2642,8.2246v1.6a.5658.5658,0,0,1-.64.64h-1.1519a.5652.5652,0,0,1-.64-.64V56.8075a8.8647,8.8647,0,0,0-2.624-6.6885,9.9933,9.9933,0,0,0-7.232-2.5273,9.37,9.37,0,0,0-6.5278,2.1435,7.8224,7.8224,0,0,0-2.3682,6.1123,7.8006,7.8006,0,0,0,1.0244,4.16,10.387,10.387,0,0,0,3.0078,3.0391,62.8714,62.8714,0,0,0,5.9522,3.4882,71.0575,71.0575,0,0,1,6.72,4.2559,13.4674,13.4674,0,0,1,3.648,3.9365,10.049,10.049,0,0,1,1.28,5.1836,10.7177,10.7177,0,0,1-3.2637,8.1924q-3.2637,3.0717-8.832,3.0723Q583.71,91.1757,580.35,88.1034Z"/>
</g>
<g style="fill:#3c4b64">
<g>
<path d="M99.835,36.0577l-39-22.5167a12,12,0,0,0-12,0l-39,22.5166a12.0339,12.0339,0,0,0-6,10.3924V91.4833a12.0333,12.0333,0,0,0,6,10.3923l39,22.5167a12,12,0,0,0,12,0l39-22.5167a12.0331,12.0331,0,0,0,6-10.3923V46.45A12.0334,12.0334,0,0,0,99.835,36.0577Zm-2,55.4256a4,4,0,0,1-2,3.4641l-39,22.5167a4.0006,4.0006,0,0,1-4,0l-39-22.5167a4,4,0,0,1-2-3.4641V46.45a4,4,0,0,1,2-3.4642l39-22.5166a4,4,0,0,1,4,0l39,22.5166a4,4,0,0,1,2,3.4642Z"/>
<path d="M77.8567,82.0046h-2.866a4,4,0,0,0-1.9247.4934L55.7852,91.9833,35.835,80.4648V57.4872l19.95-11.5185,17.2893,9.4549a3.9993,3.9993,0,0,0,1.9192.4906h2.8632a2,2,0,0,0,2-2V51.2024a2,2,0,0,0-1.04-1.7547L59.628,38.9521a8.0391,8.0391,0,0,0-7.8428.09L31.8346,50.56a8.0246,8.0246,0,0,0-4,6.9287v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,77.8567,82.0046Z"/>
</g>
<g>
<path d="M172.58,45.3618a15.0166,15.0166,0,0,0-15,14.9995V77.6387a15,15,0,0,0,30,0V60.3613A15.0166,15.0166,0,0,0,172.58,45.3618Zm7,32.2769a7,7,0,0,1-14,0V60.3613a7,7,0,0,1,14,0Z"/>
<path d="M135.9138,53.4211a7.01,7.01,0,0,1,7.8681,6.0752.9894.9894,0,0,0,.9843.865h6.03a1.0108,1.0108,0,0,0,.9987-1.0971,15.0182,15.0182,0,0,0-15.7162-13.8837,15.2881,15.2881,0,0,0-14.2441,15.4163V77.2037A15.288,15.288,0,0,0,136.0792,92.62a15.0183,15.0183,0,0,0,15.7162-13.8842,1.0107,1.0107,0,0,0-.9987-1.0971h-6.03a.9894.9894,0,0,0-.9843.865,7.01,7.01,0,0,1-7.8679,6.0757,7.1642,7.1642,0,0,1-6.0789-7.1849V60.6057A7.1638,7.1638,0,0,1,135.9138,53.4211Z"/>
<path d="M218.7572,72.9277a12.1585,12.1585,0,0,0,7.1843-11.0771V58.1494A12.1494,12.1494,0,0,0,213.7921,46H196.835a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V74h6.6216l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771A4.1538,4.1538,0,0,1,213.7926,66h-9.8511V54h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
<path d="M260.835,46h-26a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V85a1,1,0,0,0-1-1h-19V72h13a1,1,0,0,0,1-1V65a1,1,0,0,0-1-1h-13V54h19a1,1,0,0,0,1-1V47A1,1,0,0,0,260.835,46Z"/>
<path d="M298.835,46h-6a1,1,0,0,0-1,1V69.6475a7.0066,7.0066,0,1,1-14,0V47a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V69.6475a15.0031,15.0031,0,1,0,30,0V47A1,1,0,0,0,298.835,46Z"/>
<rect x="307.835" y="46" width="8" height="38" rx="1"/>
</g>
</g>
</g>
`,
];

3
src/assets/icons/index.js
View File

@@ -123,7 +123,10 @@ import {
cilWarning,
} from '@coreui/icons';
import { logo } from './CoreuiLogo';
export const icons = {
logo,
cilAlignCenter,
cilAlignLeft,
cilAlignRight,

4
src/components/CommandHistory/index.js
View File

@@ -321,9 +321,7 @@ const DeviceCommands = () => {
items={commands ?? []}
fields={columns}
className={styles.whiteIcon}
columnFilter
sorter
sorterValue={{ column: 'submitted', desc: 'true' }}
sorterValue={{ column: 'created', desc: 'true' }}
scopedSlots={{
completed: (item) => (
<td>

2
src/components/CommandHistory/index.module.scss
View File

@@ -7,7 +7,7 @@
}
.scrollableBox {
height: 400px;
height: 200px;
}
.whiteIcon {

31
src/components/DeviceConfiguration/index.js
View File

@@ -6,7 +6,6 @@ import {
CCardBody,
CCol,
CLabel,
CInput,
CCollapse,
CCardFooter,
CButton,
@@ -20,6 +19,7 @@ import axiosInstance from 'utils/axiosInstance';
import { useAuth } from 'contexts/AuthProvider';
import { useDevice } from 'contexts/DeviceProvider';
import CopyToClipboardButton from 'components/CopyToClipboardButton';
import DeviceNotes from 'components/DeviceNotes';
import DeviceConfigurationModal from './DeviceConfigurationModal';
import styles from './index.module.scss';
@@ -133,14 +133,6 @@ const DeviceConfiguration = () => {
{prettyDate(device.createdTimestamp)}
</CCol>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('configuration.last_configuration_download')} : </CLabel>
</CCol>
<CCol xs="12" md="9">
{prettyDate(device.lastConfigurationDownload)}
</CCol>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3" className={styles.topPadding}>
<CLabel>{t('configuration.device_password')} : </CLabel>
@@ -153,7 +145,20 @@ const DeviceConfiguration = () => {
/>
</CCol>
</CRow>
<DeviceNotes
notes={device.notes}
refreshNotes={getDevice}
serialNumber={deviceSerialNumber}
/>
<CCollapse show={collapse}>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('configuration.last_configuration_download')} : </CLabel>
</CCol>
<CCol xs="12" md="9">
{prettyDate(device.lastConfigurationDownload)}
</CCol>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('common.manufacturer')} :</CLabel>
@@ -162,14 +167,6 @@ const DeviceConfiguration = () => {
{device.manufacturer}
</CCol>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel htmlFor="text-input">{t('configuration.notes')} :</CLabel>
</CCol>
<CCol xs="12" md="9">
<CInput id="text-input" name="text-input" placeholder={device.notes} />
</CCol>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('configuration.owner')} :</CLabel>

1
src/components/DeviceListTable/index.js
View File

@@ -297,6 +297,7 @@ const DeviceListDisplay = ({
items={devices ?? []}
fields={columns}
hover
border
loading={loading}
scopedSlots={{
serialNumber: (item) => (

111
src/components/DeviceNotes/index.js Normal file
View File

@@ -0,0 +1,111 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { CDataTable, CRow, CCol, CLabel, CInput } from '@coreui/react';
import PropTypes from 'prop-types';
import axiosInstance from 'utils/axiosInstance';
import { useAuth } from 'contexts/AuthProvider';
import { prettyDate } from 'utils/helper';
import LoadingButton from 'components/LoadingButton';
import styles from './index.module.scss';
const DeviceNotes = ({ serialNumber, notes, refreshNotes }) => {
const { t } = useTranslation();
const { currentToken, endpoints } = useAuth();
const [currentNote, setCurrentNote] = useState('');
const [loading, setLoading] = useState(false);
const saveNote = () => {
setLoading(true);
const parameters = {
serialNumber,
notes: [{ note: currentNote }],
};
const headers = {
Accept: 'application/json',
Authorization: `Bearer ${currentToken}`,
};
axiosInstance
.put(
`${endpoints.ucentralgw}/api/v1/device/${encodeURIComponent(serialNumber)}`,
parameters,
{ headers },
)
.then(() => {
setCurrentNote('');
refreshNotes();
})
.catch(() => {})
.finally(() => {
setLoading(false);
});
};
const columns = [
{ key: 'created', label: t('common.date'), _style: { width: '30%' } },
{ key: 'createdBy', label: t('common.created_by'), _style: { width: '20%' } },
{ key: 'note', label: t('configuration.note'), _style: { width: '50%' } },
];
return (
<div>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('configuration.notes')} :</CLabel>
</CCol>
<CCol xs="9" md="7">
<CInput
id="notes-input"
name="text-input"
value={currentNote}
onChange={(e) => setCurrentNote(e.target.value)}
/>
</CCol>
<CCol>
<LoadingButton
label={t('common.add')}
isLoadingLabel={t('common.adding_ellipsis')}
isLoading={loading}
action={saveNote}
disabled={loading || currentNote === ''}
/>
</CCol>
</CRow>
<CRow>
<CCol md="3" />
<CCol xs="12" md="9">
<div className={['overflow-auto', styles.scrollableBox].join(' ')}>
<CDataTable
striped
responsive
border
loading={loading}
fields={columns}
className={styles.table}
items={notes || []}
noItemsView={{ noItems: t('common.no_items') }}
sorterValue={{ column: 'created', desc: 'true' }}
scopedSlots={{
created: (item) => (
<td>
{item.created && item.created !== 0 ? prettyDate(item.created) : t('common.na')}
</td>
),
}}
/>
</div>
</CCol>
</CRow>
</div>
);
};
DeviceNotes.propTypes = {
serialNumber: PropTypes.string.isRequired,
notes: PropTypes.arrayOf(PropTypes.instanceOf(Object)).isRequired,
refreshNotes: PropTypes.func.isRequired,
};
export default DeviceNotes;

15
src/components/DeviceNotes/index.module.scss Normal file
View File

@@ -0,0 +1,15 @@
.scrollableBox {
height: 200px;
border-style: solid;
border-color: #ced2d8;
margin-bottom: 25px;
}
.table {
color: white;
}
.spacedRow {
margin-top: 5px;
margin-bottom: 20px;
}