Skip to content

Commit

Permalink
✨ Add speaker image(s) to conference sessions #43
Browse files Browse the repository at this point in the history 
Signed-off-by: Marcus Fihlon <[email protected]>
  • Loading branch information
@McPringle
McPringle committed Sep 26, 2024
1 parent 8a0bcc7 commit 050950c
Show file tree
Hide file tree
Showing 5 changed files with 55 additions and 25 deletions.
41 changes: 23 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,24 +169,26 @@ You can modify the styles of the user interface using CSS variables. The CSS var

The following table contains the CSS variables you can modify to change the user interface and their default values:

| CSS Variable | Default | Description |
|--------------------------------|-------------------|--------------------------------------------------------------------|
| --event-background-color | #e7eaee | The color for the background of the event agenda. |
| --event-title-color | #262626 | The color for the title of the event agenda. |
| --event-text-color | #262626 | The color for the text of the event agenda. |
| --event-running-session-color | #ffffff | The color for the background of rooms with running sessions. |
| --event-next-session-color | #eeeeee | The color for the background of rooms with sessions starting next. |
| --event-closed-room-color | #cccccc | The color for the background of closed rooms. |
| --event-room-border | 1px solid #909090 | The border for the event room. |
| --event-image-position-bottom | 10px | The position of the optional event image relative to the bottom. |
| --event-image-position-left | 10px | The position of the optional event image relative to the left. |
| --event-image-width | auto | The width of the optional event image. |
| --event-image-height | auto | The height of the optional event image. |
| --social-background-color | #e7eaee | The color for the background of the social wall. |
| --social-title-color | #262626 | The color for the title of the social wall. |
| --social-text-color | #262626 | The color for the text of the social wall. |
| --social-post-background-color | #ffffff | The color for the background of social posts. |
| --social-post-border | 1px solid #909090 | The border for the social posts. |
| CSS Variable | Default | Description |
|-----------------------------------|-------------------|--------------------------------------------------------------------|
| --event-background-color | #e7eaee | The color for the background of the event agenda. |
| --event-title-color | #262626 | The color for the title of the event agenda. |
| --event-text-color | #262626 | The color for the text of the event agenda. |
| --event-running-session-color | #ffffff | The color for the background of rooms with running sessions. |
| --event-next-session-color | #eeeeee | The color for the background of rooms with sessions starting next. |
| --event-closed-room-color | #cccccc | The color for the background of closed rooms. |
| --event-room-border | 1px solid #909090 | The border for the event room. |
| --event-image-position-bottom | 10px | The position of the optional event image relative to the bottom. |
| --event-image-position-left | 10px | The position of the optional event image relative to the left. |
| --event-image-width | auto | The width of the optional event image. |
| --event-image-height | auto | The height of the optional event image. |
| --social-background-color | #e7eaee | The color for the background of the social wall. |
| --social-title-color | #262626 | The color for the title of the social wall. |
| --social-text-color | #262626 | The color for the text of the social wall. |
| --social-post-background-color | #ffffff | The color for the background of social posts. |
| --social-post-border | 1px solid #909090 | The border for the social posts. |
| --speaker-avatar-background-color | #ffffff | The color for the background of speaker avatars. |
| --speaker-avatar-border | 1px solid #909090 | The border for the speaker avatars. |

Default values may change in newer versions of *Apus*. The custom styles of some events are documented below.

Expand All @@ -209,6 +211,9 @@ Default values may change in newer versions of *Apus*. The custom styles of some
--social-text-color: #000000;
--social-post-background-color: #ffffff;
--social-post-border: 1px solid #000000;
--speaker-avatar-background-color: #ffffff;
--speaker-avatar-border: 1px solid #000000;
```

#### Java Forum Stuttgart
Expand Down
3 changes: 3 additions & 0 deletions frontend/themes/apus/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,9 @@
--social-post-border: 1px solid #909090;
--social-post-column-count: 3;

--speaker-avatar-background-color: #ffffff;
--speaker-avatar-border: 1px solid #909090;

background-color: #000000;
}

Expand Down
11 changes: 9 additions & 2 deletions frontend/themes/apus/views/room-view.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,18 +65,25 @@
height: 16px;
}

.room-view .track {
.room-view .track,
.room-view .avatar{
position: relative;
}

.room-view .track svg {
.room-view .track svg,
.room-view .avatar vaadin-avatar {
position: absolute;
bottom: 0;
right: 0;
height: 40px;
width: 40px;
}

.room-view .avatar vaadin-avatar {
background-color: var(--speaker-avatar-background-color);
border: var(--speaker-avatar-border);
}

.room-view vaadin-icon {
height: 16px;
margin: 0 8px 3px 0;
Expand Down
2 changes: 1 addition & 1 deletion src/main/java/swiss/fihlon/apus/plugin/event/demo/DemoPlugin.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ public boolean isEnabled() {
continue;
}
final Room fakeRoom = fakeRooms.get(numberOfRoom);
final Speaker fakeSpeaker = new Speaker(faker.name().fullName());
final Speaker fakeSpeaker = new Speaker(faker.name().fullName(), faker.avatar().image());
final Session fakeSession = new Session(String.format("DEMO-%d-%d", hourCount, numberOfRoom),
startDateTime, endDateTime, fakeRoom, faker.lorem().sentence(5), List.of(fakeSpeaker),
getRandomLanguage(), getRandomTrack());
Expand Down
23 changes: 19 additions & 4 deletions src/main/java/swiss/fihlon/apus/ui/view/RoomView.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,7 @@ public RoomView(@NotNull final Room room,
add(createSpeakersComponent());
add(createRoomComponent());
add(createTimeComponent());
if (track != null) {
add(createTrackComponent());
}
add(createImageComponent());
addClassName(roomStyle.getCssStyle());
}

Expand Down Expand Up @@ -163,11 +161,28 @@ private Component createTimeComponent() {
return timeComponent;
}

@NotNull
private Component createImageComponent() {
final var speakerAvatars = speakers.stream()
.filter(s -> s.imageUrl() != null && !s.imageUrl().isBlank())
.map(Speaker::avatar)
.toList();

if (speakerAvatars.isEmpty()) {
return createTrackComponent();
}

final var imageComponent = new Div();
imageComponent.addClassName("avatar");
imageComponent.add(speakerAvatars.getFirst());
return imageComponent;
}

@NotNull
private Component createTrackComponent() {
final var trackComponent = new Div();
trackComponent.addClassName("track");
if (track != Track.NONE) {
if (track != null && track != Track.NONE) {
final var trackImage = new Svg(track.svgCode());
trackComponent.add(trackImage);
}
Expand Down

0 comments on commit 050950c

Please sign in to comment.