Skip to content

Commit

Permalink
Merge pull request #150 from Suwayomi/chapter-design
Browse files Browse the repository at this point in the history 
Redesign Chapter selection in Manga Reader
  • Loading branch information
@aless2003
aless2003 authored Oct 10, 2024
2 parents 5e8b6b1 + 6530119 commit b845b2c
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 47 deletions.
2 changes: 1 addition & 1 deletion gradle.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@
# file, You can obtain one at https://mozilla.org/MPL/2.0/.
#
hilla.active=false
vaadinVersion=24.4.8
vaadinVersion=24.4.13
50 changes: 25 additions & 25 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,39 @@
"dependencies": {
"@polymer/polymer": "3.5.1",
"@types/node": "^22.5.5",
"@vaadin/bundles": "24.4.5",
"@vaadin/bundles": "24.4.10",
"@vaadin/common-frontend": "0.0.19",
"@vaadin/polymer-legacy-adapter": "24.4.5",
"@vaadin/react-components": "24.4.5",
"@vaadin/polymer-legacy-adapter": "24.4.10",
"@vaadin/react-components": "24.4.10",
"@vaadin/router": "1.7.5",
"@vaadin/vaadin-development-mode-detector": "2.0.7",
"@vaadin/vaadin-lumo-styles": "24.4.5",
"@vaadin/vaadin-material-styles": "24.4.5",
"@vaadin/vaadin-themable-mixin": "24.4.5",
"@vaadin/vaadin-usage-statistics": "2.1.2",
"@vaadin/vaadin-lumo-styles": "24.4.10",
"@vaadin/vaadin-material-styles": "24.4.10",
"@vaadin/vaadin-themable-mixin": "24.4.10",
"@vaadin/vaadin-usage-statistics": "2.1.3",
"construct-style-sheets-polyfill": "3.1.0",
"date-fns": "2.29.3",
"lit": "3.1.4",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-router-dom": "6.23.1",
"react-router-dom": "6.26.2",
"swiper": "^10.0.3"
},
"devDependencies": {
"@babel/preset-react": "7.24.7",
"@rollup/plugin-replace": "5.0.7",
"@rollup/pluginutils": "5.1.0",
"@types/react": "18.3.3",
"@types/react": "18.3.4",
"@types/react-dom": "18.3.0",
"@vitejs/plugin-react": "4.3.1",
"async": "3.2.5",
"glob": "10.4.1",
"async": "3.2.6",
"glob": "10.4.5",
"rollup-plugin-brotli": "3.1.0",
"rollup-plugin-visualizer": "5.12.0",
"strip-css-comments": "5.0.0",
"transform-ast": "2.4.4",
"typescript": "5.4.5",
"vite": "5.3.3",
"vite": "5.4.6",
"vite-plugin-checker": "0.6.4",
"workbox-build": "7.1.1",
"workbox-core": "7.1.0",
Expand Down Expand Up @@ -67,44 +67,44 @@
"vaadin": {
"dependencies": {
"@polymer/polymer": "3.5.1",
"@vaadin/bundles": "24.4.5",
"@vaadin/bundles": "24.4.10",
"@vaadin/common-frontend": "0.0.19",
"@vaadin/polymer-legacy-adapter": "24.4.5",
"@vaadin/react-components": "24.4.5",
"@vaadin/polymer-legacy-adapter": "24.4.10",
"@vaadin/react-components": "24.4.10",
"@vaadin/router": "1.7.5",
"@vaadin/vaadin-development-mode-detector": "2.0.7",
"@vaadin/vaadin-lumo-styles": "24.4.5",
"@vaadin/vaadin-material-styles": "24.4.5",
"@vaadin/vaadin-themable-mixin": "24.4.5",
"@vaadin/vaadin-usage-statistics": "2.1.2",
"@vaadin/vaadin-lumo-styles": "24.4.10",
"@vaadin/vaadin-material-styles": "24.4.10",
"@vaadin/vaadin-themable-mixin": "24.4.10",
"@vaadin/vaadin-usage-statistics": "2.1.3",
"construct-style-sheets-polyfill": "3.1.0",
"date-fns": "2.29.3",
"lit": "3.1.4",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-router-dom": "6.23.1",
"react-router-dom": "6.26.2",
"swiper": "^10.0.3"
},
"devDependencies": {
"@babel/preset-react": "7.24.7",
"@rollup/plugin-replace": "5.0.7",
"@rollup/pluginutils": "5.1.0",
"@types/react": "18.3.3",
"@types/react": "18.3.4",
"@types/react-dom": "18.3.0",
"@vitejs/plugin-react": "4.3.1",
"async": "3.2.5",
"glob": "10.4.1",
"async": "3.2.6",
"glob": "10.4.5",
"rollup-plugin-brotli": "3.1.0",
"rollup-plugin-visualizer": "5.12.0",
"strip-css-comments": "5.0.0",
"transform-ast": "2.4.4",
"typescript": "5.4.5",
"vite": "5.3.3",
"vite": "5.4.6",
"vite-plugin-checker": "0.6.4",
"workbox-build": "7.1.1",
"workbox-core": "7.1.0",
"workbox-precaching": "7.1.0"
},
"hash": "ddf8b964dae0d3d338ab8028455071fa5d3569252b03006114d5bbbb780f04a3"
"hash": "e535a80f8a4af9b390ee2c50ceaa3e3045d3c0c965ed307b2963417b789880d0"
}
}
43 changes: 41 additions & 2 deletions src/main/frontend/css/components/reader/manga-reader.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,18 +115,57 @@
gap: 0.5rem;
}

.chapter-select vaadin-combo-box {
.chapter-select vaadin-select {
/*make it go smaller when no space is available*/
flex-shrink: 1;
flex-grow: 1;
flex-basis: 0;
min-width: 10%;
}

.chapter-select vaadin-combo-box-overlay::part(overlay) {
.chapter-select vaadin-select-item {
color: var(--miku-main-color);
}

.chapter-select vaadin-select::part(toggle-button) {
color: var(--miku-main-color);
}

.chapter-select-overlay vaadin-select-list-box {
background-color: var(--miku-background-color-p2);
color: var(--miku-main-color);
padding: .5rem;
}

.chapter-select-overlay vaadin-select-item {
color: var(--miku-main-color);
border: 1px solid var(--miku-main-color);
border-radius: 5px;
/*Gap between items*/
margin: .25rem;
}

.chapter-select-overlay vaadin-select-item:hover {
background-color: var(--miku-background-color-p3);
color: var(--miku-background-color-p2);
border: 1px solid var(--miku-background-color-p2);
}

.chapter-select-overlay vaadin-select-item[selected] {
background-color: var(--miku-background-color-p3);
color: var(--miku-background-color-p2);
border: 1px solid var(--miku-background-color-p2);
box-shadow: none;
}

.chapter-select-overlay vaadin-select-item::part(checkmark)::before {
color: var(--miku-background-color-p2);
}

.chapter-select-overlay::part(content) {
padding: 0;
}

.sidebar #settings-btn {
position: absolute;
bottom: 1rem;
Expand Down
56 changes: 37 additions & 19 deletions src/main/java/online/hatsunemiku/tachideskvaadinui/component/reader/MangaReader.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,20 @@

package online.hatsunemiku.tachideskvaadinui.component.reader;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.ComponentEventListener;
import com.vaadin.flow.component.ComponentUtil;
import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.select.Select;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.renderer.LitRenderer;
import com.vaadin.flow.data.renderer.Renderer;
import com.vaadin.flow.data.renderer.ComponentRenderer;
import com.vaadin.flow.shared.Registration;
import java.util.List;
import java.util.Objects;
Expand Down Expand Up @@ -184,11 +184,11 @@ public Sidebar(MangaService mangaService, Chapter chapter, Reader reader) {

Button leftBtn = getChapterLeftBtn(reader, chapter);

ComboBox<Chapter> chapterComboBox = getChapterComboBox(chapter, chapters);
Select<Chapter> chapterSelector = getChapterSelector(chapter, chapters);

Button rightBtn = getChapterRightBtn(reader, chapter);

chapterSelect.add(leftBtn, chapterComboBox, rightBtn);
chapterSelect.add(leftBtn, chapterSelector, rightBtn);

Button settingsBtn = new Button(VaadinIcon.COG.create());
settingsBtn.setId("settings-btn");
Expand Down Expand Up @@ -263,14 +263,26 @@ private Button getChapterRightBtn(Reader reader, Chapter chapter) {
return rightBtn;
}

/**
* Creates the chapter selection component for the sidebar.
*
* @param chapter The current chapter.
* @param chapters The list of chapters.
* @return The chapter selection component.
*/
@NotNull
private ComboBox<Chapter> getChapterComboBox(Chapter chapter, List<Chapter> chapters) {
ComboBox<Chapter> chapterComboBox = new ComboBox<>();
chapterComboBox.setRenderer(createRenderer());
chapterComboBox.setItems(chapters);
chapterComboBox.setValue(chapter);
chapterComboBox.setAllowCustomValue(false);
chapterComboBox.addValueChangeListener(
private Select<Chapter> getChapterSelector(Chapter chapter, List<Chapter> chapters) {
Select<Chapter> chapterSelector = new Select<>();
chapterSelector.setId("chapter-selector");
chapterSelector.setOverlayClassName("chapter-select-overlay");
chapterSelector.setRenderer(createRenderer());
chapterSelector.setItems(chapters);

// Doesn't show the chapter correctly if it's not the same instance as in the list.
Chapter thisChapter =
chapters.stream().filter(c -> c.getId() == chapter.getId()).findFirst().orElse(null);
chapterSelector.setValue(thisChapter);
chapterSelector.addValueChangeListener(
e -> {
if (!e.isFromClient()) {
return;
Expand All @@ -294,7 +306,7 @@ private ComboBox<Chapter> getChapterComboBox(Chapter chapter, List<Chapter> chap

MangaReader.this.fireEvent(event);
});
return chapterComboBox;
return chapterSelector;
}

@NotNull
Expand Down Expand Up @@ -330,12 +342,18 @@ private Button getChapterLeftBtn(Reader reader, Chapter chapter) {
return leftBtn;
}

private Renderer<Chapter> createRenderer() {
String template = """
<div>${item.name}</div>
""";

return LitRenderer.<Chapter>of(template).withProperty("name", Chapter::getName);
/**
* Creates a renderer for the chapter selector.
*
* @return The renderer for the chapter selector.
*/
private ComponentRenderer<? extends Component, Chapter> createRenderer() {
return new ComponentRenderer<Component, Chapter>(
chapter -> {
var div = new Div();
div.setText(chapter.getName());
return div;
});
}

@NotNull
Expand Down

0 comments on commit b845b2c

Please sign in to comment.