From 3ca0dfe90e5a4607e8bdb6676ef4940eefb0a46a Mon Sep 17 00:00:00 2001 From: Darrell Cole Hill Date: Wed, 12 Jun 2024 08:17:56 -0400 Subject: [PATCH] Dark mode (#1151) * Enable switching to dark mode through settings. * Fixed .chunking-step background color * Updated wa-background and wa-foreground * Updated -wa-primary to color brand base Sets correct color for blue text in "New Project / Start" and "Consume and Verbalize / Start" * Updated appBar styles * Fixed background color * Removed button borders * Fixed icon colors * Fixed button text colors * Removed unnecessary styles in app-bar.css * Updated styles for Home option button * Added 2px border * Update translation-card-2.css * Fixed background color for translation cards * Added borders around non active translation cards * Fixed text/icon colors * Added border for option-button * Updated table-view.css * Gave it a rounded border * Updated the header background * Updated progress bar background * table-view hover background color update * Prevents tableview row background color from going light on click * Comments * Fixed translation steps border color * Updated chapter-selector.css * Increased border width to 2px * Updated border color * Updated styles for translation undo/redo buttons * Added more styles for btn--icon--primary. * Made border size constant for enabled/disabled states * Increased border size to 2px * Updated waveform color for 5 second padding * Updated chunk-item.css * Updated background color on hover * Updated selected background color * Updated styles for ChunkTakeCard buttons * Updated background color and icon color * Updated borders for play, trash and select buttons * Updated wa-slider styles * Updated background color for slider * Updated thumb color * Updated hover for play-back speed options * Updated border color for source text back button * Updated background color for waveform image container * Updated marker-node.css * Updated background color to be -wa-foreground instead of gradient * Updated scrolling-waveform.css * Removed border between markers * Added border around delete vm marker icon * Fixed primary button background and text color * Updated consume__btn active color * Made pause button text visible in dark mode * Updated save, and cancel button styles on blind draft page * Added default text file to btn--icon--secondary * Made save and cancel buttons use the btn--icon--secondary class instead of btn--secondary * Added consume__btn--secondary class to account for blue text/border around save button * Updated peer edit record and confirm buttons * Updated text, border, and icon color. * Updated -wa-primary-light to fix chapter selector selected color * Fixed css errors * Allows Narration page to respond to theme changes * Updates Narration waveform color on theme change * Added .btn--tertiary2 style class * Implemented new style class in Narration header undo, redo, and context menu buttons. * Updated next/previous verse buttons * Added .btn--secondary2 and used for Play All button * Updated play/pause verse buttons * Updated teleprompter card buttons * Updated sticky verse resume button * Updated verse marker colors * Fixed chapter selector hover color * Updated verseMenu and narrationMenu item hovers * Removed btn--icon--primary/secondary * Removed btn--teriary2 placeholder style class * Removed btn--secondary2 placeholder style class * Removed btn--primary2 placeholder style class * Updated chapter selector buttons * Updated ContributorDialog * Updated radio button and text field colors * Updated ExportProject's close button * Updated NotificationSnackBar close button * Fixed loading modal color * Fixed chunk-item hover colors * Binds loading modal theme to settings theme Fixes bug where the theme was changed to dark mode, but the loading modal was still in light mode. This happened because the theme was changed, but the loading modal theme was only set on dock. * Updated the main section options buttons * Changed the background color * Updated button styles * Binds narration waveform color to theme on dock * Recording section waveform reacts to theme changes * Consume waveform reacts to theme changes and color update * Updated waveform colors for light-mode * Allows Consume waveform to react to changes in theme mode. * Chunking waveform reacts to theme changes * Force changes to be saved when undock is caused by a change in theme color * Peer edit waveform reacts to theme changes * Updates chapter review waveform on theme change * Avoids clearing the undo/redo stack on them change and keeps placed markers on them change. * Fixed chunking undo/redo bug after theme change * Fixed peer edit undo/redo bug after theme change * Cleaned up consume on theme change code. * clean up * clean up * clean up * clean up * clean up * Updated remove chunk buttons * Updated remove contributor button * Updated secondary button active styles * Updated MarkerPlacementWaveform * Updated style class to marker-waveform * Used MarkersContainer instead of MarkerTrackControl * Sets canDeleteMarkerProperty to false * Revert "Updated MarkerPlacementWaveform" This reverts commit 401df8835e49d5843367534f0e0f059ad1664148. * Updated Verse Edit markers and reverted scrolling-waveform style change * Added strokes around highlights back in * Updated MarkerView to use MarkerWaveform and not MarkerPlacementWaveform * Clean up and changed Marker Edit's verse marker styles * Updated -wa-combobox styles * Updated selected and hover styles * Fixed merge errors * Binds Narration loading modal themeProperty to appColorMode * Updated check for hasAudio and hasPlayer * Clean up * Made topTrack line visible in Marker App Modified stylesheet imports based on imports from Translation. This is because the topTrack line only became visible when I opened the Translation page, then came back to the Marker App. * Prevents marker-node's title-section from overflowing * Prior to this, the marker node's title-section was overflowing into the the border for the waveform. This was very noticeable in dark mode * Removed unnecessary forceSaveChanges --- .../otter/jvm/controls/ContributorCell.kt | 4 +- .../jvm/controls/canvas/WaveformLayer.kt | 34 ++- .../controls/chapterselector/ChapterGrid.kt | 2 +- .../jvm/controls/dialog/ContributorDialog.kt | 6 +- .../jvm/controls/media/SimpleAudioPlayer.kt | 4 +- .../controls/narration/NarrationTextItem.kt | 7 +- .../jvm/controls/narration/StickyVerse.kt | 4 +- .../controls/popup/NotificationSnackBar.kt | 8 +- .../jvm/controls/skins/MarkerNodeSkin.kt | 2 +- .../main/resources/css/chapter-selector.css | 11 +- .../main/resources/css/checkbox-button.css | 4 +- .../src/main/resources/css/confirm-dialog.css | 2 +- .../src/main/resources/css/control.css | 207 +++++++++++------- .../main/resources/css/exception-content.css | 6 +- .../src/main/resources/css/marker-node.css | 5 +- .../src/main/resources/css/popup-menu.css | 2 +- .../main/resources/css/scrolling-waveform.css | 2 +- .../src/main/resources/css/select-button.css | 2 +- .../src/main/resources/css/table-view.css | 9 +- .../main/resources/css/theme/dark-theme.css | 115 ++++++---- .../main/resources/css/theme/light-theme.css | 73 ++++-- .../main/resources/css/translation-card-2.css | 16 +- .../chapterselector/ChapterSelector.fxml | 12 +- .../jvm/markerapp/app/view/MarkerView.kt | 19 +- .../app/view/PlaybackControlsFragment.kt | 25 +-- .../app/viewmodel/VerseMarkerViewModel.kt | 16 +- .../main/resources/css/verse-marker-app.css | 2 +- .../jvm/workbookapp/ui/components/AppBar.kt | 10 +- .../ui/components/ChunkTakeCard.kt | 4 +- .../ui/components/drawer/SourceTextDrawer.kt | 2 +- .../ui/narration/NarrationHeader.kt | 4 +- .../workbookapp/ui/narration/NarrationPage.kt | 4 +- .../ui/narration/NarrationToolBar.kt | 9 +- .../narration/markers/VerseMarkerControl.kt | 2 +- .../ui/narration/menu/NarrationMenu.kt | 6 +- .../ui/narration/menu/VerseMenu.kt | 8 + .../jvm/workbookapp/ui/screens/HomePage2.kt | 8 +- .../ui/screens/dialogs/ExportProjectDialog.kt | 2 +- .../ui/screens/home/BookSection.kt | 2 +- .../ui/screens/home/EmptyProjectSection.kt | 3 +- .../ui/screens/translation/ChapterReview.kt | 6 +- .../ui/screens/translation/Chunking.kt | 10 +- .../translation/ChunkingStepsDrawer.kt | 35 ++- .../ui/screens/translation/Consume.kt | 4 +- .../ui/screens/translation/PeerEdit.kt | 4 +- .../screens/translation/RecordingSection.kt | 4 +- .../screens/translation/TranslationHeader.kt | 6 +- .../ui/viewmodel/ChapterReviewViewModel.kt | 7 +- .../ui/viewmodel/ChunkingViewModel.kt | 9 +- .../ui/viewmodel/ConsumeViewModel.kt | 7 +- .../ui/viewmodel/PeerEditViewModel.kt | 8 +- .../ui/viewmodel/RecorderViewModel.kt | 10 +- .../src/main/resources/css/app-bar.css | 7 +- .../src/main/resources/css/app-drawer.css | 2 +- .../src/main/resources/css/chunk-item.css | 11 +- .../src/main/resources/css/consume-page.css | 12 +- .../src/main/resources/css/home-page.css | 22 ++ .../main/resources/css/recording-screen.css | 2 +- .../main/resources/css/translation-page.css | 18 +- .../resources/css/verse-markers-layer.css | 4 +- 60 files changed, 551 insertions(+), 300 deletions(-) diff --git a/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/ContributorCell.kt b/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/ContributorCell.kt index 865d4f6653..df9f53cac8 100644 --- a/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/ContributorCell.kt +++ b/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/ContributorCell.kt @@ -63,8 +63,8 @@ class ContributorCell : HBox() { ) button { - addClass("btn", "btn--icon", "btn--borderless", "contributor__list-cell__delete-btn") - graphic = FontIcon(Material.DELETE).addClass("delete-icon") + addClass("btn", "btn--tertiary", "btn--borderless") + graphic = FontIcon(Material.DELETE) tooltip(messages["remove"]) setOnAction { val index = if (indexProperty.value < 0) { diff --git a/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/canvas/WaveformLayer.kt b/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/canvas/WaveformLayer.kt index f53621cee1..60b06f18f8 100644 --- a/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/canvas/WaveformLayer.kt +++ b/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/canvas/WaveformLayer.kt @@ -18,17 +18,47 @@ */ package org.wycliffeassociates.otter.jvm.controls.canvas +import io.reactivex.Observable +import io.reactivex.schedulers.Schedulers import javafx.scene.canvas.Canvas import javafx.scene.canvas.GraphicsContext import javafx.scene.paint.Paint +import org.slf4j.LoggerFactory +import org.wycliffeassociates.otter.common.data.ColorTheme import org.wycliffeassociates.otter.common.recorder.ActiveRecordingRenderer private const val USHORT_SIZE = 65535.0 +const val WAV_COLOR_LIGHT = "#999999" +const val WAV_COLOR_DARK = "#808080" -class WaveformLayer(private val renderer: ActiveRecordingRenderer) : IDrawable { +class WaveformLayer( + private val renderer: ActiveRecordingRenderer, + colorThemeObservable: Observable +) : IDrawable { + + private val logger = LoggerFactory.getLogger(WaveformLayer::class.java) + + private var waveformColor = WAV_COLOR_LIGHT + + init { + colorThemeObservable + .subscribeOn(Schedulers.io()) + .doOnError { e -> + logger.error("Error in the volume bar", e) + } + .subscribe { + it?.let { + if (it == ColorTheme.LIGHT) { + waveformColor = WAV_COLOR_LIGHT + } else { + waveformColor = WAV_COLOR_DARK + } + } + } + } override fun draw(context: GraphicsContext, canvas: Canvas) { - context.stroke = Paint.valueOf("#66768B") + context.stroke = Paint.valueOf(waveformColor) context.lineWidth = 1.0 val buffer = renderer.floatBuffer.array diff --git a/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/chapterselector/ChapterGrid.kt b/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/chapterselector/ChapterGrid.kt index 79aaca5202..f6a2104028 100644 --- a/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/chapterselector/ChapterGrid.kt +++ b/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/chapterselector/ChapterGrid.kt @@ -57,7 +57,7 @@ class ChapterGrid(val list: List) : GridPane() { val node = StackPane().apply { button(chapter.number.toString()) { addClass( - "btn", "btn--secondary", "btn--borderless", "chapter-grid__btn" + "btn", "btn--tertiary", "btn--borderless", "chapter-grid__btn" ) togglePseudoClass("selected", chapter.selected) setOnAction { diff --git a/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/dialog/ContributorDialog.kt b/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/dialog/ContributorDialog.kt index 9db0619bf5..c2065d336d 100644 --- a/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/dialog/ContributorDialog.kt +++ b/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/dialog/ContributorDialog.kt @@ -43,12 +43,12 @@ class ContributorDialog : OtterDialog() { spacing = 10.0 hbox { addClass("contributor-dialog__header") - label (messages["modifyContributors"]) { + label(messages["modifyContributors"]) { addClass("h3") } region { hgrow = Priority.ALWAYS } button { - addClass("btn", "btn--secondary") + addClass("btn", "btn--tertiary", "btn--borderless") graphic = FontIcon(MaterialDesign.MDI_CLOSE_CIRCLE) tooltip(messages["close"]) action { close() } @@ -75,7 +75,7 @@ class ContributorDialog : OtterDialog() { hgrow = Priority.ALWAYS addClass("contributor-dialog__action") - button (messages["save"]) { + button(messages["save"]) { addClass("btn", "btn--primary", "btn--borderless", "contributor-dialog__action__confirm-btn") graphic = FontIcon(MaterialDesign.MDI_CHECK_CIRCLE) tooltip(this.text) diff --git a/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/media/SimpleAudioPlayer.kt b/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/media/SimpleAudioPlayer.kt index f700aed60a..2826806d34 100644 --- a/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/media/SimpleAudioPlayer.kt +++ b/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/media/SimpleAudioPlayer.kt @@ -95,7 +95,7 @@ class SimpleAudioPlayer( nodeOrientation = NodeOrientation.LEFT_TO_RIGHT button { - addClass("btn", "btn--icon") + addClass("btn", "btn--secondary") textProperty().bind(playPauseTextBinding()) tooltip { textProperty().bind(playPauseTextBinding(true)) @@ -116,7 +116,7 @@ class SimpleAudioPlayer( hgrow = Priority.ALWAYS addClass("audio-player--center") - label(titleTextProperty){ + label(titleTextProperty) { addClass("h5", "h5--60", "audio-player__title") visibleWhen { textProperty().isNotEmpty } managedWhen(visibleProperty()) diff --git a/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/narration/NarrationTextItem.kt b/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/narration/NarrationTextItem.kt index d1270f8c38..cc5f537fb7 100644 --- a/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/narration/NarrationTextItem.kt +++ b/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/narration/NarrationTextItem.kt @@ -82,11 +82,10 @@ class NarrationTextItem : VBox() { borderpane { center = stackpane { button { - addClass("btn", "btn--secondary") + addClass("btn", "btn--tertiary") graphic = FontIcon(MaterialDesign.MDI_PLAY) tooltip(messages["play"]) - enableWhen { isPlayEnabledProperty } @@ -103,7 +102,7 @@ class NarrationTextItem : VBox() { ) } button { - addClass("btn", "btn--secondary") + addClass("btn", "btn--tertiary") graphic = FontIcon(MaterialDesign.MDI_PAUSE) tooltip(messages["pause"]) enableWhen { @@ -333,7 +332,7 @@ class NarrationTextItem : VBox() { alignment = Pos.CENTER prefWidth = 316.0 styleClass.clear() - addClass("btn", "btn--secondary") + addClass("btn", "btn--primary") addPseudoClass("inactive") text = messages["record"] graphic = FontIcon(MaterialDesign.MDI_MICROPHONE) diff --git a/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/narration/StickyVerse.kt b/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/narration/StickyVerse.kt index 017c3eda73..dba4ee0e26 100644 --- a/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/narration/StickyVerse.kt +++ b/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/narration/StickyVerse.kt @@ -52,8 +52,8 @@ class StickyVerse : HBox() { } } -class ResumeVerseEvent: FXEvent() +class ResumeVerseEvent : FXEvent() fun EventTarget.stickyVerse(op: StickyVerse.() -> Unit = {}) = StickyVerse().attachTo(this, op) { -} + } diff --git a/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/popup/NotificationSnackBar.kt b/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/popup/NotificationSnackBar.kt index d361f667e7..c89f170983 100644 --- a/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/popup/NotificationSnackBar.kt +++ b/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/popup/NotificationSnackBar.kt @@ -35,9 +35,9 @@ import tornadofx.* import tornadofx.FX.Companion.messages import tornadofx.FX.Companion.primaryStage -private const val SNACK_BAR_TO_SCREEN_RATIO = 9.0/10.0 +private const val SNACK_BAR_TO_SCREEN_RATIO = 9.0 / 10.0 -class NotificationSnackBar(notification: NotificationViewData): HBox() { +class NotificationSnackBar(notification: NotificationViewData) : HBox() { val titleProperty = SimpleStringProperty(notification.title) val messageProperty = SimpleStringProperty(notification.message) @@ -65,11 +65,13 @@ class NotificationSnackBar(notification: NotificationViewData): HBox() { addClass("active-icon") } } + NotificationStatusType.FAILED, NotificationStatusType.WARNING -> { FontIcon(MaterialDesign.MDI_ALERT).apply { addClass("danger-icon") } } + else -> Region() } }) @@ -104,7 +106,7 @@ class NotificationSnackBar(notification: NotificationViewData): HBox() { } button { - addClass("btn", "btn--icon", "btn--borderless") + addClass("btn", "btn--icon", "btn--tertiary") tooltip(messages["dismiss"]) graphic = FontIcon(MaterialDesign.MDI_CLOSE_CIRCLE).apply { addClass("dismiss-icon") diff --git a/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/skins/MarkerNodeSkin.kt b/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/skins/MarkerNodeSkin.kt index 856d0aee3f..4aacd6107a 100644 --- a/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/skins/MarkerNodeSkin.kt +++ b/jvm/controls/src/main/kotlin/org/wycliffeassociates/otter/jvm/controls/skins/MarkerNodeSkin.kt @@ -52,7 +52,7 @@ class MarkerNodeSkin(val control: MarkerNode) : SkinBase(control) { minWidth = USE_PREF_SIZE } button { - addClass("btn", "btn--icon", "btn--borderless", "normal-text") + addClass("btn", "btn--tertiary", "normal-text") graphic = FontIcon(MaterialDesign.MDI_DELETE).addClass("wa-icon") tooltip(messages["remove_chunk"]) visibleWhen { control.canBeDeletedProperty } diff --git a/jvm/controls/src/main/resources/css/chapter-selector.css b/jvm/controls/src/main/resources/css/chapter-selector.css index eadf46fff3..16c1ce4eeb 100644 --- a/jvm/controls/src/main/resources/css/chapter-selector.css +++ b/jvm/controls/src/main/resources/css/chapter-selector.css @@ -19,9 +19,10 @@ .chapter-selector__controls { -fx-alignment: center; -fx-background-radius: 6px; - -fx-border-color: -wa-black-30; + -fx-border-color: -wa-surface-border; -fx-border-radius: 16px; -fx-border-style: solid; + -fx-border-width: 2px } .chapter-selector__title { @@ -52,14 +53,14 @@ .chapter-selector .btn.chapter-selector__btn-prev { -fx-background-radius: 16px 0 0 16px; -fx-border-radius: 16px 0 0 16px; - -fx-border-width: 0 1 0 0; - -fx-border-color: -wa-foreground-hover; + -fx-border-width: 0 2 0 0; + -fx-border-color: -wa-surface-border; ; } .chapter-selector .btn.chapter-selector__btn-next { -fx-background-radius: 0 16px 16px 0; -fx-border-radius: 0 16px 16px 0; - -fx-border-width: 0 0 0 1; - -fx-border-color: -wa-foreground-hover; + -fx-border-width: 0 0 0 2; + -fx-border-color: -wa-surface-border; } diff --git a/jvm/controls/src/main/resources/css/checkbox-button.css b/jvm/controls/src/main/resources/css/checkbox-button.css index 7d31c0908e..e7f2841486 100644 --- a/jvm/controls/src/main/resources/css/checkbox-button.css +++ b/jvm/controls/src/main/resources/css/checkbox-button.css @@ -30,11 +30,11 @@ } .checkbox-button:hover { - -fx-background-color: -wa-secondary-btn-background-hover; + -fx-background-color: -wa-primary-05; } .checkbox-button:pressed { - -fx-background-color: -wa-secondary-btn-background-pressed; + -fx-background-color: -wa-primary-10; } .checkbox-button:selected { diff --git a/jvm/controls/src/main/resources/css/confirm-dialog.css b/jvm/controls/src/main/resources/css/confirm-dialog.css index cf83254d2a..21ddc2c975 100644 --- a/jvm/controls/src/main/resources/css/confirm-dialog.css +++ b/jvm/controls/src/main/resources/css/confirm-dialog.css @@ -44,7 +44,7 @@ -fx-spacing: 16; -fx-padding: 16 12; -fx-text-alignment: justify; - -fx-background-color: -wa-dialog-background; + -fx-background-color: -wa-foreground; -fx-alignment: center; } diff --git a/jvm/controls/src/main/resources/css/control.css b/jvm/controls/src/main/resources/css/control.css index c370c42f2b..0824438112 100644 --- a/jvm/controls/src/main/resources/css/control.css +++ b/jvm/controls/src/main/resources/css/control.css @@ -37,14 +37,6 @@ -fx-border-insets: -2; } -.btn:active { - -fx-background-color: #001533; -} - -.btn:active .ikonli-font-icon { - -fx-icon-color: -wa-white; -} - /* -------------- Button Icon -------------- */ .btn__icon { -fx-icon-color: inherit; @@ -54,7 +46,7 @@ .btn--icon { -fx-border-width: 1px; - -fx-border-color: -wa-btn-icon-border-color; + -fx-border-color: -wa-surface-border; -fx-border-radius: 12px; -fx-background-color: -wa-btn-icon-background; -fx-background-radius: 12px; @@ -70,7 +62,12 @@ } .btn--icon:hover { - -fx-background-color: -wa-btn-icon-background-hover; + -fx-background-color: -wa-button-tertiary-hover-surface; + -fx-border-color: transparent; +} + +.btn--icon:hover .ikonli-font-icon { + -fx-icon-color: -wa-button-tertiary-hover-on-surface; } .btn--icon:active:hover { @@ -78,7 +75,14 @@ } .btn--icon:pressed { - -fx-background-color: -wa-btn-icon-background-pressed; + -fx-background-color: -wa-button-pressed-surface; + -fx-border-color: transparent; + -fx-text-fill: -wa-button-primary-default-on-surface; + -fx-underline: true; +} + +.btn--icon:pressed .ikonli-font-icon { + -fx-icon-color: -wa-button-primary-default-on-surface; } .btn--icon:disabled { @@ -97,44 +101,61 @@ /* -------------- Primary Button -------------- */ .btn--primary { - -fx-background-color: -wa-primary-gradient; + -fx-background-color: -wa-button-primary-default-surface; + -fx-background-radius: 12px; -fx-background-radius: 12px; -fx-effect: -wa-level2; -fx-border-width: 1px; -fx-border-radius: 12px; - -fx-border-color: -wa-primary-dark; - -fx-text-fill: -wa-primary-btn-text-fill; + -fx-border-color: -wa-button-primary-default-border; + -fx-text-fill: -wa-button-primary-default-on-surface; -fx-font-size: 20px; -fx-underline: false; -fx-graphic-text-gap: 8px; } .btn--primary .ikonli-font-icon { - -fx-fill: -wa-primary-btn-text-fill; + -fx-fill: -wa-button-primary-default-on-surface; -fx-font-size: 24px; } .btn--primary:hover { - -fx-background-color: -wa-primary; + -fx-background-color: -wa-button-primary-hover-surface; + -fx-text-fill: -wa-button-primary-hover-on-surface; + -fx-border-color: transparent; -fx-underline: true; } +.btn--primary:hover .ikonli-font-icon { + -fx-fill: -wa-button-primary-hover-on-surface; + -fx-font-size: 24px; +} + .btn--primary:pressed { - -fx-background-color: -wa-primary-dark; + -fx-background-color: -wa-button-pressed-surface; -fx-underline: false; } .btn--primary:disabled { - -fx-background-color: -wa-disabled-background; + -fx-background-color: -wa-button-primary-inactive-surface; -fx-border-width: 0px; - -fx-text-fill: -wa-disabled-text; + -fx-text-fill: -wa-button-primary-inactive-on-surface; -fx-effect: -wa-level0; -fx-cursor: disappear; -fx-underline: false; } .btn--primary:disabled .ikonli-font-icon { - -fx-fill: -wa-disabled-text; + -fx-fill: -wa-button-primary-inactive-on-surface; +} + +.btn--primary:inactive { + -fx-background-color: -wa-button-primary-inactive-surface; + -fx-border-color: transparent; +} + +.btn--primary:inactive .ikonli-font-icon { + -fx-fill: -wa-button-primary-inactive-on-surface; } /* -------------- Call to Action Button -------------- */ @@ -171,37 +192,42 @@ /* -------------- Secondary Button -------------- */ .btn--secondary { - -fx-background-color: -wa-secondary-btn-background; + -fx-background-color: -wa-button-secondary-default-surface; + -fx-background-radius: 12px; + -fx-border-color: -wa-button-secondary-default-border; -fx-border-radius: 12px; - -fx-border-width: 1px; - -fx-border-color: -wa-secondary-btn-border; - -fx-text-fill: -wa-secondary-btn-text-fill; + -fx-border-width: 2px; + -fx-text-fill: -wa-button-secondary-default-on-surface; -fx-font-size: 1.4em; -jfx-disable-visual-focus: true; -fx-graphic-text-gap: 8px; } .btn--secondary .ikonli-font-icon { -fx-font-size: 1.9em; - -fx-icon-color: -wa-secondary-btn-text-fill; + -fx-icon-color: -wa-button-secondary-default-on-surface; } .btn--secondary:hover { - -fx-background-color: -wa-secondary-btn-background-hover; - -fx-border-color: -wa-secondary-btn-text-fill-hover; - -fx-text-fill: -wa-secondary-btn-text-fill-hover; + -fx-background-color: -wa-button-secondary-hover-surface; + -fx-background-radius: 12px; + -fx-border-color: -wa-button-secondary-hover-border; + -fx-border-radius: 12px; + -fx-text-fill: -wa-button-secondary-hover-on-surface; -fx-underline: true; } .btn--secondary:hover .ikonli-font-icon { - -fx-icon-color: -wa-secondary-btn-text-fill-hover; + -fx-icon-color: -wa-button-secondary-hover-on-surface; } + .btn--secondary:pressed { - -fx-background-color: -wa-secondary-btn-background-pressed; - -fx-border-color: -wa-secondary-btn-text-fill-pressed; - -fx-text-fill: -wa-secondary-btn-text-fill-pressed; + -fx-background-color: -wa-button-pressed-surface; + -fx-border-color: -wa-button-secondary-text-fill-pressed; + -fx-text-fill: -wa-button-primary-default-on-surface; -fx-underline: false; } .btn--secondary:pressed .ikonli-font-icon { - -fx-fill: -wa-secondary-btn-text-fill-pressed; + -fx-icon-color: -wa-button-primary-default-on-surface; } + .btn--secondary:disabled { -fx-cursor: disappear; -fx-text-fill: -wa-disabled-text; @@ -214,27 +240,16 @@ } .btn--secondary:active { - -fx-background-color: -wa-black; - -fx-effect: -wa-level3; -} -.btn--secondary:active .text { - -fx-fill: -wa-white; - -fx-text-fill: -wa-white; -} -.btn--secondary:active .ikonli-font-icon { - -fx-icon-color: -wa-white; + -fx-background-color: -wa-button-secondary-active-surface; + -fx-background-radius: 12px; + -fx-border-color: transparent; + -fx-border-width: 2px; + -fx-border-radius: 12px; + -fx-text-fill: -wa-button-secondary-active-on-surface; } -.btn--secondary:inactive { - -fx-background-color: #E5E8EB; - -fx-border-width: 0; -} -.btn--secondary:inactive .text { - -fx-fill: #66768B; - -fx-text-fill: #66768B; -} -.btn--secondary:inactive .ikonli-font-icon { - -fx-icon-color: #66768B; +.btn--secondary:active .ikonli-font-icon { + -fx-icon-color: -wa-button-secondary-active-on-surface; } .btn--secondary-light { @@ -275,31 +290,73 @@ -fx-fill: -wa-white-80; } -.btn--borderless, .btn--borderless:disabled { - -fx-border-width: 0; -} - /* -------------- Tertiary Button -------------- */ -/* This button is very rarely used -/* Typically only found in misc dialogs or on very heavy screens */ .btn--tertiary { - -fx-background-color: transparent; - -fx-border-width: 0px; - -fx-text-fill: -wa-secondary-btn-text-fill; - -fx-icon-color: -wa-secondary-btn-text-fill; + -fx-background-color: inherit; + -fx-border-radius: 12px; + -fx-background-radius: 12px; + -fx-border-width: 2px; + -fx-border-color: -wa-button-tertiary-default-border; + -fx-text-fill: -wa-button-tertiary-default-on-surface; + -fx-font-size: 1.4em; + -jfx-disable-visual-focus: true; -fx-graphic-text-gap: 8px; } + +.btn--tertiary .ikonli-font-icon { + -fx-font-size: 1.9em; + -fx-icon-color: -wa-button-tertiary-default-on-surface; +} + .btn--tertiary:hover { - -fx-background-color: -wa-secondary-btn-background-hover; - -fx-text-fill: -wa-secondary-btn-text-fill-hover; - -fx-icon-color: -wa-secondary-btn-text-fill-hover; + -fx-background-color: -wa-button-tertiary-hover-surface; + -fx-border-color: transparent; + -fx-text-fill: -wa-button-tertiary-hover-on-surface; + -fx-underline: true; } -.btn--tertiary:disabled { - -fx-cursor: disappear; - -fx-text-fill: -wa-disabled-text; - -fx-icon-color: -wa-disabled-text; + +.btn--tertiary:hover .ikonli-font-icon { + -fx-icon-color: -wa-button-tertiary-hover-on-surface; +} + +.btn--tertiary:pressed { + -fx-background-color: -wa-button-pressed-surface; + -fx-border-color: transparent; + -fx-text-fill: -wa-button-primary-default-on-surface; + -fx-underline: true; +} + +.btn--tertiary:pressed .ikonli-font-icon { + -fx-icon-color: -wa-button-primary-default-on-surface; +} + +.btn--tertiary:active { + -fx-background-color: -wa-button-tertiary-active-surface; + -fx-border-color: -wa-button-tertiary-active-border; +} +.btn--tertiary:active .text { + -fx-fill: -wa-button-tertiary-active-on-surface; + -fx-text-fill: -wa-button-tertiary-active-on-surface; +} +.btn--tertiary:active .ikonli-font-icon { + -fx-icon-color: -wa-on-surface-invert; +} + +.btn--tertiary:inactive { + -fx-background-color: inherit; -fx-border-width: 0px; - -fx-background-color: transparent; +} +.btn--tertiary:inactive .text { + -fx-fill: -wa-button-tertiary-inactive-on-surface; + -fx-text-fill: -wa-button-tertiary-inactive-on-surface; +} +.btn--tertiary:inactive .ikonli-font-icon { + -fx-icon-color: -wa-button-tertiary-inactive-on-surface; +} + + +.btn--borderless, .btn--borderless:disabled { + -fx-border-width: 0; } /* ------------ Universal button style --------- */ /* these button styles are for consistent design across different themes */ @@ -490,7 +547,7 @@ .wa-combobox .list-cell:hover, .wa-combobox .combo-box-popup .list-cell:hover { - -fx-background-color: -wa-foreground-hover; + -fx-background-color: -wa-button-tertiary-hover-surface; } .wa-combobox .list-cell:pressed { @@ -556,7 +613,7 @@ /* -------------- Radio button ---------------- */ .wa-radio .radio { - -fx-background-color: -wa-white; + -fx-background-color: -wa-radio-button-background; -fx-border-width: 2px; -fx-border-radius: 1.0em; -fx-border-color: -wa-gray-darker; @@ -653,7 +710,7 @@ } .wa-slider .thumb { - -fx-background-color: -wa-primary-dark; + -fx-background-color: -wa-slider-thumb-color; -fx-background-radius: 10px; -fx-border-radius: 10px; -fx-pref-width: 20px; @@ -739,7 +796,7 @@ .wa-menu-button .menu-item:focused .wa-menu-button__list-item, .wa-menu-button .menu-item:focused .wa-menu-button__btn-util { -fx-border-width: 4px; - -fx-border-color: -wa-button-border; + -fx-border-color: -wa-surface-border; -fx-border-radius: 6px; -fx-border-insets: -4; } @@ -785,7 +842,7 @@ } .wa-menu-button__list-item:hover { - -fx-background-color: -wa-btn-icon-background-selected; + -fx-background-color: -wa-background; -fx-background-radius: 6px; } diff --git a/jvm/controls/src/main/resources/css/exception-content.css b/jvm/controls/src/main/resources/css/exception-content.css index dd7a710ba6..ed83396389 100644 --- a/jvm/controls/src/main/resources/css/exception-content.css +++ b/jvm/controls/src/main/resources/css/exception-content.css @@ -36,12 +36,12 @@ } .exception-content__show-more-btn:hover { - -fx-background-color: -wa-secondary-btn-background-hover; + -fx-background-color: -wa-primary-05; } .exception-content__show-more-btn * { - -fx-fill: -wa-secondary-btn-text-fill; - -fx-icon-color: -wa-secondary-btn-text-fill; + -fx-fill: -wa-regular-text; + -fx-icon-color: -wa-regular-text-80; } .exception-content__send-report { diff --git a/jvm/controls/src/main/resources/css/marker-node.css b/jvm/controls/src/main/resources/css/marker-node.css index 3bc8b957a0..bbf994c086 100644 --- a/jvm/controls/src/main/resources/css/marker-node.css +++ b/jvm/controls/src/main/resources/css/marker-node.css @@ -23,15 +23,16 @@ } .marker-node .title-section { - -fx-pref-height: 80; + -fx-pref-height: 78; -fx-alignment: center-left; -fx-spacing: 10; -fx-padding: 0 2 0 16; - -fx-background-color: linear-gradient(to right, -wa-white-80, -wa-white-70, -wa-white-10); + -fx-background-color: -wa-foreground; } .marker-node__drag-button { -fx-focus-traversable: false; + -fx-background-color: -wa-foreground; } .marker-node:focus-visible .marker-node__drag-button { diff --git a/jvm/controls/src/main/resources/css/popup-menu.css b/jvm/controls/src/main/resources/css/popup-menu.css index 8c5b2f8c93..fea516d0ac 100644 --- a/jvm/controls/src/main/resources/css/popup-menu.css +++ b/jvm/controls/src/main/resources/css/popup-menu.css @@ -58,7 +58,7 @@ } .wa-context-menu .menu-item:focused { - -fx-background-color: -wa-foreground-hover; + -fx-background-color: -wa-button-tertiary-hover-surface; } .wa-context-menu .menu-item:focused > .label { diff --git a/jvm/controls/src/main/resources/css/scrolling-waveform.css b/jvm/controls/src/main/resources/css/scrolling-waveform.css index 06ca0bc6bf..6cbaaaaac1 100644 --- a/jvm/controls/src/main/resources/css/scrolling-waveform.css +++ b/jvm/controls/src/main/resources/css/scrolling-waveform.css @@ -63,7 +63,7 @@ } .scrolling-waveform-frame__image-container { - -fx-background-color: white; + -fx-background-color: -wa-marker-track-background; } .scrolling-waveform-frame__top-track { diff --git a/jvm/controls/src/main/resources/css/select-button.css b/jvm/controls/src/main/resources/css/select-button.css index 9cfc912321..af0425801a 100644 --- a/jvm/controls/src/main/resources/css/select-button.css +++ b/jvm/controls/src/main/resources/css/select-button.css @@ -34,7 +34,7 @@ } .select-button:hover, .select-button:hover .wa-radio .radio { - -fx-background-color: -wa-secondary-btn-background-hover; + -fx-background-color: -wa-primary-05; } .select-button:pressed, .select-button:pressed .wa-radio .radio { diff --git a/jvm/controls/src/main/resources/css/table-view.css b/jvm/controls/src/main/resources/css/table-view.css index 8279a20c39..03bb0a9877 100644 --- a/jvm/controls/src/main/resources/css/table-view.css +++ b/jvm/controls/src/main/resources/css/table-view.css @@ -23,6 +23,9 @@ -fx-background-radius: 10; -fx-background-insets: 0; -fx-padding: 0; + -fx-border-width: 1px 1px 0 1px; + -fx-border-color: -wa-surface-border; + -fx-border-radius: 8px 8px 0 0; } /* header */ @@ -49,14 +52,14 @@ } .wa-table-view .column-header-background { - -fx-background-color: -wa-table-header-background; + -fx-background-color: -wa-background; -fx-background-radius: 8 8 0 0; -fx-padding: 8 0; } /* override javaFX - https://gist.github.com/tmazeika/c90c03c645d18722ddb0#file-caspian-css-L2153 */ .wa-table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:focused:selected { - -fx-background-color: -wa-primary-light; + -fx-background-color: -wa-background; } /* cells */ @@ -75,7 +78,7 @@ } .wa-table-view .table-row-cell:hover { - -fx-background-color: -wa-foreground-hover; + -fx-background-color: -wa-table-row-hover; } .wa-table-view .table-row-cell:focused:selected .label { diff --git a/jvm/controls/src/main/resources/css/theme/dark-theme.css b/jvm/controls/src/main/resources/css/theme/dark-theme.css index 656d2bf398..34493e968a 100644 --- a/jvm/controls/src/main/resources/css/theme/dark-theme.css +++ b/jvm/controls/src/main/resources/css/theme/dark-theme.css @@ -19,28 +19,31 @@ @import "/css/base-colors.css" .dark-theme { + /*Primary Color */ - -wa-primary: #015AD9; - -wa-primary-05: #015AD90D; - -wa-primary-10: #015AD91A; - -wa-primary-20: #015AD933; - -wa-primary-30: #015AD94C; - -wa-primary-light: #CEE6FF; - -wa-primary-dark: #00377C; - - -wa-primary-variant: #5d37cd; - -wa-primary-variant-light: #b399ff; - -wa-primary-variant-dark: #47367d; - - -wa-background: #1c2031; + -wa-primary: #88A9FF; + -wa-primary-05: #88A9FF0D; + -wa-primary-10: #88A9FF1A; + -wa-primary-20: #88A9FF33; + -wa-primary-light: #00102e; + -wa-primary-light-80: #00102ecc; + -wa-primary-dark: #b2c5ff; + -wa-primary-darkest: #dae2ff; + + -wa-surface-primary: #343434; + -wa-surface-secondary: #1f1f1f; + -wa-surface-tertiary: #cccccc; + -wa-surface-border: #0e0e0e; + -wa-on-surface-secondary: #cccccc; + -wa-on-surface-invert: #1f1f1f; + -wa-on-surface-tertiary: #808080; + + -wa-background: -wa-surface-secondary; -wa-background-dark: #10121c; - - -wa-foreground: #373949; + -wa-foreground: -wa-surface-primary; -wa-foreground-hover: #585b74; -wa-foreground-pressed: #21212c; - -wa-surface: #9097bb; - /*Accent Color */ -wa-accent: #F39422; -wa-accent-light: #fdbf5b; @@ -61,7 +64,7 @@ -wa-highlight-text: -wa-accent-light; -wa-disabled-text: gray; -wa-disabled-background: #ffffff20; - -wa-status-active: -wa-blue; + -wa-status-active: #88A9FF; /*color brand base*/ -wa-status-inactive: -wa-black-05-noalpha; -wa-status-complete: #2ec144; -wa-inverse-text: -wa-gray-dark; @@ -95,40 +98,64 @@ -wa-take-card-placeholder: -wa-white-05; /* buttons */ - -wa-primary-btn-text-fill: -wa-white; - -wa-secondary-btn-text-fill: -wa-regular-text; - -wa-secondary-btn-text-fill-hover: -wa-regular-text; - -wa-secondary-btn-text-fill-pressed: -wa-regular-text; - -wa-secondary-btn-background: transparent; - -wa-secondary-btn-background-hover: -wa-foreground-hover; - -wa-secondary-btn-background-pressed: -wa-foreground-pressed; - -wa-secondary-btn-border: -wa-regular-text; -wa-btn-icon-background: -wa-transparent; - -wa-btn-icon-background-hover: -wa-foreground-hover; - -wa-btn-icon-background-pressed: -wa-foreground-pressed; -wa-btn-icon-background-selected: #9bbcdd; - -wa-btn-icon-border-color: -wa-regular-text; - -wa-filter-button-background: #4d4f66; - -wa-app-bar-btn-text: -wa-white; + -wa-btn-icon-border-color: -wa-surface-border; + + -wa-app-bar-btn-text: -wa-black; + -wa-button-pressed-surface: #dbe2ff; + -wa-button-pressed-on-surface: -wa-button-primary-default-on-surface; + + -wa-button-primary-default-surface: -wa-primary; + -wa-button-primary-default-on-surface: -wa-on-surface-invert; + -wa-button-primary-default-border: -wa-primary; + -wa-button-primary-hover-surface: -wa-primary-dark; + -wa-button-primary-hover-on-surface: -wa-on-surface-invert; + -wa-button-primary-inactive-surface: -wa-surface-secondary; + -wa-button-primary-inactive-on-surface: -wa-on-surface-tertiary; + + -wa-button-secondary-default-surface: -wa-surface-primary; + -wa-button-secondary-default-on-surface: -wa-primary; + -wa-button-secondary-default-border: -wa-primary; + -wa-button-secondary-hover-surface: -wa-primary-dark; + -wa-button-secondary-hover-on-surface: -wa-on-surface-invert; + -wa-button-secondary-hover-border: -wa-primary-dark; + -wa-button-secondary-active-surface: -wa-primary-dark; + -wa-button-secondary-active-on-surface: -wa-on-surface-invert; + -wa-button-secondary-active-border: -wa-primary-dark; + -wa-button-secondary-inactive-surface: -wa-surface-primary; + -wa-button-secondary-inactive-on-surface: -wa-on-surface-tertiary; + -wa-button-secondary-inactive-border: -wa-surface-tertiary; + -wa-button-secondary-text-fill-pressed: -wa-regular-text; + + -wa-button-tertiary-default-on-surface: -wa-on-surface-secondary; + -wa-button-tertiary-default-border: -wa-surface-border; + -wa-button-tertiary-hover-surface: -wa-surface-secondary; + -wa-button-tertiary-hover-on-surface: -wa-on-surface-secondary; + -wa-button-tertiary-active-surface: -wa-primary-darkest; + -wa-button-tertiary-active-on-surface: -wa-on-surface-invert; + -wa-button-tertiary-active-border: -wa-primary-darkest; + -wa-button-tertiary-inactive-on-surface: -wa-on-surface-tertiary; /* text field input */ - -wa-text-input-fill: -wa-black; + -wa-text-input-fill: -wa-white; -wa-text-field-border: gray; -wa-text-field-border-focused: gray; - -wa-text-field-background: transparent; - -wa-text-field-background-hover: transparent; - -wa-text-field-background-focused: -wa-regular-text; - -wa-text-field-background-focused-hover: -wa-regular-text; + -wa-text-field-background: -wa-foreground; + -wa-text-field-background-hover: -wa-button-tertiary-hover-surface; + -wa-text-field-background-focused: -wa-foreground; + -wa-text-field-background-focused-hover: -wa-foreground; -wa-text-field-focused-effect: -wa-level0; /* combo box, drop down */ -wa-combo-box-background: -wa-foreground; - -wa-combo-box-background-selected: -wa-primary-10; + -wa-combo-box-background-selected: -wa-primary-light; /* check box, radio */ -wa-checkbox-background: -wa-fill-neutral; -wa-checkbox-button-background: #4d4f66; -wa-checkbox-button-background-selected: #bdd8ff; + -wa-radio-button-background: -wa-foreground; /* toggle button */ -wa-toggle-selected: -wa-white-40; @@ -140,12 +167,14 @@ -wa-card-shadow-lower-right-dark: -wa-level0; /* audio player */ - -wa-slider-track-color: gray; + -wa-slider-track-color: -wa-primary-light; -wa-slider-border-color: -wa-white-30; + -wa-slider-thumb-color: #CEE6FF; -wa-minimap-slider-background: rgba(90, 149, 187, 0.22); -wa-recorder-controls-background: #0c0033; - -wa-waveform-background: #161b2f; + -wa-narration-waveform-background: -wa-foreground; + -wa-waveform-background: #0E0E0E; /*color/surface/tertiary*/ -wa-waveform-background-dark: #4f5964; -wa-scrolling-waveform-background: -wa-waveform-background; -wa-scrolling-waveform-track-border: rgb(167, 182, 207); @@ -155,11 +184,11 @@ -wa-marker-overlay-primary: #0f32a542; -wa-marker-overlay-secondary: #3a9b6a30; - -wa-marker-track-background: #4f5964; + -wa-marker-track-background: -wa-foreground; /* dialog */ -wa-dialog-overlay: -wa-black-80; - -wa-dialog-background: -wa-background; + -wa-dialog-background: -wa-foreground; /* status */ -wa-success-color: #82A93F; @@ -167,10 +196,10 @@ /* TABLE */ -wa-table-header-background: #4d4d4d; - -wa-progress-track-background: #e0edf9; + -wa-progress-track-background: -wa-primary-light; -wa-progress-foreground: #015AD9; -wa-table-row-border: -wa-list-item-border-light; - -wa-table-row-hover: -wa-foreground-hover; + -wa-table-row-hover: -wa-background; } .dark-theme .workspace { diff --git a/jvm/controls/src/main/resources/css/theme/light-theme.css b/jvm/controls/src/main/resources/css/theme/light-theme.css index 6bee924625..9940124d44 100644 --- a/jvm/controls/src/main/resources/css/theme/light-theme.css +++ b/jvm/controls/src/main/resources/css/theme/light-theme.css @@ -19,18 +19,16 @@ @import "/css/base-colors.css" .light-theme { + /*Primary Color */ -wa-primary: #015AD9; -wa-primary-05: #015AD90D; -wa-primary-10: #015AD91A; -wa-primary-20: #015AD933; - -wa-primary-30: #015AD94C; - -wa-primary-light: #CEE6FF; - -wa-primary-dark: #00377C; - - -wa-primary-variant: -wa-primary; - -wa-primary-variant-light: -wa-primary; - -wa-primary-variant-dark: -wa-primary; + -wa-primary-light: #eef0ff; + -wa-primary-light-80: #eef0ffcc; + -wa-primary-dark: #0040a0; + -wa-primary-darkest: #001847; -wa-background: #f4f4f4; -wa-background-dark: #B3B9C2; @@ -39,7 +37,13 @@ -wa-foreground-hover: #E5E8EB; -wa-foreground-pressed: -wa-black-10; - -wa-surface: inherit; + -wa-surface-primary: #ffffff; + -wa-surface-secondary: #F2F2F2; + -wa-surface-tertiary: #e6e6e6; + -wa-surface-border: #e6e6e6; + -wa-on-surface-secondary: #343434; + -wa-on-surface-invert: #e6e6e6; + -wa-on-surface-tertiary: #999999; /*Accent Color */ -wa-accent: #FFB100; @@ -95,21 +99,45 @@ -wa-take-card-placeholder: -wa-black-05; /* buttons */ - -wa-primary-btn-text-fill: -wa-white; - -wa-secondary-btn-text-fill: -wa-regular-text-80; - -wa-secondary-btn-text-fill-hover: -wa-primary-dark; - -wa-secondary-btn-text-fill-pressed: -wa-primary-dark; - -wa-secondary-btn-background: transparent; - -wa-secondary-btn-background-hover: -wa-primary-05; - -wa-secondary-btn-background-pressed: -wa-primary-10; - -wa-secondary-btn-border: -wa-border-light; -wa-btn-icon-background: -wa-white; - -wa-btn-icon-background-hover: #f0f0f0; - -wa-btn-icon-background-pressed: #e6e6e6; -wa-btn-icon-background-selected: -wa-primary-10; -wa-btn-icon-border-color: -wa-black-20; - -wa-filter-button-background: -wa-black-10; + -wa-app-bar-btn-text: -wa-white; + -wa-button-pressed-surface: #001952; + -wa-button-pressed-on-surface: -wa-button-primary-default-on-surface; + + -wa-button-primary-default-surface: -wa-primary; + -wa-button-primary-default-on-surface: -wa-on-surface-invert; + -wa-button-primary-default-border: -wa-primary-darkest; + -wa-button-primary-hover-surface: -wa-primary-dark; + -wa-button-primary-hover-on-surface: -wa-on-surface-invert; + -wa-button-primary-inactive-surface: -wa-surface-secondary; + -wa-button-primary-inactive-on-surface: -wa-on-surface-tertiary; + + -wa-button-secondary-default-surface: -wa-surface-primary; + -wa-button-secondary-default-on-surface: -wa-primary; + -wa-button-secondary-default-border: -wa-primary; + -wa-button-secondary-hover-surface: -wa-primary-light; + -wa-button-secondary-hover-on-surface: -wa-primary; + -wa-button-secondary-hover-border: -wa-primary; + -wa-button-secondary-active-surface: -wa-primary-light; + -wa-button-secondary-active-on-surface: -wa-primary; + -wa-button-secondary-active-border: -wa-primary; + -wa-button-secondary-inactive-surface: -wa-surface-primary; + -wa-button-secondary-inactive-on-surface: -wa-on-surface-tertiary; + -wa-button-secondary-inactive-border: -wa-surface-tertiary; + -wa-button-secondary-text-fill-pressed: -wa-primary-dark; + + -wa-button-tertiary-default-on-surface: -wa-on-surface-secondary; + -wa-button-tertiary-default-border: -wa-surface-border; + -wa-button-tertiary-hover-surface: -wa-surface-secondary; + -wa-button-tertiary-hover-on-surface: -wa-on-surface-secondary; + -wa-button-tertiary-active-surface: -wa-primary-darkest; + -wa-button-tertiary-active-on-surface: -wa-on-surface-invert; + -wa-button-tertiary-active-border: -wa-primary-darkest; + -wa-button-tertiary-inactive-on-surface: -wa-on-surface-tertiary; + /* text field input */ -wa-text-input-fill: -wa-black; @@ -123,12 +151,13 @@ /* combo box, drop down */ -wa-combo-box-background: -wa-white; - -wa-combo-box-background-selected: -wa-primary-10; + -wa-combo-box-background-selected: -wa-primary-light; /* check box, radio */ -wa-checkbox-background: -wa-white; -wa-checkbox-button-background: -wa-foreground; -wa-checkbox-button-background-selected: -wa-primary-10; + -wa-radio-button-background: -wa-white; /* toggle button */ -wa-toggle-selected: -wa-primary; @@ -142,9 +171,11 @@ /* audio player */ -wa-slider-track-color: -wa-black-05; -wa-slider-border-color: -wa-black-20; + -wa-slider-thumb-color: -wa-primary-dark; -wa-minimap-slider-background: #B3B9C2; -wa-recorder-controls-background: #282CBD; + -wa-narration-waveform-background: white; -wa-waveform-background: white; -wa-waveform-background-dark: rgb(206, 214, 227); -wa-scrolling-waveform-background: -wa-black-30-noalpha; @@ -155,7 +186,7 @@ -wa-marker-overlay-primary: rgba(30, 221, 118, 0.2); -wa-marker-overlay-secondary: rgba(1, 90, 217, 0.2); - -wa-marker-track-background: -wa-black-10-noalpha; + -wa-marker-track-background: -wa-waveform-background; /* dialog */ -wa-dialog-overlay: -wa-black-60; diff --git a/jvm/controls/src/main/resources/css/translation-card-2.css b/jvm/controls/src/main/resources/css/translation-card-2.css index fbd72ab611..060f342031 100644 --- a/jvm/controls/src/main/resources/css/translation-card-2.css +++ b/jvm/controls/src/main/resources/css/translation-card-2.css @@ -20,7 +20,11 @@ -fx-padding: 12px 16px; -fx-spacing: 8px; -fx-background-radius: 16px; - -fx-background-color: #e4f0fd; + -fx-background-color: -wa-foreground; + -fx-background-color: transparent; + -fx-border-width: 2px; + -fx-border-color: -wa-surface-border; + -fx-border-radius: 16px; } .translation-card:hover { @@ -36,7 +40,7 @@ .translation-card--active, .translation-card--active:hover { - -fx-background-color: -wa-secondary-btn-background; + -fx-background-color: transparent; -fx-border-width: 2px; -fx-border-color: -wa-primary; -fx-border-radius: 16px; @@ -51,12 +55,12 @@ } .translation-card__header .translation-card__header__text { - -fx-text-fill: -wa-status-active; + -fx-text-fill: -wa-regular-text; } .translation-card__header .ikonli-font-icon, .translation-card__body .ikonli-font-icon { - -fx-icon-color: -wa-status-active; + -fx-icon-color: -wa-regular-text; -fx-font-size: 22px; } @@ -67,7 +71,7 @@ .translation-card__language { -fx-graphic-text-gap: 0.6em; - -fx-text-fill: -wa-status-active; + -fx-text-fill: -wa-regular-text; -fx-font-size: 1.4em; } @@ -117,7 +121,7 @@ } .translation-type-card__text-cell > .translation-type-card__text-cell__title { - -fx-text-fill: -wa-status-active; + -fx-text-fill: -wa-regular-text; } .translation-type-card__action-cell { diff --git a/jvm/controls/src/main/resources/org/wycliffeassociates/otter/jvm/controls/skins/chapterselector/ChapterSelector.fxml b/jvm/controls/src/main/resources/org/wycliffeassociates/otter/jvm/controls/skins/chapterselector/ChapterSelector.fxml index 717977e716..6b7ca2bfee 100644 --- a/jvm/controls/src/main/resources/org/wycliffeassociates/otter/jvm/controls/skins/chapterselector/ChapterSelector.fxml +++ b/jvm/controls/src/main/resources/org/wycliffeassociates/otter/jvm/controls/skins/chapterselector/ChapterSelector.fxml @@ -28,19 +28,21 @@ - - diff --git a/jvm/markerapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/markerapp/app/view/MarkerView.kt b/jvm/markerapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/markerapp/app/view/MarkerView.kt index 90c3872e6f..a222bf30b4 100644 --- a/jvm/markerapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/markerapp/app/view/MarkerView.kt +++ b/jvm/markerapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/markerapp/app/view/MarkerView.kt @@ -27,7 +27,8 @@ import org.wycliffeassociates.otter.jvm.controls.event.NavigationRequestBlockedE import org.wycliffeassociates.otter.jvm.controls.model.pixelsToFrames import org.wycliffeassociates.otter.jvm.controls.styles.tryImportStylesheet import org.wycliffeassociates.otter.jvm.controls.waveform.AudioSlider -import org.wycliffeassociates.otter.jvm.controls.waveform.MarkerPlacementWaveform +import org.wycliffeassociates.otter.jvm.controls.waveform.MarkerWaveform +import org.wycliffeassociates.otter.jvm.controls.waveform.PlaceMarkerLayer import org.wycliffeassociates.otter.jvm.markerapp.app.viewmodel.VerseMarkerViewModel import org.wycliffeassociates.otter.jvm.utils.ListenerDisposer import org.wycliffeassociates.otter.jvm.utils.onChangeWithDisposer @@ -38,7 +39,7 @@ import tornadofx.* class MarkerView : PluginEntrypoint() { val viewModel: VerseMarkerViewModel by inject() - private val waveform = MarkerPlacementWaveform() + private val waveform = MarkerWaveform() private var slider: AudioSlider? = null private var minimap: MinimapFragment? = null @@ -87,8 +88,8 @@ class MarkerView : PluginEntrypoint() { init { tryImportStylesheet(resources["/css/verse-marker-app.css"]) - tryImportStylesheet(resources["/css/scrolling-waveform.css"]) - tryImportStylesheet(resources["/css/chunk-marker.css"]) + tryImportStylesheet("/css/marker-node.css") + tryImportStylesheet("/css/scrolling-waveform.css") subscribe { unsubscribe() @@ -125,6 +126,7 @@ class MarkerView : PluginEntrypoint() { themeProperty.bind(viewModel.themeColorProperty) positionProperty.bind(viewModel.positionProperty) audioPositionProperty.bind(viewModel.audioPositionProperty) + canDeleteMarkerProperty.set(false) setOnSeekNext { viewModel.seekNext() } setOnSeekPrevious { viewModel.seekPrevious() } @@ -142,11 +144,14 @@ class MarkerView : PluginEntrypoint() { setOnToggleMedia(viewModel::mediaToggle) setOnResumeMedia(viewModel::resumeMedia) - // Marker stuff - imageWidthProperty.bind(viewModel.imageWidthProperty) - setOnPositionChanged { id, position -> slider!!.updateMarker(id, position) } setOnLocationRequest { viewModel.requestAudioLocation() } + + add( + PlaceMarkerLayer().apply { + onPlaceMarkerAction { viewModel.placeMarker() } + } + ) } bottom = vbox { add() diff --git a/jvm/markerapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/markerapp/app/view/PlaybackControlsFragment.kt b/jvm/markerapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/markerapp/app/view/PlaybackControlsFragment.kt index 04e426abc6..672d645598 100644 --- a/jvm/markerapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/markerapp/app/view/PlaybackControlsFragment.kt +++ b/jvm/markerapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/markerapp/app/view/PlaybackControlsFragment.kt @@ -39,10 +39,6 @@ class PlaybackControlsFragment : Fragment() { val viewModel: VerseMarkerViewModel by inject() private val rootStyles = "vm-play-controls" - private val playButtonStyle = "vm-play-controls__play-btn" - private val roundedButtonStyle = "vm-play-controls__btn--rounded" - private val seekButtonStyle = "vm-play-controls__seek-btn" - private val continueButtonStyle = "vm-continue-button" private val playIcon = FontIcon("fa-play") private val pauseIcon = FontIcon("fa-pause") @@ -53,10 +49,7 @@ class PlaybackControlsFragment : Fragment() { private lateinit var leftControls: Region private val playBtn = JFXButton().apply { - styleClass.addAll( - playButtonStyle, - roundedButtonStyle - ) + addClass("btn", "btn--icon", "btn--tertiary") graphicProperty().bind( Bindings.createObjectBinding( { @@ -72,26 +65,20 @@ class PlaybackControlsFragment : Fragment() { } private val nextBtn = JFXButton().apply { - styleClass.addAll( - seekButtonStyle, - roundedButtonStyle - ) + addClass("btn", "btn--tertiary") graphic = nextIcon setOnAction { viewModel.seekNext() } } private val previousBtn = JFXButton().apply { - styleClass.addAll( - seekButtonStyle, - roundedButtonStyle - ) + addClass("btn", "btn--tertiary") graphic = previousIcon setOnAction { viewModel.seekPrevious() } } private val undoBtn = JFXButton().apply { text = messages["undo"] - addClass("btn", "btn--secondary", "btn--white-on-dark") + addClass("btn", "btn--tertiary") setOnAction { viewModel.undoMarker() @@ -101,7 +88,7 @@ class PlaybackControlsFragment : Fragment() { private val redoBtn = JFXButton().apply { text = messages["redo"] - addClass("btn", "btn--secondary", "btn--white-on-dark") + addClass("btn", "btn--tertiary") setOnAction { viewModel.redoMarker() @@ -112,7 +99,7 @@ class PlaybackControlsFragment : Fragment() { private val closeBtn = JFXButton().apply { text = messages["continue"] graphic = continueIcon - styleClass.addAll("btn", "btn--primary", "btn--borderless", continueButtonStyle) + styleClass.addAll("btn", "btn--secondary") disableProperty().bind(viewModel.isLoadingProperty) setOnAction { diff --git a/jvm/markerapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/markerapp/app/viewmodel/VerseMarkerViewModel.kt b/jvm/markerapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/markerapp/app/viewmodel/VerseMarkerViewModel.kt index d527c2474d..17aaf7da69 100644 --- a/jvm/markerapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/markerapp/app/viewmodel/VerseMarkerViewModel.kt +++ b/jvm/markerapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/markerapp/app/viewmodel/VerseMarkerViewModel.kt @@ -62,7 +62,7 @@ class VerseMarkerViewModel : ViewModel(), IMarkerViewModel { private val width = Screen.getMainScreen().platformWidth private val height = min(Screen.getMainScreen().platformHeight, WAVEFORM_MAX_HEIGHT.toInt()) - val themeColorProperty = SimpleObjectProperty(ColorTheme.LIGHT) + val themeColorProperty = SimpleObjectProperty() private val asyncBuilder = ObservableWaveformBuilder() lateinit var waveform: Observable @@ -102,6 +102,7 @@ class VerseMarkerViewModel : ViewModel(), IMarkerViewModel { fun onDock(op: () -> Unit) { onThemeChangeAction.set(op) + themeColorProperty.set(getThemeFromRoot()) timer?.start() isLoadingProperty.set(true) val audio = loadAudio() @@ -113,17 +114,20 @@ class VerseMarkerViewModel : ViewModel(), IMarkerViewModel { themeColorProperty.bind( Bindings.createObjectBinding( { - if (primaryStage.scene.root.styleClass.contains(ColorTheme.DARK.styleClass)) { - ColorTheme.DARK - } else { - ColorTheme.LIGHT - } + getThemeFromRoot() }, primaryStage.scene.root.styleClass ) ) } + private fun getThemeFromRoot(): ColorTheme { + return if (primaryStage.scene.root.styleClass.contains(ColorTheme.DARK.styleClass)) { + ColorTheme.DARK + } else { + ColorTheme.LIGHT + } + } fun onThemeChange() { val audioFile = loadAudio() diff --git a/jvm/markerapp/src/main/resources/css/verse-marker-app.css b/jvm/markerapp/src/main/resources/css/verse-marker-app.css index 931bc6ccaa..40947044b8 100644 --- a/jvm/markerapp/src/main/resources/css/verse-marker-app.css +++ b/jvm/markerapp/src/main/resources/css/verse-marker-app.css @@ -64,7 +64,7 @@ .vm-play-controls { -fx-pref-height: 88px; -fx-min-height: 88px; - -fx-background-color: -wa-recorder-controls-background; + -fx-background-color: -wa-foreground; -fx-padding: 0px 16px 0px 16px; -fx-spacing: 22px; } diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/components/AppBar.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/components/AppBar.kt index dfbba31b74..d99b2e74fb 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/components/AppBar.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/components/AppBar.kt @@ -45,7 +45,7 @@ class AppBar : Fragment() { private val buttonsToggleGroup = ToggleGroup() private val homeButton = AppBarButton().apply { - addClass("bottom-border") + addClass("app-bar-button__icon") textProperty().set(messages["home"]) graphicProperty().set(FontIcon(MaterialDesign.MDI_HOME)) @@ -73,7 +73,7 @@ class AppBar : Fragment() { } private val settingsButton = AppBarButton().apply { - addClass("top-border") + addClass("app-bar-button__icon") textProperty().set(messages["settings"]) graphicProperty().set(FontIcon(MaterialDesign.MDI_SETTINGS)) toggleGroup = buttonsToggleGroup @@ -88,7 +88,7 @@ class AppBar : Fragment() { } private val infoButton = AppBarButton().apply { - addClass("top-border") + addClass("app-bar-button__icon") textProperty().set(messages["info"]) graphicProperty().set(FontIcon(MaterialDesign.MDI_INFORMATION)) toggleGroup = buttonsToggleGroup @@ -125,7 +125,9 @@ class AppBar : Fragment() { SettingsView::class -> settingsButton.requestFocus() InfoView::class -> infoButton.requestFocus() // If the drawer is closed from something other than the toggle buttons, deselect them all - else -> { buttonsToggleGroup.toggles.forEach { it.isSelected = false } } + else -> { + buttonsToggleGroup.toggles.forEach { it.isSelected = false } + } } } } diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/components/ChunkTakeCard.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/components/ChunkTakeCard.kt index 839f4b238e..e90dfbfb63 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/components/ChunkTakeCard.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/components/ChunkTakeCard.kt @@ -52,7 +52,7 @@ class ChunkTakeCard(take: TakeCardModel) : HBox() { sideTextProperty.bind(remainingTimeProperty) } button { - addClass("btn", "btn--icon") + addClass("btn", "btn--secondary") tooltip(messages["delete"]) graphic = FontIcon(MaterialDesign.MDI_DELETE) @@ -68,7 +68,7 @@ class ChunkTakeCard(take: TakeCardModel) : HBox() { } } button { - addClass("btn", "btn--icon") + addClass("btn", "btn--secondary") tooltip(messages["select"]) togglePseudoClass("active", take.selected) diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/components/drawer/SourceTextDrawer.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/components/drawer/SourceTextDrawer.kt index 5adf8a60b4..00c18039fd 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/components/drawer/SourceTextDrawer.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/components/drawer/SourceTextDrawer.kt @@ -55,7 +55,7 @@ class SourceTextDrawer : VBox() { } region { hgrow = Priority.ALWAYS } button { - addClass("btn", "btn--secondary") + addClass("btn", "btn--tertiary", "source-text-drawer__btn") graphicProperty().bind(isCollapsedProperty.objectBinding { if (it == true) { VBox( diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/NarrationHeader.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/NarrationHeader.kt index 9adc2ca8eb..3062bb6483 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/NarrationHeader.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/NarrationHeader.kt @@ -79,7 +79,7 @@ class NarrationHeader : View() { addClass("narration__header-controls") button { tooltip = tooltip(messages["undoAction"]) - addClass("btn", "btn--secondary") + addClass("btn", "btn--tertiary") graphic = FontIcon(MaterialDesign.MDI_UNDO) setOnAction { FX.eventbus.fire(NarrationUndoEvent()) @@ -88,7 +88,7 @@ class NarrationHeader : View() { } button { tooltip = tooltip(messages["redoAction"]) - addClass("btn", "btn--secondary") + addClass("btn", "btn--tertiary") graphic = FontIcon(MaterialDesign.MDI_REDO) setOnAction { FX.eventbus.fire(NarrationRedoEvent()) diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/NarrationPage.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/NarrationPage.kt index 41e6fed789..1734cf7698 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/NarrationPage.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/NarrationPage.kt @@ -23,7 +23,6 @@ import io.reactivex.disposables.CompositeDisposable import io.reactivex.rxkotlin.addTo import org.kordamp.ikonli.materialdesign.MaterialDesign import org.slf4j.LoggerFactory -import org.wycliffeassociates.otter.common.data.ColorTheme import org.wycliffeassociates.otter.jvm.controls.dialog.ImportAudioDialog import org.wycliffeassociates.otter.jvm.controls.dialog.LoadingModal import org.wycliffeassociates.otter.jvm.controls.dialog.PluginOpenedPage @@ -91,7 +90,6 @@ class NarrationPage : View() { } override val root = stackpane { - addClass(ColorTheme.LIGHT.styleClass) val narrationRoot = this createSnackBar() @@ -284,7 +282,7 @@ class NarrationPage : View() { private fun setUpLoadingModal() { find().apply { orientationProperty.set(settingsViewModel.orientationProperty.value) - themeProperty.set(settingsViewModel.appColorMode.value) + themeProperty.bind(settingsViewModel.appColorMode) messageProperty.bind(viewModel.loadingModalTextProperty) viewModel.openLoadingModalProperty.onChangeWithDisposer { diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/NarrationToolBar.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/NarrationToolBar.kt index 35bcffa5aa..4b7b5bc861 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/NarrationToolBar.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/NarrationToolBar.kt @@ -41,7 +41,6 @@ class NarrationToolBar : View() { alignment = Pos.CENTER_LEFT button { addClass("btn", "btn--secondary") - addPseudoClass("active") tooltip { textProperty().bind(this@button.textProperty()) } disableWhen { @@ -54,11 +53,11 @@ class NarrationToolBar : View() { if (state == NarrationStateType.PLAYING) { graphic = FontIcon(MaterialDesign.MDI_PAUSE) text = messages["pause"] - togglePseudoClass("active", true) + addPseudoClass("active") } else { graphic = FontIcon(MaterialDesign.MDI_PLAY) text = messages["playAll"] - togglePseudoClass("active", false) + removePseudoClass("active") } } } @@ -73,7 +72,7 @@ class NarrationToolBar : View() { } } button { - addClass("btn", "btn--secondary") + addClass("btn", "btn--tertiary") tooltip(messages["previousVerse"]) graphic = FontIcon(MaterialDesign.MDI_SKIP_PREVIOUS) setOnAction { @@ -84,7 +83,7 @@ class NarrationToolBar : View() { } } button { - addClass("btn", "btn--secondary") + addClass("btn", "btn--tertiary") tooltip(messages["nextVerse"]) graphic = FontIcon(MaterialDesign.MDI_SKIP_NEXT) setOnAction { diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/markers/VerseMarkerControl.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/markers/VerseMarkerControl.kt index a2d0c96c2a..3a15dbb356 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/markers/VerseMarkerControl.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/markers/VerseMarkerControl.kt @@ -111,7 +111,7 @@ class VerseMarkerControl : BorderPane() { } right = Button().apply { - addClass("btn", "btn--icon", "verse-marker__menu") + addClass("btn", "btn--icon", "btn--tertiary", "verse-marker__menu") setAlignment(this, Pos.BOTTOM_LEFT) graphic = FontIcon(MaterialDesign.MDI_DOTS_VERTICAL) tooltip(messages["options"]) diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/menu/NarrationMenu.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/menu/NarrationMenu.kt index 83c238c61c..a910b66f7a 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/menu/NarrationMenu.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/menu/NarrationMenu.kt @@ -40,6 +40,7 @@ class NarrationMenu : ContextMenu() { isAutoHide = true val openChapterOpt = MenuItem().apply { + addClass("btn", "btn--tertiary", "btn--borderless") graphic = label(messages["openChapterIn"]) { graphic = FontIcon(MaterialDesign.MDI_OPEN_IN_NEW) tooltip(text) @@ -49,6 +50,7 @@ class NarrationMenu : ContextMenu() { } } val verseMarkerOpt = MenuItem().apply { + addClass("btn", "btn--tertiary", "btn--borderless") graphic = label(messages["editVerseMarkers"]) { graphic = FontIcon(MaterialDesign.MDI_BOOKMARK_OUTLINE) tooltip(text) @@ -62,6 +64,7 @@ class NarrationMenu : ContextMenu() { ) } val restartChapterOpt = MenuItem().apply { + addClass("btn", "btn--tertiary", "btn--borderless") graphic = label(messages["restartChapter"]) { graphic = FontIcon(MaterialDesign.MDI_DELETE) tooltip(text) @@ -76,6 +79,7 @@ class NarrationMenu : ContextMenu() { } val importChapterAudio = MenuItem().apply { + addClass("btn", "btn--tertiary", "btn--borderless") graphic = label(messages["import"]) { graphic = FontIcon(MaterialDesign.MDI_DOWNLOAD) tooltip(text) @@ -99,7 +103,7 @@ fun EventTarget.narrationMenuButton( op: Button.() -> Unit = {} ): Button { return Button().attachTo(this).apply { - addClass("btn", "btn--icon") + addClass("btn", "btn--icon", "btn--tertiary") graphic = FontIcon(MaterialDesign.MDI_DOTS_VERTICAL) tooltip(messages["options"]) diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/menu/VerseMenu.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/menu/VerseMenu.kt index 566dee809a..0b3a45f98f 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/menu/VerseMenu.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/narration/menu/VerseMenu.kt @@ -46,6 +46,8 @@ class VerseMenu : ContextMenu() { addClass("wa-context-menu") val playOpt = MenuItem().apply { + addClass("btn", "btn--tertiary", "btn--borderless") + graphic = label(messages["play"]) { graphic = FontIcon(MaterialDesign.MDI_PLAY) tooltip(text) @@ -58,6 +60,8 @@ class VerseMenu : ContextMenu() { } } val recordAgainOpt = MenuItem().apply { + addClass("btn", "btn--tertiary", "btn--borderless") + graphic = label(messages["recordAgain"]) { graphic = FontIcon(MaterialDesign.MDI_MICROPHONE) tooltip(text) @@ -70,6 +74,8 @@ class VerseMenu : ContextMenu() { } } val editVerseOpt = MenuItem().apply { + addClass("btn", "btn--tertiary", "btn--borderless") + graphic = label(messages["openIn"]) { graphic = FontIcon(MaterialDesign.MDI_OPEN_IN_NEW) tooltip(text) @@ -83,6 +89,8 @@ class VerseMenu : ContextMenu() { } val importVerseAudio = MenuItem().apply { + addClass("btn", "btn--tertiary", "btn--borderless") + graphic = label(messages["import"]) { graphic = FontIcon(MaterialDesign.MDI_DOWNLOAD) tooltip(text) diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/HomePage2.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/HomePage2.kt index 5c2fd9941a..49e25f5c3a 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/HomePage2.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/HomePage2.kt @@ -366,7 +366,8 @@ class HomePage2 : View() { private fun setUpLoadingModal() { find().apply { orientationProperty.set(settingsViewModel.orientationProperty.value) - themeProperty.set(settingsViewModel.appColorMode.value) + themeProperty.bind(settingsViewModel.appColorMode) + viewModel.isLoadingProperty.onChangeWithDisposer { if (it == true) { messageProperty.set(messages["loadingProjectWait"]) @@ -444,7 +445,10 @@ class HomePage2 : View() { dialog.percentageProperty.set(percent) } if (progressStatus.titleKey != null && progressStatus.titleMessage != null) { - val message = MessageFormat.format(messages[progressStatus.titleKey!!], messages[progressStatus.titleMessage!!]) + val message = MessageFormat.format( + messages[progressStatus.titleKey!!], + messages[progressStatus.titleMessage!!] + ) dialog.progressMessageProperty.set(message) } else if (progressStatus.titleKey != null) { dialog.progressMessageProperty.set(messages[progressStatus.titleKey!!]) diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/dialogs/ExportProjectDialog.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/dialogs/ExportProjectDialog.kt index 276b338f45..3de4f95e14 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/dialogs/ExportProjectDialog.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/dialogs/ExportProjectDialog.kt @@ -66,7 +66,7 @@ class ExportProjectDialog : OtterDialog() { } region { hgrow = Priority.ALWAYS } button { - addClass("btn", "btn--icon", "btn--borderless") + addClass("btn", "btn--icon", "btn--tertiary", "btn--borderless") graphic = FontIcon(MaterialDesign.MDI_CLOSE_CIRCLE) tooltip(messages["close"]) onActionProperty().bind(onCloseActionProperty) diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/home/BookSection.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/home/BookSection.kt index 711a894a0d..3e3a664062 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/home/BookSection.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/home/BookSection.kt @@ -64,7 +64,7 @@ class BookSection( hbox { addClass("homepage__main-region__header-section") button { - addClass("btn", "btn--icon", "btn--borderless", "option-button") + addClass("btn", "btn--icon", "btn--tertiary", "section-option-button") tooltip(messages["options"]) graphic = FontIcon(MaterialDesign.MDI_DOTS_VERTICAL) diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/home/EmptyProjectSection.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/home/EmptyProjectSection.kt index 3705a34999..fae7ede609 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/home/EmptyProjectSection.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/home/EmptyProjectSection.kt @@ -32,10 +32,11 @@ class EmptyProjectSection : VBox() { hbox { addClass("homepage__main-region__header-section") button { - addClass("btn", "btn--icon", "btn--borderless", "option-button") + addClass("btn", "btn--icon", "btn--tertiary", "section-option-button") graphic = FontIcon(MaterialDesign.MDI_DOTS_VERTICAL) } label(FX.messages["home"]) { addClass("h4") } + } vbox { diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/ChapterReview.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/ChapterReview.kt index 3669b11023..20684df987 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/ChapterReview.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/ChapterReview.kt @@ -148,14 +148,14 @@ class ChapterReview : View() { addClass("chunking-bottom__media-btn-group") button { - addClass("btn", "btn--icon") + addClass("btn", "btn--icon", "btn--tertiary") graphic = FontIcon(MaterialDesign.MDI_SKIP_PREVIOUS) tooltip(messages["previousChunk"]) action { viewModel.seekPrevious() } } button { - addClass("btn", "btn--icon") + addClass("btn", "btn--icon", "btn--tertiary") val playIcon = FontIcon(MaterialDesign.MDI_PLAY) val pauseIcon = FontIcon(MaterialDesign.MDI_PAUSE) tooltipProperty().bind( @@ -174,7 +174,7 @@ class ChapterReview : View() { action { viewModel.mediaToggle() } } button { - addClass("btn", "btn--icon") + addClass("btn", "btn--icon", "btn--tertiary") graphic = FontIcon(MaterialDesign.MDI_SKIP_NEXT) tooltip(messages["nextChunk"]) diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/Chunking.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/Chunking.kt index 8ec492d017..48c9ac4547 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/Chunking.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/Chunking.kt @@ -52,6 +52,7 @@ import tornadofx.* class Chunking : View() { private val logger = LoggerFactory.getLogger(javaClass) + private val disposableListeners = mutableListOf() val viewModel: ChunkingViewModel by inject() val settingsViewModel: SettingsViewModel by inject() @@ -114,13 +115,13 @@ class Chunking : View() { addClass("chunking-bottom__media-btn-group") button { - addClass("btn", "btn--icon") + addClass("btn", "btn--icon", "btn--tertiary") graphic = FontIcon(MaterialDesign.MDI_SKIP_PREVIOUS) tooltip(messages["previousChunk"]) action { viewModel.seekPrevious() } } button { - addClass("btn", "btn--icon") + addClass("btn", "btn--icon", "btn--tertiary") val playIcon = FontIcon(MaterialDesign.MDI_PLAY) val pauseIcon = FontIcon(MaterialDesign.MDI_PAUSE) tooltipProperty().bind( @@ -139,7 +140,7 @@ class Chunking : View() { action { viewModel.mediaToggle() } } button { - addClass("btn", "btn--icon") + addClass("btn", "btn--icon", "btn--tertiary") graphic = FontIcon(MaterialDesign.MDI_SKIP_NEXT) tooltip(messages["nextChunk"]) action { viewModel.seekNext() } @@ -167,8 +168,9 @@ class Chunking : View() { timer?.stop() unsubscribeEvents() viewModel.undock() + disposableListeners.forEach { it.dispose() } } - + private fun subscribeOnThemeChange() { settingsViewModel.appColorMode .toObservable() diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/ChunkingStepsDrawer.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/ChunkingStepsDrawer.kt index fb115c9526..781ede06b4 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/ChunkingStepsDrawer.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/ChunkingStepsDrawer.kt @@ -77,24 +77,49 @@ class ChunkingStepsDrawer( vgrow = Priority.ALWAYS isFitToWidth = true vbox { - chunkingStep(ChunkingStep.CONSUME_AND_VERBALIZE,selectedStepProperty,reachableStepProperty, isCollapsedProperty) + chunkingStep( + ChunkingStep.CONSUME_AND_VERBALIZE, + selectedStepProperty, + reachableStepProperty, + isCollapsedProperty + ) chunkingStep(ChunkingStep.CHUNKING, selectedStepProperty, reachableStepProperty, isCollapsedProperty) { visibleWhen(noSourceAudioProperty.not()) managedWhen(visibleProperty()) } - chunkingStep(ChunkingStep.BLIND_DRAFT, selectedStepProperty, reachableStepProperty, isCollapsedProperty) { + chunkingStep( + ChunkingStep.BLIND_DRAFT, + selectedStepProperty, + reachableStepProperty, + isCollapsedProperty + ) { chunkListProperty.bind(chunksProperty) } chunkingStep(ChunkingStep.PEER_EDIT, selectedStepProperty, reachableStepProperty, isCollapsedProperty) { chunkListProperty.bind(chunksProperty) } - chunkingStep(ChunkingStep.KEYWORD_CHECK, selectedStepProperty, reachableStepProperty, isCollapsedProperty) { + chunkingStep( + ChunkingStep.KEYWORD_CHECK, + selectedStepProperty, + reachableStepProperty, + isCollapsedProperty + ) { chunkListProperty.bind(chunksProperty) } - chunkingStep(ChunkingStep.VERSE_CHECK, selectedStepProperty, reachableStepProperty, isCollapsedProperty) { + chunkingStep( + ChunkingStep.VERSE_CHECK, + selectedStepProperty, + reachableStepProperty, + isCollapsedProperty + ) { chunkListProperty.bind(chunksProperty) } - chunkingStep(ChunkingStep.FINAL_REVIEW, selectedStepProperty, reachableStepProperty, isCollapsedProperty) + chunkingStep( + ChunkingStep.FINAL_REVIEW, + selectedStepProperty, + reachableStepProperty, + isCollapsedProperty + ) } runLater { customizeScrollbarSkin() } diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/Consume.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/Consume.kt index 8609455d52..320bfe3d61 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/Consume.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/Consume.kt @@ -57,6 +57,7 @@ class Consume : View() { private var timer: AnimationTimer? = null private val eventSubscriptions = mutableListOf() + private val disposableListeners = mutableListOf() override fun onDock() { super.onDock() @@ -77,8 +78,9 @@ class Consume : View() { timer?.stop() viewModel.onUndockConsume() unsubscribeEvents() + disposableListeners.forEach { it.dispose() } } - + private fun subscribeOnThemeChange() { settingsViewModel.appColorMode .toObservable() diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/PeerEdit.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/PeerEdit.kt index c77311ccaa..f54f0f1a91 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/PeerEdit.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/PeerEdit.kt @@ -121,7 +121,7 @@ open class PeerEdit : View() { } } button(messages["confirm"]) { - addClass("btn", "btn--secondary") + addClass("btn", "btn--secondary", "consume__btn--secondary") graphic = FontIcon(MaterialDesign.MDI_CHECK_CIRCLE) tooltip(text) @@ -134,7 +134,7 @@ open class PeerEdit : View() { } region { hgrow = Priority.ALWAYS } button(messages["record"]) { - addClass("btn", "btn--secondary") + addClass("btn", "btn--secondary", "consume__btn--secondary") graphic = FontIcon(MaterialDesign.MDI_MICROPHONE) tooltip(text) diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/RecordingSection.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/RecordingSection.kt index 6c00913eae..ca0bc7af6c 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/RecordingSection.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/RecordingSection.kt @@ -67,7 +67,7 @@ class RecordingSection : BorderPane() { } } button(messages["save"]) { - addClass("btn", "btn--secondary") + addClass("btn", "btn--secondary", "consume__btn--secondary") graphic = FontIcon(MaterialDesign.MDI_CHECK_CIRCLE) visibleWhen { isRecordingProperty.not() } @@ -79,7 +79,7 @@ class RecordingSection : BorderPane() { } region { hgrow = Priority.ALWAYS } button(messages["cancel"]) { - addClass("btn", "btn--secondary") + addClass("btn", "btn--tertiary") graphic = FontIcon(MaterialDesign.MDI_CLOSE_CIRCLE) visibleWhen { isRecordingProperty.not() } diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/TranslationHeader.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/TranslationHeader.kt index ffbb12027e..ca920c65d9 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/TranslationHeader.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/screens/translation/TranslationHeader.kt @@ -62,7 +62,7 @@ class TranslationHeader : HBox() { addClass("top-navigation-pane__control-section") button { - addClass("btn", "btn--secondary") + addClass("btn", "btn--tertiary") tooltip = tooltip(messages["undoAction"]) graphic = FontIcon(MaterialDesign.MDI_UNDO) enableWhen(canUndoProperty) @@ -72,7 +72,7 @@ class TranslationHeader : HBox() { } } button { - addClass("btn", "btn--secondary") + addClass("btn", "btn--tertiary") tooltip = tooltip(messages["redoAction"]) graphic = FontIcon(MaterialDesign.MDI_REDO) enableWhen(canRedoProperty) @@ -82,7 +82,7 @@ class TranslationHeader : HBox() { } } button { - addClass("btn", "btn--secondary") + addClass("btn", "btn--tertiary") tooltip = tooltip(messages["openIn"]) graphic = FontIcon(MaterialDesign.MDI_OPEN_IN_NEW) diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/ChapterReviewViewModel.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/ChapterReviewViewModel.kt index 1dcb4115dc..bc531751ed 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/ChapterReviewViewModel.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/ChapterReviewViewModel.kt @@ -39,6 +39,7 @@ import javafx.scene.paint.Color import org.slf4j.LoggerFactory import org.wycliffeassociates.otter.common.audio.AudioFileFormat import org.wycliffeassociates.otter.common.audio.wav.IWaveFileCreator +import org.wycliffeassociates.otter.common.data.ColorTheme import org.wycliffeassociates.otter.common.data.audio.AudioMarker import org.wycliffeassociates.otter.common.data.audio.ChunkMarker import org.wycliffeassociates.otter.common.data.audio.VerseMarker @@ -199,10 +200,10 @@ class ChapterReviewViewModel : ViewModel(), IMarkerViewModel { fun onThemeChange() { // Avoids null error in createWaveformImages cause by player not yet being initialized. - val hasPlayer = waveformAudioPlayerProperty.value != null - val hasAudio = waveformAudioPlayerProperty.value.getDurationInFrames() > 0 + val hasAudioAndPlayer = + waveformAudioPlayerProperty.value != null && waveformAudioPlayerProperty.value.getDurationInFrames() > 0 - if (!hasPlayer || !hasAudio) { + if (!hasAudioAndPlayer) { return } diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/ChunkingViewModel.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/ChunkingViewModel.kt index 59381db07a..4411a1e57a 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/ChunkingViewModel.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/ChunkingViewModel.kt @@ -31,6 +31,7 @@ import javafx.beans.property.SimpleIntegerProperty import javafx.beans.property.SimpleObjectProperty import javafx.scene.image.Image import javafx.scene.paint.Color +import org.wycliffeassociates.otter.common.data.ColorTheme import org.wycliffeassociates.otter.common.data.audio.ChunkMarker import org.wycliffeassociates.otter.common.data.getWaveformColors import javax.inject.Inject @@ -132,7 +133,7 @@ class ChunkingViewModel : ViewModel(), IMarkerViewModel { translationViewModel.selectedStepProperty.value?.let { // handle when navigating to the next step val hasUnsavedChanges = markerCountProperty.value != 0 && markerModel?.canUndo() == true - if (hasUnsavedChanges && it.ordinal > ChunkingStep.CHUNKING.ordinal) { + if ((hasUnsavedChanges && it.ordinal > ChunkingStep.CHUNKING.ordinal)) { saveChanges() } translationViewModel.updateStep() @@ -157,10 +158,10 @@ class ChunkingViewModel : ViewModel(), IMarkerViewModel { fun onThemeChange() { // Avoids null error in createWaveformImages cause by player not yet being initialized. - val hasPlayer = waveformAudioPlayerProperty.value != null - val hasAudio = waveformAudioPlayerProperty.value.getDurationInFrames() > 0 + val hasAudioAndPlayer = + waveformAudioPlayerProperty.value != null && waveformAudioPlayerProperty.value.getDurationInFrames() > 0 - if (!hasPlayer || !hasAudio) { + if (!hasAudioAndPlayer) { return } diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/ConsumeViewModel.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/ConsumeViewModel.kt index 0a5483b15c..93516e4c05 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/ConsumeViewModel.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/ConsumeViewModel.kt @@ -30,6 +30,7 @@ import javafx.beans.property.SimpleIntegerProperty import javafx.beans.property.SimpleObjectProperty import javafx.scene.image.Image import javafx.scene.paint.Color +import org.wycliffeassociates.otter.common.data.ColorTheme import org.wycliffeassociates.otter.common.data.audio.VerseMarker import org.wycliffeassociates.otter.common.data.getWaveformColors import org.wycliffeassociates.otter.common.device.IAudioPlayer @@ -126,10 +127,10 @@ class ConsumeViewModel : ViewModel(), IMarkerViewModel { fun onThemeChange() { // Avoids null error in createWaveformImages cause by player not yet being initialized. - val hasPlayer = waveformAudioPlayerProperty.value != null - val hasAudio = waveformAudioPlayerProperty.value.getDurationInFrames() > 0 + val hasAudioAndPlayer = + waveformAudioPlayerProperty.value != null && waveformAudioPlayerProperty.value.getDurationInFrames() > 0 - if (!hasPlayer || !hasAudio) { + if (!hasAudioAndPlayer) { return } diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/PeerEditViewModel.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/PeerEditViewModel.kt index f2eccbfae7..9e5d2bff07 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/PeerEditViewModel.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/PeerEditViewModel.kt @@ -19,6 +19,7 @@ package org.wycliffeassociates.otter.jvm.workbookapp.ui.viewmodel import com.github.thomasnield.rxkotlinfx.observeOnFx +import com.github.thomasnield.rxkotlinfx.toObservable import com.sun.glass.ui.Screen import io.reactivex.Observable import io.reactivex.disposables.CompositeDisposable @@ -49,6 +50,7 @@ import org.wycliffeassociates.otter.jvm.utils.onChangeAndDoNowWithDisposer import org.wycliffeassociates.otter.jvm.workbookapp.di.IDependencyGraphProvider import org.wycliffeassociates.otter.jvm.controls.model.ChunkingStep import org.wycliffeassociates.otter.jvm.controls.waveform.WAVEFORM_MAX_HEIGHT +import org.wycliffeassociates.otter.jvm.utils.onChangeWithDisposer import tornadofx.* import javax.inject.Inject @@ -253,10 +255,10 @@ class PeerEditViewModel : ViewModel(), IWaveformViewModel { fun onThemeChange() { // Avoids null error in createWaveformImages cause by player not yet being initialized. - val hasPlayer = waveformAudioPlayerProperty.value != null - val hasAudio = waveformAudioPlayerProperty.value.getDurationInFrames() > 0 + val hasAudioAndPlayer = + waveformAudioPlayerProperty.value != null && waveformAudioPlayerProperty.value.getDurationInFrames() > 0 - if (!hasPlayer || !hasAudio) { + if (!hasAudioAndPlayer) { return } diff --git a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/RecorderViewModel.kt b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/RecorderViewModel.kt index ac60910296..9ff5a5d3c7 100644 --- a/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/RecorderViewModel.kt +++ b/jvm/workbookapp/src/main/kotlin/org/wycliffeassociates/otter/jvm/workbookapp/ui/viewmodel/RecorderViewModel.kt @@ -18,10 +18,12 @@ */ package org.wycliffeassociates.otter.jvm.workbookapp.ui.viewmodel +import com.github.thomasnield.rxkotlinfx.toObservable import javafx.animation.AnimationTimer import javafx.beans.property.SimpleBooleanProperty import javafx.beans.property.SimpleObjectProperty import javafx.beans.property.SimpleStringProperty +import org.wycliffeassociates.otter.common.data.ColorTheme import org.wycliffeassociates.otter.common.device.IAudioRecorder import org.wycliffeassociates.otter.common.domain.audio.OratureAudioFile import org.wycliffeassociates.otter.common.recorder.ActiveRecordingRenderer @@ -41,6 +43,8 @@ import javax.inject.Inject class RecorderViewModel : ViewModel() { + val settingsViewModel: SettingsViewModel by inject() + enum class Result { SUCCESS, CANCELLED @@ -51,6 +55,7 @@ class RecorderViewModel : ViewModel() { val targetFileProperty = SimpleObjectProperty(null) var hasWrittenProperty = SimpleBooleanProperty(false) + @Volatile var recordingProperty = SimpleBooleanProperty(false) var isRecording by recordingProperty @@ -98,8 +103,9 @@ class RecorderViewModel : ViewModel() { renderedWidth, secondsOnScreen = 10 ) + volumeCanvas.addDrawable(VolumeBar(recorder.getAudioStream())) - val waveformLayer = WaveformLayer(renderer) + val waveformLayer = WaveformLayer(renderer, settingsViewModel.appColorMode.toObservable()) waveformCanvas.addDrawable(BaseWaveLine()) waveformCanvas.addDrawable(waveformLayer) @@ -174,7 +180,7 @@ class RecorderViewModel : ViewModel() { } private fun createTempRecordingTake(): File { - return kotlin.io.path.createTempFile("otter-take",".wav").toFile() + return kotlin.io.path.createTempFile("otter-take", ".wav").toFile() .also { it.deleteOnExit() targetFileProperty.value?.copyTo(it, true) diff --git a/jvm/workbookapp/src/main/resources/css/app-bar.css b/jvm/workbookapp/src/main/resources/css/app-bar.css index 5141199f8d..e9b91edc5d 100644 --- a/jvm/workbookapp/src/main/resources/css/app-bar.css +++ b/jvm/workbookapp/src/main/resources/css/app-bar.css @@ -17,7 +17,7 @@ * along with Orature. If not, see . */ .app-bar { - -fx-background-color: #013C8E; + -fx-background-color: -wa-primary; -fx-alignment: top-center; } @@ -25,11 +25,6 @@ -fx-focus-traversable: true; } -.app-bar__logo .ikonli-font-icon { - -fx-icon-color: -wa-white; - -fx-icon-size: 40px; -} - .app-bar__app-content { -fx-focus-traversable: false; } diff --git a/jvm/workbookapp/src/main/resources/css/app-drawer.css b/jvm/workbookapp/src/main/resources/css/app-drawer.css index 00b6eba9ad..e5c5456b50 100644 --- a/jvm/workbookapp/src/main/resources/css/app-drawer.css +++ b/jvm/workbookapp/src/main/resources/css/app-drawer.css @@ -222,7 +222,7 @@ } .app-drawer-progress-text { - -fx-text-fill: -wa-primary-btn-text-fill; + -fx-text-fill: -wa-button-primary-default-on-surface; -fx-font-size: 20px; -fx-alignment: center; } diff --git a/jvm/workbookapp/src/main/resources/css/chunk-item.css b/jvm/workbookapp/src/main/resources/css/chunk-item.css index ac6564d0f0..fb245e47cb 100644 --- a/jvm/workbookapp/src/main/resources/css/chunk-item.css +++ b/jvm/workbookapp/src/main/resources/css/chunk-item.css @@ -24,13 +24,22 @@ -fx-text-fill: -wa-primary; } +.chunk-item:hover { + -fx-background-color: -wa-background; + -fx-text-fill: -wa-button-tertiary-hover-on-surface; +} + +.chunk-item:hover .ikonli-font-icon { + -fx-icon-color: -wa-button-tertiary-hover-on-surface; +} + .chunk-item:completed .chunk-item__icon { -fx-icon-color: -wa-primary; } .chunk-item:selected { -fx-text-fill: -wa-inverse-text; - -fx-background-color: #001533; + -fx-background-color: -wa-primary; } .chunk-item:selected .chunk-item__icon { diff --git a/jvm/workbookapp/src/main/resources/css/consume-page.css b/jvm/workbookapp/src/main/resources/css/consume-page.css index 99d320e924..3118aa56a0 100644 --- a/jvm/workbookapp/src/main/resources/css/consume-page.css +++ b/jvm/workbookapp/src/main/resources/css/consume-page.css @@ -28,8 +28,18 @@ -fx-graphic-text-gap: 8; } +.consume__btn--secondary { + -fx-text-fill: -wa-primary; + -fx-border-color: -wa-primary; +} + +.consume__btn--secondary .ikonli-font-icon { + -fx-font-size: 24px; + -fx-icon-color: -wa-primary; +} + .consume__btn:active { - -fx-background-color: #001533; + -fx-background-color: -wa-status-active; } .vm-waveform-frame { diff --git a/jvm/workbookapp/src/main/resources/css/home-page.css b/jvm/workbookapp/src/main/resources/css/home-page.css index 8f62648c1f..394b2f167a 100644 --- a/jvm/workbookapp/src/main/resources/css/home-page.css +++ b/jvm/workbookapp/src/main/resources/css/home-page.css @@ -74,6 +74,28 @@ -fx-background-color: transparent; } +.option-button:pressed { + -fx-background-color: -wa-button-pressed-surface; + -fx-text-fill: -wa-button-primary-default-on-surface; +} + +.option-button:pressed .ikonli-font-icon { + -fx-icon-color: -wa-button-primary-default-on-surface; +} + +.section-option-button { + -fx-background-color: -wa-surface-primary; +} + +.section-button:hover { + -fx-background-color: -wa-surface-secondary; +} + +.section-button:hover .ikonli-font-icon { + -fx-icon-size: 20px; + -fx-icon-color: -wa-regular-text; +} + .icon-xl { -fx-font-size: 6em; -fx-icon-color: -wa-primary; diff --git a/jvm/workbookapp/src/main/resources/css/recording-screen.css b/jvm/workbookapp/src/main/resources/css/recording-screen.css index 760e28bc11..46a8f85732 100644 --- a/jvm/workbookapp/src/main/resources/css/recording-screen.css +++ b/jvm/workbookapp/src/main/resources/css/recording-screen.css @@ -17,7 +17,7 @@ * along with Orature. If not, see . */ .waveform { - -fx-background-color: -wa-waveform-background; + -fx-background-color: -wa-narration-waveform-background; } .recording__bottom-section { diff --git a/jvm/workbookapp/src/main/resources/css/translation-page.css b/jvm/workbookapp/src/main/resources/css/translation-page.css index 11c45590e5..2b02e7092d 100644 --- a/jvm/workbookapp/src/main/resources/css/translation-page.css +++ b/jvm/workbookapp/src/main/resources/css/translation-page.css @@ -22,7 +22,7 @@ -fx-padding: 16px; -fx-background-color: -wa-foreground; -fx-border-width: 0 0 1 0; - -fx-border-color: -wa-border-light; + -fx-border-color: -wa-surface-border; } .top-navigation-pane__title-section { @@ -42,7 +42,7 @@ -fx-pref-width: 360; -fx-background-color: -wa-foreground; -fx-border-width: 0 1 0 0; - -fx-border-color: -wa-border-light; + -fx-border-color: -wa-surface-border; } .chunking-step-drawer:collapsed { @@ -54,7 +54,7 @@ } .chunking-step:disabled { - -fx-background-color: #E5E8EB; + -fx-background-color: -wa-surface-secondary; } .chunking-step:focus-visible .chunking-step__header-section { @@ -90,11 +90,11 @@ -fx-alignment: center; -fx-padding: 16; -fx-border-width: 1; - -fx-border-color: transparent transparent -wa-border-light transparent; + -fx-border-color: transparent transparent -wa-btn-icon-border-color transparent; } .chunking-step__header-section:hover { - -fx-background-color: -wa-secondary-btn-background-hover; + -fx-background-color: -wa-primary-05; } .chunking-step__header-section .chunking-step__title { @@ -109,7 +109,7 @@ .chunking-step__content-section { -fx-alignment: center; -fx-border-width: 1; - -fx-border-color: transparent transparent -wa-border-light transparent; + -fx-border-color: -wa-surface-border; -fx-padding: 16; } @@ -123,7 +123,7 @@ -fx-min-width: 360; -fx-background-color: -wa-foreground; -fx-border-width: 0 0 0 1; - -fx-border-color: -wa-border-light; + -fx-border-color: -wa-surface-border; } .source-text-drawer:collapsed { @@ -131,6 +131,10 @@ -fx-min-width: 90; } +.source-text-drawer__btn { + -fx-border-width: 1px; +} + .drawer-graphic-container { -fx-alignment: center; -fx-spacing: 5; diff --git a/jvm/workbookapp/src/main/resources/css/verse-markers-layer.css b/jvm/workbookapp/src/main/resources/css/verse-markers-layer.css index 8c7ceac843..e69c2fa2d5 100644 --- a/jvm/workbookapp/src/main/resources/css/verse-markers-layer.css +++ b/jvm/workbookapp/src/main/resources/css/verse-markers-layer.css @@ -21,7 +21,7 @@ } .verse-marker__drag-area:movable { - -fx-background-color: -wa-primary-20; + -fx-background-color: -wa-primary-light-80; } .verse-marker__line { @@ -36,7 +36,7 @@ } .verse-marker__icon { - -fx-background-color: #E5E8EB; + -fx-background-color: -wa-narration-waveform-background; -fx-translate-x: 0; -fx-translate-y: -20; }