pludi/usrspace-browser-addon
1
0
Fork 0
forked from XimeX/usrspace-browser-addon
Code Issues Pull requests Releases Wiki Activity

improve popup styling

Browse source
This commit is contained in:
Thomas Rupprecht 2023-01-05 00:24:13 +01:00
parent c2cc850e1f
commit d72359e9a5
2 changed files with 42 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/popup.css
View file

@ -75,8 +75,14 @@ svg {
cursor: pointer; cursor: pointer;
} }
#calendar > div > svg, #state > svg { #state > svg, #calendar > .calendar-entry > svg, #calendar > .calendar-entry strong {
margin-right: 4px; margin-right: 8px;
}
#calendar > .calendar-entry {
display: flex;
}
#calendar address {
display: inline;
} }
#space-api { #space-api {

52
src/popup.js
View file

@ -1,21 +1,21 @@
const calendarSVG = ` const calendarSVG =
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Kalender"> `<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Kalender">
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg> </svg>`
`; ;
const doorClosedSVG = ` const doorClosedSVG =
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Geschlossen"> `<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Geschlossen">
<path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/> <path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/>
<path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/> <path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/>
</svg> </svg>`
`; ;
const doorOpenSVG = ` const doorOpenSVG =
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Offen"> `<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Offen">
<path d="M8.5 10c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1z"/> <path d="M8.5 10c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1z"/>
<path d="M10.828.122A.5.5 0 0 1 11 .5V1h.5A1.5 1.5 0 0 1 13 2.5V15h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V1.5a.5.5 0 0 1 .43-.495l7-1a.5.5 0 0 1 .398.117zM11.5 2H11v13h1V2.5a.5.5 0 0 0-.5-.5zM4 1.934V15h6V1.077l-6 .857z"/> <path d="M10.828.122A.5.5 0 0 1 11 .5V1h.5A1.5 1.5 0 0 1 13 2.5V15h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V1.5a.5.5 0 0 1 .43-.495l7-1a.5.5 0 0 1 .398.117zM11.5 2H11v13h1V2.5a.5.5 0 0 0-.5-.5zM4 1.934V15h6V1.077l-6 .857z"/>
</svg> </svg>`
`; ;
const dateTimeFormat = Intl.DateTimeFormat([], {dateStyle: 'medium', timeStyle: 'short'}); const dateTimeFormat = Intl.DateTimeFormat([], {dateStyle: 'medium', timeStyle: 'short'});
@ -79,6 +79,13 @@ function updateNextEvent(nextEvents) {
const nextEventDateEvents = nextEvents.filter((nextEvent) => (nextEvent.begin.startsWith(nextEventDate))); const nextEventDateEvents = nextEvents.filter((nextEvent) => (nextEvent.begin.startsWith(nextEventDate)));
nextEventDateEvents.forEach((nextEventDateEvent) => { nextEventDateEvents.forEach((nextEventDateEvent) => {
const calenderEntryElement = document.createElement('div');
calenderEntryElement.classList.add('calendar-entry');
calenderEntryElement.innerHTML = calendarSVG;
const containerElement = document.createElement('div');
calenderEntryElement.append(containerElement);
const strongElement = document.createElement('strong'); const strongElement = document.createElement('strong');
strongElement.textContent = nextEventDateEvent.name; strongElement.textContent = nextEventDateEvent.name;
@ -87,14 +94,23 @@ function updateNextEvent(nextEvents) {
timeElement.dateTime = beginDate.toISOString(); timeElement.dateTime = beginDate.toISOString();
timeElement.textContent = dateTimeFormat.format(beginDate); timeElement.textContent = dateTimeFormat.format(beginDate);
const divElement = document.createElement('div'); const titleElement = document.createElement('div');
divElement.innerHTML = calendarSVG; titleElement.append(strongElement, timeElement);
divElement.append(strongElement, ' ', timeElement); containerElement.append(titleElement);
if (nextEventDateEvent.location) { if (nextEventDateEvent.location) {
const locationNode = document.createTextNode(` (${nextEventDateEvent.location})`); const locationElement = document.createElement('div');
divElement.append(locationNode);
const addressElement = document.createElement('address');
addressElement.textContent = nextEventDateEvent.location;
const parenthesesOpenNode = document.createTextNode('(');
const parenthesesCloseNode = document.createTextNode(')');
locationElement.append(parenthesesOpenNode, addressElement, parenthesesCloseNode);
containerElement.append(locationElement);
} }
calendarElement.append(divElement); calendarElement.append(calenderEntryElement);
}); });
} }
} }