diff --git a/res/skins/LateNightQML/Controls/Fader.qml b/res/skins/LateNightQML/Controls/Fader.qml new file mode 100644 index 000000000000..b67104d0a902 --- /dev/null +++ b/res/skins/LateNightQML/Controls/Fader.qml @@ -0,0 +1,38 @@ +import QtQuick +import "../../../qml" as Skin +import "../LateNightTheme" + +Skin.ControlFader { + id: root + + property int backgroundMargin: 0 + property alias backgroundSource: backgroundImage.source + property alias handleSource: handleImage.source + property real handleWidth: 0 + property color valueLineColor: LateNightTheme.mixerSliderBarColor + + bar.color: valueLineColor + bar.enabled: true + bar.margin: 8 + bar.width: 2 + implicitHeight: backgroundImage.implicitHeight + (backgroundMargin * 2) + implicitWidth: backgroundImage.implicitWidth + (backgroundMargin * 2) + showDefaultHandle: false + + background: Image { + id: backgroundImage + + anchors.fill: parent + anchors.margins: root.backgroundMargin + fillMode: Image.PreserveAspectFit + } + handle: Image { + id: handleImage + + fillMode: Image.PreserveAspectFit + height: implicitHeight + width: root.handleWidth > 0 ? root.handleWidth : implicitWidth + x: root.horizontal ? root.visualPosition * (root.width - width) : (root.width - width) / 2 + y: root.vertical ? root.visualPosition * (root.height - height) : (root.height - height) / 2 + } +} diff --git a/res/skins/LateNightQML/Controls/ImageVuMeter.qml b/res/skins/LateNightQML/Controls/ImageVuMeter.qml new file mode 100644 index 000000000000..3d892afd237b --- /dev/null +++ b/res/skins/LateNightQML/Controls/ImageVuMeter.qml @@ -0,0 +1,88 @@ +import Mixxx 1.0 as Mixxx +import QtQuick +import "../LateNightTheme" + +Item { + id: root + + property int backgroundVariant: 0 + property real clipThreshold: 0.98 + readonly property bool clipping: peakIndicatorControl.value > 0 || levelControl.value >= clipThreshold + property bool drawGroove: true + required property string group + readonly property real level: Math.max(0, Math.min(1, levelControl.value)) + property string levelKey: "vu_meter" + property string peakKey: "peak_indicator" + readonly property string variantName: backgroundVariant === 0 ? "dark" : "light" + + clip: true + implicitHeight: 96 + implicitWidth: 8 + + Rectangle { + anchors.horizontalCenter: parent.horizontalCenter + color: "#040404" + height: parent.height + visible: root.drawGroove + width: 8 + } + Image { + anchors.horizontalCenter: parent.horizontalCenter + fillMode: Image.PreserveAspectFit + height: 11 + smooth: false + source: LateNightTheme.mixerVuClipBackground(root.variantName) + width: 6 + y: 1 + } + Image { + anchors.bottom: parent.bottom + anchors.bottomMargin: 1 + anchors.horizontalCenter: parent.horizontalCenter + fillMode: Image.PreserveAspectFit + height: 81 + smooth: false + source: LateNightTheme.mixerVuLevelBackground(root.variantName) + width: 6 + } + Image { + anchors.horizontalCenter: parent.horizontalCenter + fillMode: Image.PreserveAspectFit + height: 11 + opacity: root.clipping ? 1 : 0 + smooth: false + source: LateNightTheme.lateNightAsset("style", "vu_deck_clipping_active.png") + width: 6 + y: 1 + } + Item { + anchors.bottom: parent.bottom + anchors.bottomMargin: 1 + anchors.horizontalCenter: parent.horizontalCenter + clip: true + height: 81 * root.level + width: 6 + + Image { + anchors.bottom: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter + fillMode: Image.PreserveAspectFit + height: 81 + smooth: false + source: LateNightTheme.lateNightAsset("style", "vu_deck_level_active.png") + width: 6 + } + } + Mixxx.ControlProxy { + id: levelControl + + group: root.group + key: root.levelKey + } + Mixxx.ControlProxy { + id: peakIndicatorControl + + group: root.group + key: root.peakKey + } +} diff --git a/res/skins/LateNightQML/Controls/Knob.qml b/res/skins/LateNightQML/Controls/Knob.qml new file mode 100644 index 000000000000..34a188a8f9b9 --- /dev/null +++ b/res/skins/LateNightQML/Controls/Knob.qml @@ -0,0 +1,96 @@ +import QtQuick +import "../../../qml" as Skin +import "../LateNightTheme" + +Skin.ControlKnob { + id: root + + readonly property int arcRenderScale: 8 + property url backgroundSource: LateNightTheme.assetRegularKnobBackground + property bool displayArc: false + property color displayArcColor: "transparent" + property real displayArcOffsetY: 1.998 + property real displayArcRadius: 12.5 + property int displayArcStart: 1 // Knob.ArcStart.Center + property real displayArcWidth: 2 + property string indicatorColor: "orange" + property string indicatorKind: "regular" + + angle: 135 + arc: false + arcStart: displayArcStart + color: displayArcColor + implicitHeight: backgroundImage.implicitHeight + implicitWidth: backgroundImage.implicitWidth + knobCenterOffsetY: displayArcOffsetY + showDefaultBackground: false + showDefaultForeground: false + + background: Image { + id: backgroundImage + + anchors.fill: parent + fillMode: Image.PreserveAspectFit + source: root.backgroundSource + } + foreground: Item { + anchors.fill: parent + + Image { + anchors.fill: parent + fillMode: Image.PreserveAspectFit + source: LateNightTheme.mixerKnobIndicator(root.indicatorKind, root.indicatorColor) + } + } + + Canvas { + id: arcCanvas + + readonly property color renderedColor: root.displayArcColor + readonly property real renderedOffsetY: root.displayArcOffsetY + readonly property real renderedRadius: root.displayArcRadius + readonly property int renderedStart: root.displayArcStart + readonly property real renderedValue: root.value + readonly property real renderedWidth: root.displayArcWidth + + antialiasing: true + height: root.height * root.arcRenderScale + layer.enabled: true + layer.mipmap: true + renderStrategy: Canvas.Immediate + scale: 1 / root.arcRenderScale + transformOrigin: Item.TopLeft + visible: root.displayArc + width: root.width * root.arcRenderScale + z: 1 + + Component.onCompleted: requestPaint() + onPaint: { + const ctx = getContext("2d"); + ctx.clearRect(0, 0, width, height); + if (!root.displayArc) { + return; + } + + const renderScale = root.arcRenderScale; + const startAngle = root.angleFrom(root.arcStartValue - root.valueCenter) - 90; + const sweepAngle = root.angleFrom(root.value - root.arcStartValue); + const startRadians = startAngle * Math.PI / 180; + const endRadians = (startAngle + sweepAngle) * Math.PI / 180; + + ctx.beginPath(); + ctx.strokeStyle = root.displayArcColor; + ctx.lineWidth = root.displayArcWidth * renderScale; + ctx.lineCap = "round"; + ctx.arc((root.width / 2) * renderScale, (root.height / 2 + root.displayArcOffsetY) * renderScale, root.displayArcRadius * renderScale, startRadians, endRadians, sweepAngle < 0); + ctx.stroke(); + } + onRenderedColorChanged: requestPaint() + onRenderedOffsetYChanged: requestPaint() + onRenderedRadiusChanged: requestPaint() + onRenderedStartChanged: requestPaint() + onRenderedValueChanged: requestPaint() + onRenderedWidthChanged: requestPaint() + onVisibleChanged: requestPaint() + } +} diff --git a/res/skins/LateNightQML/LateNightTheme/LateNightTheme.qml b/res/skins/LateNightQML/LateNightTheme/LateNightTheme.qml index c97e2a44f073..1f45f3430804 100644 --- a/res/skins/LateNightQML/LateNightTheme/LateNightTheme.qml +++ b/res/skins/LateNightQML/LateNightTheme/LateNightTheme.qml @@ -3,112 +3,33 @@ import QtQuick import "." QtObject { - readonly property bool isClassic: ColorScheme.name === "classic" - readonly property bool isPaleMoon: ColorScheme.name === "palemoon" - - readonly property color backgroundColor: "#1e1e1e" - readonly property color buttonActiveColor: white - readonly property color buttonNormalColor: "#696969" - readonly property color buttonPressedColor: white - readonly property color darkGray: "#0f0f0f" readonly property color accentColor: ColorScheme.accentColor readonly property color activePlayCueColor: isClassic ? "#db0000" : "#b24c12" - readonly property color deckTimeTextColor: isClassic ? "#f0bb2b" : "#777777" - readonly property color deckButtonInactiveColor: isClassic ? "#262626" : "#121213" - readonly property color deckDimButtonInactiveColor: isClassic ? "#262626" : "#171719" - readonly property color deckEmbeddedButtonInactiveColor: isClassic ? "#262626" : "#1e1e20" - readonly property color deckBeatSpinBoxTextColor: isClassic ? "#888888" : "#a7998b" - readonly property color deckReadonlyTextColor: isClassic ? "#888888" : "#777777" - readonly property color deckTopRowBackgroundColor: "#181818" - readonly property color deckPanelColor: "#1e1e20" - readonly property color deckPanelBorderDark: "#0c0c0c" - readonly property color deckPanelBorderLight: "#333333" - readonly property color deckPanelBorderLeft: "#282828" - readonly property color deckPanelBorderRight: deckTopRowBackgroundColor - readonly property color overviewBorderTopColor: "#0d0d0d" - readonly property color overviewBorderLeftColor: "#121212" - readonly property color overviewBorderBottomColor: "#2a2a2a" - readonly property color overviewBorderRightColor: "#252525" - readonly property color libraryPanelSplitterBackground: "#1e1e1e" - readonly property color libraryPanelSplitterHandle: "#5f5f5f" - readonly property color libraryPanelSplitterHandleActive: "#7a7a7a" - readonly property color textColor: white - readonly property color textColorMuted: "#696969" - readonly property color primaryDeckTextColor: isClassic ? "#f0bb2b" : "#c2b3a5" - readonly property color overviewSettingsBackgroundColor: isClassic ? "#151515" : "#19191a" - readonly property color primaryOverviewBackgroundColor: isClassic ? "#0f0f0f" : "#19191a" - readonly property color primaryWaveformSignalColor: isClassic ? "#e7c413" : "#d9b28c" - readonly property color secondaryDeckTextColor: isClassic ? "#0bd9d1" : "#85bdbb" - readonly property color secondaryOverviewBackgroundColor: "#001b23" - readonly property color secondaryWaveformSignalColor: isClassic ? "#09b2ae" : "#7bc6c3" - readonly property color starsColor12: isClassic ? "#f0bb2b" : "#988f86" - readonly property color starsColor34: isClassic ? "#0bd9d1" : "#559b99" - readonly property color toolbarActiveColor: white - readonly property color toolbarBackgroundColor: "#242424" - readonly property color toolbarRootBackgroundColor: "#151517" - readonly property color toolbarBottomBorderColor: "#020202" - readonly property color toolbarButtonActiveBackgroundColor: isClassic ? "#d09300" : "#777777" - readonly property color toolbarButtonInactiveBackgroundColor: isClassic ? "#262626" : "#151517" - readonly property color toolbarButtonActiveTextColor: "#000000" - readonly property color toolbarButtonInactiveTextColor: isClassic ? "#d2d2d1" : "#777777" - readonly property color toolbarClockTextColor: isClassic ? "#f0bb2b" : "#c2b3a5" - readonly property color toolbarMenuHoverColor: isPaleMoon ? "#2c454f" : "#5e4507" - readonly property color toolbarMenuHoverTextColor: "#ffffff" - readonly property color toolbarMenuTextColor: "#c2b3a5" - readonly property color toolbarMenuDisabledTextColor: "#777777" - readonly property color toolbarBroadcastOnColor: isClassic ? "#659f08" : "#438225" - readonly property color toolbarRecordInitColor: "#d09300" - readonly property color toolbarRecordOnColor: isClassic ? "#db0000" : "#a80000" - readonly property color toolbarStatusErrorColor: "#f856e7" - readonly property int toolbarButtonHeight: 26 - readonly property int toolbarButtonWidth: 52 - readonly property url assetToolbarDropdownIcon: lateNightAsset("buttons", "btn__fx_selector_down.svg") - readonly property url assetToolbarMenuIcon: lateNightAsset("buttons", "btn__menu.svg") - readonly property color toolbarMeterBackgroundColor: darkGray - readonly property color toolbarLatencyBorderColor: "#040404" - readonly property color toolbarLatencyOverloadColor: "#ffff00" - readonly property color toolbarLatencyLabelColor: "#444444" - readonly property color toolbarPopupBorderColor: "#585858" - readonly property color toolbarPopupBackgroundColor: "#0f0f0f" - readonly property color toolbarStatusOkColor: "#54c76a" - readonly property color toolbarStatusWarnColor: "#d89124" - readonly property color toolbarRecordingColor: "#db0000" - readonly property color toolbarRecordingTextColor: "#ff7373" - readonly property color syncExplicitLeaderColor: activePlayCueColor - readonly property color syncInactiveBackgroundColor: "#1e1e1e" - readonly property color syncImplicitLeaderColor: isPaleMoon ? "#7d350d" : "#db7700" - readonly property int syncButtonHorizontalPadding: isClassic ? 3 : 0 - readonly property color keyControlsPressedColor: isPaleMoon ? "#7d350d" : "#db0000" - readonly property string keyControlsPressedIconSuffix: isPaleMoon ? "active" : "" - readonly property string playCueActiveIconSuffix: isPaleMoon ? "active" : "" - readonly property color white: "#D9D9D9" - readonly property url assetDeckArrowLeftUpButton: lateNightAsset("buttons", "btn__arrow_left_up.svg") readonly property url assetDeckArrowRightDownButton: lateNightAsset("buttons", "btn__arrow_right_down.svg") - readonly property url assetDeckBeatjumpLeftButton: lateNightAsset("buttons", "btn__beatjump_left.svg") - readonly property url assetDeckBeatjumpRightButton: lateNightAsset("buttons", "btn__beatjump_right.svg") + readonly property url assetDeckBeatCurposButton: lateNightAsset("buttons", "btn__beat_curpos.svg") readonly property url assetDeckBeatSpinBoxBorder: isClassic ? lateNightAsset("buttons", "spinbox_elevated_border.svg") : lateNightSubRegionButton("wide") readonly property url assetDeckBeatSpinBoxDownButton: isClassic ? lateNightAsset("buttons", "spinbox_down.svg") : lateNightAsset("buttons", "btn__spinbox_down.svg") readonly property url assetDeckBeatSpinBoxUpButton: isClassic ? lateNightAsset("buttons", "spinbox_up.svg") : lateNightAsset("buttons", "btn__spinbox_up.svg") - readonly property url optionalDeckControlsBackgroundTile: isClassic ? lateNightAsset("style", "background_tile.png") : "" + readonly property url assetDeckBeatjumpLeftButton: lateNightAsset("buttons", "btn__beatjump_left.svg") + readonly property url assetDeckBeatjumpRightButton: lateNightAsset("buttons", "btn__beatjump_right.svg") readonly property url assetDeckCoverDefault: lateNightAsset("style", "cover_default.svg") - readonly property url assetDeckBeatCurposButton: lateNightAsset("buttons", "btn__beat_curpos.svg") readonly property url assetDeckCueButton: lateNightAsset("buttons", "btn__cue_deck.svg") readonly property url assetDeckEjectButton: lateNightAsset("buttons", "btn__eject.svg") readonly property url assetDeckIntroEndButton: lateNightAsset("buttons", "btn__intro_end.svg") readonly property url assetDeckIntroStartButton: lateNightAsset("buttons", "btn__intro_start.svg") + readonly property url assetDeckKeyButtonBackground: lateNightAsset("buttons", "btn_embedded_library.svg") readonly property url assetDeckKeyDownButton: lateNightAsset("buttons", "btn__key_down.svg") - readonly property url assetDeckKeylockButton: lateNightAsset("buttons", "btn__keylock.svg") readonly property url assetDeckKeyMatchButton: lateNightAsset("buttons", "btn__key_match.svg") readonly property url assetDeckKeyUpButton: lateNightAsset("buttons", "btn__key_up.svg") - readonly property url assetDeckKeyButtonBackground: lateNightAsset("buttons", "btn_embedded_library.svg") + readonly property url assetDeckKeylockButton: lateNightAsset("buttons", "btn__keylock.svg") readonly property url assetDeckLeaderBackground: lateNightAsset("buttons", "btn_embedded_grid.svg") readonly property url assetDeckLeaderButton: lateNightAsset("buttons", "btn__sync_leader.svg") readonly property url assetDeckLeaderExplicitButton: isPaleMoon ? lateNightAsset("buttons", "btn__sync_leader_explicit.svg") : lateNightAsset("buttons", "btn__sync_leader_active.svg") readonly property url assetDeckLeaderImplicitButton: isPaleMoon ? lateNightAsset("buttons", "btn__sync_leader_implicit.svg") : lateNightAsset("buttons", "btn__sync_leader_active.svg") - readonly property url assetDeckLoopButton: lateNightAsset("buttons", "btn__loop.svg") readonly property url assetDeckLoopAnchorEndButton: lateNightAsset("buttons", "btn__loop_anchor_end.svg") readonly property url assetDeckLoopAnchorStartButton: lateNightAsset("buttons", "btn__loop_anchor_start.svg") + readonly property url assetDeckLoopButton: lateNightAsset("buttons", "btn__loop.svg") readonly property url assetDeckLoopInButton: lateNightAsset("buttons", "btn__loop_in.svg") readonly property url assetDeckLoopOutButton: lateNightAsset("buttons", "btn__loop_out.svg") readonly property url assetDeckMinusButton: lateNightAsset("buttons", "btn__minus.svg") @@ -117,8 +38,6 @@ QtObject { readonly property url assetDeckPlayButton: lateNightAsset("buttons", "btn__play_deck.svg") readonly property url assetDeckPlusButton: lateNightAsset("buttons", "btn__plus.svg") readonly property url assetDeckQuantizeButton: lateNightAsset("buttons", "btn__quantize.svg") - readonly property url optionalDeckRateCenterActive: isPaleMoon ? lateNightAsset("buttons", "btn__rate_center_cyan.svg") : "" - readonly property url optionalDeckRateCenterInactive: isPaleMoon ? lateNightAsset("buttons", "btn__rate_center_off.svg") : "" readonly property url assetDeckRateSliderBackground: lateNightAsset("sliders", "slider_pitch_deck.svg") readonly property url assetDeckRateSliderHandle: lateNightAsset("sliders", "knob_pitch_deck.svg") readonly property url assetDeckReloopButton: lateNightAsset("buttons", "btn__reloop.svg") @@ -132,40 +51,176 @@ QtObject { readonly property url assetDeckSpinnyIndicator: lateNightAsset("style", "spinny_indicator.svg") readonly property url assetDeckSpinnyMask12: lateNightAsset("style", "spinny_mask_12.svg") readonly property url assetDeckSpinnyMask34: lateNightAsset("style", "spinny_mask_34.svg") + readonly property url assetDeckSyncActiveButton: isPaleMoon ? lateNightAsset("buttons", "btn__sync_deck_active.svg") : lateNightAsset("buttons", "btn__sync_deck.svg") readonly property url assetDeckSyncBackground: lateNightAsset("buttons", "btn_embedded_library.svg") readonly property url assetDeckSyncButton: lateNightAsset("buttons", "btn__sync_deck.svg") - readonly property url assetDeckSyncActiveButton: isPaleMoon ? lateNightAsset("buttons", "btn__sync_deck_active.svg") : lateNightAsset("buttons", "btn__sync_deck.svg") - readonly property url assetDeckVolumeSliderBackground: lateNightAsset("sliders", "slider_volume_deck.svg") - readonly property url assetDeckVolumeSliderHandle: lateNightAsset("sliders", "knob_volume_deck.svg") readonly property url assetDeckVinylControl0: lateNightAsset("style", "vinyl_control_0.svg") readonly property url assetDeckVinylControl1: lateNightAsset("style", "vinyl_control_1.svg") readonly property url assetDeckVinylControl2: lateNightAsset("style", "vinyl_control_2.svg") readonly property url assetDeckVinylControl3: lateNightAsset("style", "vinyl_control_3.svg") + readonly property url assetDeckVolumeSliderBackground: lateNightAsset("sliders", "slider_volume_deck.svg") + readonly property url assetDeckVolumeSliderHandle: lateNightAsset("sliders", "knob_volume_deck.svg") readonly property url assetFxKnobBackground: lateNightAsset("knobs", "knob_bg_fx.svg") readonly property url assetMainKnobBackground: lateNightAsset("knobs", "knob_bg_main.svg") + readonly property url assetMixerCrossfaderBackground: lateNightAsset("sliders", "slider_crossfader.svg") + readonly property url assetMixerCrossfaderHandle: lateNightAsset("sliders", "knob_crossfader.svg") + readonly property url assetMixerCrossfaderSmallBackground: lateNightAsset("sliders", "slider_crossfader_small.svg") + readonly property url assetMixerEqKillButtonActiveBackground: lateNightAsset("buttons", "btn_embedded_eqkill_active.svg") + readonly property url assetMixerEqKillButtonBackground: lateNightAsset("buttons", "btn_embedded_eqkill.svg") + readonly property url assetMixerEqKillHighIcon: lateNightAsset("buttons", "btn__eq_kill_high.svg") + readonly property url assetMixerEqKillLowIcon: lateNightAsset("buttons", "btn__eq_kill_low.svg") + readonly property url assetMixerEqKillMidIcon: lateNightAsset("buttons", "btn__eq_kill_mid.svg") + readonly property url assetMixerPflActiveIcon: isPaleMoon ? lateNightAsset("buttons", "btn__pfl_active.svg") : lateNightAsset("buttons", "btn__pfl.svg") + readonly property url assetMixerPflBackground: lateNightTopRegionButton("square") + readonly property url assetMixerPflIcon: lateNightAsset("buttons", "btn__pfl.svg") + readonly property url assetMixerQuickEffectIcon: lateNightAsset("buttons", "btn__star.svg") + readonly property url assetMixerSplitActiveIcon: lateNightAsset("buttons", isClassic ? "btn_elevated_headsplit_active.svg" : "btn_embedded_headsplit_active.svg") + readonly property url assetMixerSplitIcon: lateNightAsset("buttons", isClassic ? "btn_elevated_headsplit.svg" : "btn_embedded_headsplit.svg") + readonly property url assetMixerVolumeSliderBackground: lateNightAsset("sliders", "slider_volume_deck.svg") + readonly property url assetMixerVolumeSliderHandle: lateNightAsset("sliders", "knob_volume_deck.svg") readonly property url assetRegularKnobBackground: lateNightAsset("knobs", "knob_bg_regular.svg") readonly property url assetSmallKnobBackground: lateNightAsset("knobs", "knob_bg_small.svg") + readonly property url assetToolbarDropdownIcon: lateNightAsset("buttons", "btn__fx_selector_down.svg") + readonly property url assetToolbarMenuIcon: lateNightAsset("buttons", "btn__menu.svg") + readonly property color backgroundColor: "#1e1e1e" + readonly property color buttonActiveColor: white + readonly property color buttonNormalColor: "#696969" + readonly property color buttonPressedColor: white + readonly property color darkGray: "#0f0f0f" + readonly property color deckBeatSpinBoxTextColor: isClassic ? "#888888" : "#a7998b" + readonly property color deckButtonInactiveColor: isClassic ? "#262626" : "#121213" + readonly property color deckDimButtonInactiveColor: isClassic ? "#262626" : "#171719" + readonly property color deckEmbeddedButtonInactiveColor: isClassic ? "#262626" : "#1e1e20" + readonly property color deckPanelBorderDark: "#0c0c0c" + readonly property color deckPanelBorderLeft: "#282828" + readonly property color deckPanelBorderLight: "#333333" + readonly property color deckPanelBorderRight: deckTopRowBackgroundColor + readonly property color deckPanelColor: "#1e1e20" + readonly property color deckReadonlyTextColor: isClassic ? "#888888" : "#777777" + readonly property color deckTimeTextColor: isClassic ? "#f0bb2b" : "#777777" + readonly property color deckTopRowBackgroundColor: "#181818" + readonly property bool isClassic: ColorScheme.name === "classic" + readonly property bool isPaleMoon: ColorScheme.name === "palemoon" + readonly property color keyControlsPressedColor: isPaleMoon ? "#7d350d" : "#db0000" + readonly property string keyControlsPressedIconSuffix: isPaleMoon ? "active" : "" + readonly property color libraryPanelSplitterBackground: "#1e1e1e" + readonly property color libraryPanelSplitterHandle: "#5f5f5f" + readonly property color libraryPanelSplitterHandleActive: "#7a7a7a" + readonly property color mixerAccentCyan: "#0bd9d1" + readonly property color mixerAccentOrange: isClassic ? "#db7700" : "#b24c12" + readonly property color mixerAccentRed: isClassic ? "#db0000" : "#a80000" + readonly property color mixerArcEqColor: "#858585" + readonly property color mixerArcGainColor: "#b96300" + readonly property color mixerArcGainLowColor: "#8d3b11" + readonly property color mixerArcMainBalanceColor: "#a00000" + readonly property color mixerArcQuickEffectColor: "#518f00" + readonly property real mixerArcRadiusBig: 14.5 + readonly property real mixerArcRadiusCompact: 12.5 + readonly property real mixerArcWidth: 2 + readonly property color mixerControlTextColor: isClassic ? "#d2d2d1" : "#a7998b" + readonly property color mixerDimTextColor: "#696969" + readonly property color mixerEqKillActiveColor: isClassic ? "#db0000" : "#a80000" + readonly property color mixerFxAssignInactiveColor: isClassic ? deckEmbeddedButtonInactiveColor : "#151517" + readonly property color mixerFxAssignInactiveTextColor: isClassic ? mixerDimTextColor : "#555555" + readonly property color mixerMainSeparatorDarkColor: isPaleMoon ? "#0c0c0c" : mixerPanelBorderDark + readonly property color mixerMainSeparatorLightColor: isPaleMoon ? "#222222" : mixerPanelBorderLight + readonly property color mixerSplitActiveColor: isClassic ? "#888888" : "#555555" + readonly property color mixerSplitInactiveColor: isClassic ? deckEmbeddedButtonInactiveColor : "#222222" + readonly property color mixerPanelBorderBottom: isPaleMoon ? "#0c0c0c" : "#0a0a0a" + readonly property color mixerPanelBorderDark: "#080808" + readonly property color mixerPanelBorderLeft: isPaleMoon ? "#282828" : "#333333" + readonly property color mixerPanelBorderLight: "#343434" + readonly property color mixerPanelBorderRight: isPaleMoon ? "#181818" : "#0a0a0a" + readonly property color mixerPanelBorderTop: "#333333" + readonly property color mixerPanelColor: "#1d1d1f" + readonly property color mixerPflActiveFillColor: isClassic ? "#db0000" : "#666666" + readonly property color mixerQuickEffectActiveColor: isClassic ? "#659f08" : "#236b00" + readonly property color mixerQuickEffectSelectorTextColor: "#918273" + readonly property color mixerSliderBarColor: "#257b82" + readonly property color mixerVuClipColor: mixerAccentRed + readonly property color mixerVuLevelColor: mixerAccentRed + readonly property url optionalDeckControlsBackgroundTile: isClassic ? lateNightAsset("style", "background_tile.png") : "" + readonly property url optionalDeckRateCenterActive: isPaleMoon ? lateNightAsset("buttons", "btn__rate_center_cyan.svg") : "" + readonly property url optionalDeckRateCenterInactive: isPaleMoon ? lateNightAsset("buttons", "btn__rate_center_off.svg") : "" + readonly property url optionalMixerEqKillDotActiveGreen: isPaleMoon ? lateNightAsset("buttons", "btn__eq_kill_dot_active_green.svg") : "" + readonly property url optionalMixerEqKillDotActiveRed: isPaleMoon ? lateNightAsset("buttons", "btn__eq_kill_dot_active_red.svg") : "" + readonly property url optionalMixerEqKillDotOff: isPaleMoon ? lateNightAsset("buttons", "btn__eq_kill_dot_off.svg") : "" + readonly property url optionalMixerQuickEffectActiveIcon: isPaleMoon ? lateNightAsset("buttons", "btn__star_active.svg") : "" + readonly property color overviewBorderBottomColor: "#2a2a2a" + readonly property color overviewBorderLeftColor: "#121212" + readonly property color overviewBorderRightColor: "#252525" + readonly property color overviewBorderTopColor: "#0d0d0d" + readonly property color overviewSettingsBackgroundColor: isClassic ? "#151515" : "#19191a" + readonly property string playCueActiveIconSuffix: isPaleMoon ? "active" : "" + readonly property color primaryDeckTextColor: isClassic ? "#f0bb2b" : "#c2b3a5" + readonly property color primaryOverviewBackgroundColor: isClassic ? "#0f0f0f" : "#19191a" + readonly property color primaryWaveformSignalColor: isClassic ? "#e7c413" : "#d9b28c" + readonly property color secondaryDeckTextColor: isClassic ? "#0bd9d1" : "#85bdbb" + readonly property color secondaryOverviewBackgroundColor: "#001b23" + readonly property color secondaryWaveformSignalColor: isClassic ? "#09b2ae" : "#7bc6c3" + readonly property color starsColor12: isClassic ? "#f0bb2b" : "#988f86" + readonly property color starsColor34: isClassic ? "#0bd9d1" : "#559b99" + readonly property int syncButtonHorizontalPadding: isClassic ? 3 : 0 + readonly property color syncExplicitLeaderColor: activePlayCueColor + readonly property color syncImplicitLeaderColor: isPaleMoon ? "#7d350d" : "#db7700" + readonly property color syncInactiveBackgroundColor: "#1e1e1e" + readonly property color textColor: white + readonly property color textColorMuted: "#696969" + readonly property color toolbarActiveColor: white + readonly property color toolbarBackgroundColor: "#242424" + readonly property color toolbarBottomBorderColor: "#020202" + readonly property color toolbarBroadcastOnColor: isClassic ? "#659f08" : "#438225" + readonly property color toolbarButtonActiveBackgroundColor: isClassic ? "#d09300" : "#777777" + readonly property color toolbarButtonActiveTextColor: "#000000" + readonly property int toolbarButtonHeight: 26 + readonly property color toolbarButtonInactiveBackgroundColor: isClassic ? "#262626" : "#151517" + readonly property color toolbarButtonInactiveTextColor: isClassic ? "#d2d2d1" : "#777777" + readonly property int toolbarButtonWidth: 52 + readonly property color toolbarClockTextColor: isClassic ? "#f0bb2b" : "#c2b3a5" + readonly property color toolbarLatencyBorderColor: "#040404" + readonly property color toolbarLatencyLabelColor: "#444444" + readonly property color toolbarLatencyOverloadColor: "#ffff00" + readonly property color toolbarMenuDisabledTextColor: "#777777" + readonly property color toolbarMenuHoverColor: isPaleMoon ? "#2c454f" : "#5e4507" + readonly property color toolbarMenuHoverTextColor: "#ffffff" + readonly property color toolbarMenuTextColor: "#c2b3a5" + readonly property color toolbarMeterBackgroundColor: darkGray + readonly property color toolbarPopupBackgroundColor: "#0f0f0f" + readonly property color toolbarPopupBorderColor: "#585858" + readonly property color toolbarRecordInitColor: "#d09300" + readonly property color toolbarRecordOnColor: isClassic ? "#db0000" : "#a80000" + readonly property color toolbarRecordingColor: "#db0000" + readonly property color toolbarRecordingTextColor: "#ff7373" + readonly property color toolbarRootBackgroundColor: "#151517" + readonly property color toolbarStatusErrorColor: "#f856e7" + readonly property color toolbarStatusOkColor: "#54c76a" + readonly property color toolbarStatusWarnColor: "#d89124" + readonly property color white: "#D9D9D9" + function lateNightAsset(directory, fileName) { + return Qt.resolvedUrl("../../LateNight/" + ColorScheme.name + "/" + directory + "/" + fileName); + } function lateNightButton(fileName) { return lateNightAsset("buttons", fileName); } - function lateNightRegionButton(regionButtonType, buttonSize) { return lateNightButton("btn_" + regionButtonType + "_" + buttonSize + ".svg"); } - function lateNightSubRegionButton(buttonSize) { return lateNightRegionButton(isClassic ? "elevated" : "embedded", buttonSize); } - function lateNightTopRegionButton(buttonSize) { return lateNightRegionButton("embedded", buttonSize); } - - function lateNightAsset(directory, fileName) { - return Qt.resolvedUrl("../../LateNight/" + ColorScheme.name + "/" + directory + "/" + fileName); + function mixerKnobIndicator(kind, colorName) { + return lateNightAsset("knobs", "knob_indicator_" + kind + "_" + colorName + ".svg"); + } + function mixerVuClipBackground(colorVariant) { + return lateNightAsset("style", "vu_deck_clipping_bg_" + colorVariant + ".png"); + } + function mixerVuLevelBackground(colorVariant) { + return lateNightAsset("style", "vu_deck_level_bg_" + colorVariant + ".png"); } - function sharedImage(fileName) { return Qt.resolvedUrl("../../../qml/images/" + fileName); } diff --git a/res/skins/LateNightQML/Mixer/Crossfader.qml b/res/skins/LateNightQML/Mixer/Crossfader.qml new file mode 100644 index 000000000000..dd89fe062278 --- /dev/null +++ b/res/skins/LateNightQML/Mixer/Crossfader.qml @@ -0,0 +1,46 @@ +import Mixxx 1.0 as Mixxx +import QtQuick +import "../Controls" as LateNightControls +import "../LateNightTheme" + +Item { + id: root + + property bool compact: false + required property var groups + property bool showAssignments: true + + implicitHeight: 40 + implicitWidth: compact ? 85 : 115 + + LateNightControls.Fader { + anchors.centerIn: parent + backgroundSource: root.compact ? LateNightTheme.assetMixerCrossfaderSmallBackground : LateNightTheme.assetMixerCrossfaderBackground + bar.margin: 7 + bar.start: 0.5 + group: "[Master]" + handleSource: LateNightTheme.assetMixerCrossfaderHandle + height: implicitHeight + key: "crossfader" + orientation: Qt.Horizontal + width: root.compact ? 85 : 115 + } + Row { + anchors.bottom: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter + opacity: root.showAssignments ? 1 : 0 + spacing: 0 + + Repeater { + model: root.groups.length + + CrossfaderAssignButton { + required property int index + + group: root.groups[index] + leftStyle: index < 2 ? "default" : "warning" + rightStyle: index < 2 ? "warning" : "default" + } + } + } +} diff --git a/res/skins/LateNightQML/Mixer/CrossfaderAssignButton.qml b/res/skins/LateNightQML/Mixer/CrossfaderAssignButton.qml new file mode 100644 index 000000000000..a790b679133a --- /dev/null +++ b/res/skins/LateNightQML/Mixer/CrossfaderAssignButton.qml @@ -0,0 +1,41 @@ +import Mixxx 1.0 as Mixxx +import QtQuick +import "../LateNightTheme" + +Item { + id: root + + required property string group + property string leftStyle: "default" + property string rightStyle: "default" + readonly property int state: Math.max(0, Math.min(2, Math.round(orientationControl.value))) + readonly property string stateLabel: ["left", "mid", "right"][state] + readonly property string stateStyle: { + if (state === 0) { + return root.leftStyle; + } else if (state === 2) { + return root.rightStyle; + } + return "warning"; + } + + implicitHeight: 15 + implicitWidth: 33 + + Image { + anchors.fill: parent + fillMode: Image.PreserveAspectFit + source: LateNightTheme.lateNightAsset("buttons", "btn__xfader_deck_" + root.stateLabel + "_" + root.stateStyle + ".svg") + } + MouseArea { + anchors.fill: parent + + onClicked: orientationControl.value = (Math.round(orientationControl.value) + 1) % 3 + } + Mixxx.ControlProxy { + id: orientationControl + + group: root.group + key: "orientation" + } +} diff --git a/res/skins/LateNightQML/Mixer/EqKillButton.qml b/res/skins/LateNightQML/Mixer/EqKillButton.qml new file mode 100644 index 000000000000..628574f3efaf --- /dev/null +++ b/res/skins/LateNightQML/Mixer/EqKillButton.qml @@ -0,0 +1,47 @@ +import Mixxx 1.0 as Mixxx +import QtQuick +import "../LateNightTheme" + +Item { + id: root + + required property string group + required property url iconSource + required property string key + property alias value: killControl.value + + function toggle() { + killControl.value = killControl.value > 0 ? 0 : 1; + } + + implicitHeight: 18 + implicitWidth: 18 + + Rectangle { + anchors.fill: parent + color: killControl.value > 0 ? LateNightTheme.mixerEqKillActiveColor : "#111113" + } + Image { + anchors.fill: parent + source: killControl.value > 0 ? LateNightTheme.assetMixerEqKillButtonActiveBackground : LateNightTheme.assetMixerEqKillButtonBackground + } + Image { + anchors.centerIn: parent + fillMode: Image.PreserveAspectFit + height: 15 + source: root.iconSource + visible: killControl.value <= 0 + width: 15 + } + MouseArea { + anchors.fill: parent + + onClicked: killControl.value = killControl.value > 0 ? 0 : 1 + } + Mixxx.ControlProxy { + id: killControl + + group: root.group + key: root.key + } +} diff --git a/res/skins/LateNightQML/Mixer/EqKnobRow.qml b/res/skins/LateNightQML/Mixer/EqKnobRow.qml new file mode 100644 index 000000000000..a4ebf5db7683 --- /dev/null +++ b/res/skins/LateNightQML/Mixer/EqKnobRow.qml @@ -0,0 +1,68 @@ +import Mixxx 1.0 as Mixxx +import QtQuick +import "../Controls" as LateNightControls +import "../LateNightTheme" + +Item { + id: root + + readonly property string effectButtonKey: "button_" + effectParameterKey + readonly property string effectGroup: "[EqualizerRack1_" + group + "_Effect1]" + readonly property string effectParameterKey: root.key === "filterLow" ? "parameter1" : (root.key === "filterMid" ? "parameter2" : "parameter3") + required property string group + required property string key + required property url killIcon + property bool mirror: false + property bool showKill: true + + implicitHeight: 34 + implicitWidth: 58 + + EqKillButton { + id: eqKillButton + + anchors.left: root.mirror ? undefined : parent.left + anchors.right: root.mirror ? parent.right : undefined + anchors.verticalCenter: parent.verticalCenter + group: root.effectGroup + iconSource: root.killIcon + key: root.effectButtonKey + visible: root.showKill + } + LateNightControls.Knob { + id: eqKnob + + anchors.left: root.mirror ? parent.left : undefined + anchors.right: root.mirror ? undefined : parent.right + anchors.verticalCenter: parent.verticalCenter + backgroundSource: LateNightTheme.assetRegularKnobBackground + displayArc: true + displayArcColor: LateNightTheme.mixerArcEqColor + displayArcRadius: LateNightTheme.mixerArcRadiusBig + displayArcStart: LateNightControls.Knob.ArcStart.Center + displayArcWidth: LateNightTheme.mixerArcWidth + group: root.effectGroup + height: 34 + indicatorColor: LateNightTheme.isClassic ? "white" : "grey" + indicatorKind: "regular" + key: root.effectParameterKey + width: 40 + } + Image { + id: statusDot + + height: 9 + source: eqKillButton.value > 0 ? LateNightTheme.optionalMixerEqKillDotActiveRed : LateNightTheme.optionalMixerEqKillDotOff + visible: LateNightTheme.isPaleMoon && !root.showKill && root.visible + width: 9 + x: root.mirror ? eqKnob.x + 32 : eqKnob.x + y: 27 + z: 1 + + MouseArea { + anchors.fill: parent + + onClicked: eqKillButton.toggle() + } + } +} diff --git a/res/skins/LateNightQML/Mixer/EqQuickColumn.qml b/res/skins/LateNightQML/Mixer/EqQuickColumn.qml new file mode 100644 index 000000000000..812e45b9375e --- /dev/null +++ b/res/skins/LateNightQML/Mixer/EqQuickColumn.qml @@ -0,0 +1,45 @@ +import QtQuick +import QtQuick.Layouts +import "../LateNightTheme" + +Column { + id: root + + property bool alignRight: false + required property string group + property bool showEqKillButtons: true + property bool showEqKnobs: true + + spacing: 2 + + EqKnobRow { + group: root.group + key: "filterHigh" + killIcon: LateNightTheme.assetMixerEqKillHighIcon + mirror: root.alignRight + showKill: root.showEqKillButtons + visible: root.showEqKnobs + } + EqKnobRow { + group: root.group + key: "filterMid" + killIcon: LateNightTheme.assetMixerEqKillMidIcon + mirror: root.alignRight + showKill: root.showEqKillButtons + visible: root.showEqKnobs + } + EqKnobRow { + group: root.group + key: "filterLow" + killIcon: LateNightTheme.assetMixerEqKillLowIcon + mirror: root.alignRight + showKill: root.showEqKillButtons + visible: root.showEqKnobs + } + QuickEffectRow { + group: root.group + mirror: root.alignRight + showEqKillButtons: root.showEqKillButtons + visible: root.showEqKnobs + } +} diff --git a/res/skins/LateNightQML/Mixer/FxAssignButtons.qml b/res/skins/LateNightQML/Mixer/FxAssignButtons.qml new file mode 100644 index 000000000000..8433b24dd64c --- /dev/null +++ b/res/skins/LateNightQML/Mixer/FxAssignButtons.qml @@ -0,0 +1,58 @@ +import Mixxx 1.0 as Mixxx +import QtQuick +import "../LateNightTheme" + +Row { + id: root + + required property string groupName + + spacing: 0 + + Repeater { + model: 4 + + Item { + id: cell + + readonly property int buttonWidth: cell.index === 0 ? 26 : 20 + required property int index + + height: 20 + implicitHeight: 20 + implicitWidth: buttonWidth + width: buttonWidth + + Rectangle { + anchors.fill: parent + color: assignControl.value > 0 ? "#333335" : LateNightTheme.mixerFxAssignInactiveColor + } + Image { + anchors.fill: parent + fillMode: Image.Stretch + source: { + const suffix = assignControl.value > 0 ? "_active" : ""; + return LateNightTheme.lateNightAsset("buttons", cell.index === 0 ? "btn_embedded_library" + suffix + ".svg" : "btn_embedded_grid" + suffix + ".svg"); + } + } + Text { + anchors.centerIn: parent + color: assignControl.value > 0 ? LateNightTheme.mixerControlTextColor : LateNightTheme.mixerFxAssignInactiveTextColor + font.bold: true + font.pixelSize: 12 + text: cell.index === 0 ? "FX1" : cell.index + 1 + } + MouseArea { + anchors.fill: parent + + onClicked: assignControl.value = assignControl.value > 0 ? 0 : 1 + } + Mixxx.ControlProxy { + id: assignControl + + group: "[EffectRack1_EffectUnit" + (cell.index + 1) + "]" + key: "group_" + root.groupName + "_enable" + } + } + } +} diff --git a/res/skins/LateNightQML/Mixer/MainHeadphoneKnob.qml b/res/skins/LateNightQML/Mixer/MainHeadphoneKnob.qml new file mode 100644 index 000000000000..967fc9191fce --- /dev/null +++ b/res/skins/LateNightQML/Mixer/MainHeadphoneKnob.qml @@ -0,0 +1,42 @@ +import QtQuick +import "../Controls" as LateNightControls +import "../LateNightTheme" + +Item { + id: root + + property color arcColor: indicatorColor === "red" ? LateNightTheme.mixerArcMainBalanceColor : LateNightTheme.mixerArcGainLowColor + property int arcStart: key === "gain" || key === "headGain" ? LateNightControls.Knob.ArcStart.Minimum : LateNightControls.Knob.ArcStart.Center + required property string group + property string indicatorColor: "orange" + required property string key + required property string label + + implicitHeight: 47 + implicitWidth: 42 + + LateNightControls.Knob { + anchors.horizontalCenter: parent.horizontalCenter + backgroundSource: LateNightTheme.assetMainKnobBackground + displayArc: true + displayArcColor: root.arcColor + displayArcRadius: LateNightTheme.mixerArcRadiusCompact + displayArcStart: root.arcStart + displayArcWidth: LateNightTheme.mixerArcWidth + group: root.group + height: 30 + indicatorColor: root.indicatorColor + indicatorKind: "main" + key: root.key + width: 35 + y: 0 + } + Text { + anchors.bottom: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter + color: LateNightTheme.mixerDimTextColor + font.bold: true + font.pixelSize: 13 + text: root.label + } +} diff --git a/res/skins/LateNightQML/Mixer/MainHeadphonePanel.qml b/res/skins/LateNightQML/Mixer/MainHeadphonePanel.qml new file mode 100644 index 000000000000..82c57e1089c3 --- /dev/null +++ b/res/skins/LateNightQML/Mixer/MainHeadphonePanel.qml @@ -0,0 +1,151 @@ +import Mixxx 1.0 as Mixxx +import QtQuick +import "../Controls" as LateNightControls +import "../LateNightTheme" + +Item { + id: root + + readonly property int separatorY: root.show4decks ? 210 : 100 + property bool show4decks: false + + implicitHeight: root.show4decks ? 405 : 203 + implicitWidth: 96 + + Rectangle { + anchors.fill: parent + color: "#171719" + } + Rectangle { + color: LateNightTheme.mixerPanelBorderDark + height: 1 + width: parent.width + y: root.separatorY + } + Rectangle { + color: LateNightTheme.mixerPanelBorderLight + height: 1 + width: parent.width + y: root.separatorY + 1 + } + Item { + height: root.separatorY + width: parent.width + + MainHeadphoneKnob { + group: "[Master]" + indicatorColor: "orange" + key: "gain" + label: "MAIN" + x: 7 + y: root.show4decks ? 10 : 20 + } + MainHeadphoneKnob { + group: "[Master]" + indicatorColor: "red" + key: "balance" + label: "BAL" + x: 49 + y: root.show4decks ? 10 : 20 + } + Rectangle { + color: "#040404" + height: 96 + visible: root.show4decks + width: 14 + x: 38 + y: 91 + } + LateNightControls.ImageVuMeter { + backgroundVariant: 0 + drawGroove: false + group: "[Main]" + height: 96 + levelKey: "vu_meter_left" + peakKey: "peak_indicator_left" + visible: root.show4decks + width: 6 + x: 39 + y: 91 + } + LateNightControls.ImageVuMeter { + backgroundVariant: 0 + drawGroove: false + group: "[Main]" + height: 96 + levelKey: "vu_meter_right" + peakKey: "peak_indicator_right" + visible: root.show4decks + width: 6 + x: 45 + y: 91 + } + FxAssignButtons { + anchors.horizontalCenter: parent.horizontalCenter + groupName: "[MasterOutput]" + y: root.show4decks ? 56 : 76 + } + } + Item { + height: parent.height - y + width: parent.width + y: root.show4decks ? root.separatorY : root.separatorY + 2 + + MainHeadphoneKnob { + group: "[Master]" + indicatorColor: "orange" + key: "headGain" + label: "HEAD" + x: 7 + y: root.show4decks ? 58 : 9 + } + MainHeadphoneKnob { + group: "[Master]" + indicatorColor: "red" + key: "headMix" + label: "MIX" + x: 49 + y: root.show4decks ? 58 : 9 + } + Item { + anchors.horizontalCenter: parent.horizontalCenter + height: 22 + width: 48 + y: root.show4decks ? 106 : 56 + + Rectangle { + anchors.fill: parent + color: splitControl.value > 0 ? LateNightTheme.mixerSplitActiveColor : LateNightTheme.mixerSplitInactiveColor + } + + Image { + anchors.fill: parent + fillMode: Image.PreserveAspectFit + source: splitControl.value > 0 ? LateNightTheme.assetMixerSplitActiveIcon : LateNightTheme.assetMixerSplitIcon + } + Text { + anchors.centerIn: parent + color: LateNightTheme.mixerControlTextColor + font.bold: true + font.pixelSize: 12 + text: "SPLIT" + } + MouseArea { + anchors.fill: parent + + onClicked: splitControl.value = splitControl.value > 0 ? 0 : 1 + } + } + FxAssignButtons { + anchors.horizontalCenter: parent.horizontalCenter + groupName: "[Headphone]" + y: root.show4decks ? 135 : 80 + } + } + Mixxx.ControlProxy { + id: splitControl + + group: "[Master]" + key: "headSplit" + } +} diff --git a/res/skins/LateNightQML/Mixer/Mixer.qml b/res/skins/LateNightQML/Mixer/Mixer.qml new file mode 100644 index 000000000000..af984e7d0e8b --- /dev/null +++ b/res/skins/LateNightQML/Mixer/Mixer.qml @@ -0,0 +1,105 @@ +import Mixxx 1.0 as Mixxx +import QtQuick +import "../LateNightTheme" + +Item { + id: root + + required property var groups + property bool show4decks: false + + implicitHeight: Math.max(decks.implicitHeight, showMainHeadMixerControl.value > 0 ? mainHeadphonePanel.implicitHeight : 0) + implicitWidth: decks.implicitWidth + (showMainHeadMixerControl.value > 0 ? 98 : 0) + + Rectangle { + anchors.fill: parent + color: LateNightTheme.mixerPanelColor + } + Rectangle { + color: LateNightTheme.mixerPanelBorderTop + height: 1 + width: parent.width + } + Rectangle { + color: LateNightTheme.mixerPanelBorderLeft + height: parent.height + width: 1 + } + Rectangle { + anchors.bottom: parent.bottom + color: LateNightTheme.mixerPanelBorderBottom + height: 1 + width: parent.width + } + Rectangle { + anchors.right: parent.right + color: LateNightTheme.mixerPanelBorderRight + height: parent.height + width: 1 + } + MixerDecks { + id: decks + + groups: root.groups + height: root.implicitHeight + show4decks: root.show4decks + showEqKillButtons: showEqKillButtonsControl.value > 0 + showEqKnobs: showEqKnobsControl.value > 0 + showXfader: showXfaderControl.value > 0 + x: 0 + y: 0 + } + Item { + height: parent.height + visible: showMainHeadMixerControl.value > 0 + width: 2 + x: decks.implicitWidth + + Rectangle { + anchors.left: parent.left + color: LateNightTheme.mixerMainSeparatorDarkColor + height: parent.height + width: 1 + } + Rectangle { + anchors.right: parent.right + color: LateNightTheme.mixerMainSeparatorLightColor + height: parent.height + width: 1 + } + } + MainHeadphonePanel { + id: mainHeadphonePanel + + height: root.implicitHeight + show4decks: root.show4decks + visible: showMainHeadMixerControl.value > 0 + width: 96 + x: decks.implicitWidth + 2 + y: 0 + } + Mixxx.ControlProxy { + id: showEqKnobsControl + + group: "[Skin]" + key: "show_eq_knobs" + } + Mixxx.ControlProxy { + id: showEqKillButtonsControl + + group: "[Skin]" + key: "show_eq_kill_buttons" + } + Mixxx.ControlProxy { + id: showXfaderControl + + group: "[Skin]" + key: "show_xfader" + } + Mixxx.ControlProxy { + id: showMainHeadMixerControl + + group: "[Skin]" + key: "show_main_head_mixer" + } +} diff --git a/res/skins/LateNightQML/Mixer/MixerChannel2Deck.qml b/res/skins/LateNightQML/Mixer/MixerChannel2Deck.qml new file mode 100644 index 000000000000..16a746f35300 --- /dev/null +++ b/res/skins/LateNightQML/Mixer/MixerChannel2Deck.qml @@ -0,0 +1,62 @@ +import QtQuick +import "../Controls" as LateNightControls +import "../LateNightTheme" + +Item { + id: root + + required property string group + property bool mirror: false + property bool showEqKillButtons: true + property bool showEqKnobs: true + property bool showXfader: true + + implicitHeight: 203 + implicitWidth: root.showEqKnobs ? (root.showEqKillButtons ? 109 : 91) : 42 + + Item { + anchors.left: root.mirror ? parent.left : undefined + anchors.right: root.mirror ? undefined : parent.right + height: parent.height + width: 109 + + EqQuickColumn { + id: eqColumn + + alignRight: root.mirror + group: root.group + showEqKillButtons: root.showEqKillButtons + showEqKnobs: root.showEqKnobs + x: root.mirror ? 51 : 0 + y: 10 + } + LateNightControls.Fader { + backgroundSource: LateNightTheme.assetMixerVolumeSliderBackground + group: root.group + handleSource: LateNightTheme.assetMixerVolumeSliderHandle + handleWidth: 31 + height: 107 + key: "volume" + orientation: Qt.Vertical + width: 42 + x: root.mirror ? 3 : 64 + y: 49 + } + QuickEffectSelector { + arrowOnRight: root.mirror + group: root.group + visible: root.showEqKnobs + width: root.showEqKillButtons ? 62 : 40 + x: root.mirror ? 42 : (root.showEqKillButtons ? 5 : 18) + y: 156 + } + CrossfaderAssignButton { + group: root.group + leftStyle: root.mirror ? "warning" : "default" + rightStyle: root.mirror ? "default" : "warning" + visible: root.showXfader + x: root.showEqKnobs ? (root.mirror ? 46 : 22) : (root.mirror ? 18 : 57) + y: 180 + } + } +} diff --git a/res/skins/LateNightQML/Mixer/MixerChannel4Deck.qml b/res/skins/LateNightQML/Mixer/MixerChannel4Deck.qml new file mode 100644 index 000000000000..a8843419100b --- /dev/null +++ b/res/skins/LateNightQML/Mixer/MixerChannel4Deck.qml @@ -0,0 +1,118 @@ +import QtQuick +import "../Controls" as LateNightControls +import "../LateNightTheme" + +Item { + id: root + + required property string group + property string leftStyle: "default" + property string rightStyle: "default" + property bool showEqKillButtons: true + property bool showEqKnobs: true + property bool showXfader: true + readonly property int volumeY: root.showEqKnobs ? 237 : 75 + + implicitHeight: root.volumeY + 107 + (root.showXfader ? 15 : 0) + implicitWidth: 62 + + Item { + anchors.right: parent.right + height: parent.height + width: 62 + + LateNightControls.Knob { + backgroundSource: LateNightTheme.assetRegularKnobBackground + displayArc: true + displayArcColor: LateNightTheme.mixerArcGainColor + displayArcRadius: LateNightTheme.mixerArcRadiusBig + displayArcStart: LateNightControls.Knob.ArcStart.Center + displayArcWidth: LateNightTheme.mixerArcWidth + group: root.group + height: 34 + indicatorColor: "orange" + indicatorKind: "regular" + key: "pregain" + width: 40 + x: 18 + y: 4 + } + EqKnobRow { + group: root.group + key: "filterHigh" + killIcon: LateNightTheme.assetMixerEqKillHighIcon + showKill: root.showEqKillButtons + visible: root.showEqKnobs + width: 58 + x: 0 + y: 43 + } + EqKnobRow { + group: root.group + key: "filterMid" + killIcon: LateNightTheme.assetMixerEqKillMidIcon + showKill: root.showEqKillButtons + visible: root.showEqKnobs + width: 58 + x: 0 + y: 80 + } + EqKnobRow { + group: root.group + key: "filterLow" + killIcon: LateNightTheme.assetMixerEqKillLowIcon + showKill: root.showEqKillButtons + visible: root.showEqKnobs + width: 58 + x: 0 + y: 117 + } + QuickEffectRow { + group: root.group + showEqKillButtons: root.showEqKillButtons + visible: root.showEqKnobs + width: 58 + x: 0 + y: 154 + } + QuickEffectSelector { + group: root.group + visible: root.showEqKnobs + width: 62 + x: 0 + y: 188 + } + PflButton { + group: root.group + x: 28 + y: root.showEqKnobs ? 210 : 49 + } + LateNightControls.ImageVuMeter { + group: root.group + height: 96 + width: 20 + x: 0 + y: root.volumeY + } + LateNightControls.Fader { + backgroundSource: LateNightTheme.assetMixerVolumeSliderBackground + group: root.group + handleSource: LateNightTheme.assetMixerVolumeSliderHandle + handleWidth: 31 + height: 107 + key: "volume" + orientation: Qt.Vertical + width: 42 + x: 20 + y: root.volumeY + } + CrossfaderAssignButton { + group: root.group + leftStyle: root.leftStyle + rightStyle: root.rightStyle + visible: root.showXfader + x: 14 + y: root.volumeY + 107 + } + } +} diff --git a/res/skins/LateNightQML/Mixer/MixerDecks.qml b/res/skins/LateNightQML/Mixer/MixerDecks.qml new file mode 100644 index 000000000000..04d43f72f0d2 --- /dev/null +++ b/res/skins/LateNightQML/Mixer/MixerDecks.qml @@ -0,0 +1,185 @@ +import QtQuick +import "../Controls" as LateNightControls +import "../LateNightTheme" + +Item { + id: root + + readonly property int fourDeckChannelHeight: root.showEqKnobs ? (root.showXfader ? 359 : 344) : (root.showXfader ? 197 : 182) + required property var groups + property bool show4decks: false + property bool showEqKillButtons: true + property bool showEqKnobs: true + property bool showXfader: true + + implicitHeight: root.show4decks ? (root.showXfader ? 405 : root.fourDeckChannelHeight + 8) : (root.showXfader ? 203 : (root.showEqKnobs ? 182 : 164)) + implicitWidth: root.show4decks ? 278 : (root.showEqKnobs ? (root.showEqKillButtons ? 278 : 242) : (root.showXfader ? 163 : 151)) + + Item { + anchors.horizontalCenter: parent.horizontalCenter + height: parent.height + visible: !root.show4decks + width: 278 + y: root.showXfader ? 0 : Math.max(0, (parent.height - (root.showEqKnobs ? 174 : 156)) / 2) + + MixerChannel2Deck { + anchors.right: parent.horizontalCenter + anchors.rightMargin: 25 + group: root.groups[0] + showEqKillButtons: root.showEqKillButtons + showEqKnobs: root.showEqKnobs + showXfader: root.showXfader + } + MixerChannel2Deck { + anchors.left: parent.horizontalCenter + anchors.leftMargin: 27 + group: root.groups[1] + mirror: true + showEqKillButtons: root.showEqKillButtons + showEqKnobs: root.showEqKnobs + showXfader: root.showXfader + } + PflButton { + group: root.groups[0] + x: 110 + y: 17 + } + PflButton { + group: root.groups[1] + x: 139 + y: 17 + } + LateNightControls.Knob { + backgroundSource: LateNightTheme.assetRegularKnobBackground + displayArc: true + displayArcColor: LateNightTheme.mixerArcGainColor + displayArcRadius: LateNightTheme.mixerArcRadiusBig + displayArcStart: LateNightControls.Knob.ArcStart.Center + displayArcWidth: LateNightTheme.mixerArcWidth + group: root.groups[0] + height: 34 + indicatorColor: "orange" + indicatorKind: "regular" + key: "pregain" + width: 40 + x: 70 + y: 10 + } + LateNightControls.Knob { + backgroundSource: LateNightTheme.assetRegularKnobBackground + displayArc: true + displayArcColor: LateNightTheme.mixerArcGainColor + displayArcRadius: LateNightTheme.mixerArcRadiusBig + displayArcStart: LateNightControls.Knob.ArcStart.Center + displayArcWidth: LateNightTheme.mixerArcWidth + group: root.groups[1] + height: 34 + indicatorColor: "orange" + indicatorKind: "regular" + key: "pregain" + width: 40 + x: 170 + y: 10 + } + LateNightControls.ImageVuMeter { + group: root.groups[0] + height: 96 + width: 8 + x: 118 + y: 55 + } + Rectangle { + color: "#040404" + height: 96 + width: 14 + x: 133 + y: 55 + } + LateNightControls.ImageVuMeter { + backgroundVariant: 0 + drawGroove: false + group: "[Main]" + height: 96 + levelKey: "vu_meter_left" + peakKey: "peak_indicator_left" + width: 6 + x: 134 + y: 55 + } + LateNightControls.ImageVuMeter { + backgroundVariant: 0 + drawGroove: false + group: "[Main]" + height: 96 + levelKey: "vu_meter_right" + peakKey: "peak_indicator_right" + width: 6 + x: 140 + y: 55 + } + LateNightControls.ImageVuMeter { + group: root.groups[1] + height: 96 + width: 8 + x: 154 + y: 55 + } + Crossfader { + anchors.horizontalCenter: parent.horizontalCenter + compact: !root.showEqKnobs + groups: [root.groups[0], root.groups[1]] + showAssignments: false + visible: root.showXfader + y: 155 + } + } + Item { + anchors.fill: parent + visible: root.show4decks + + Row { + anchors.horizontalCenter: parent.horizontalCenter + spacing: 2 + + MixerChannel4Deck { + group: root.groups[2] + leftStyle: "default" + rightStyle: "warning" + showEqKillButtons: root.showEqKillButtons + showEqKnobs: root.showEqKnobs + showXfader: root.showXfader + } + MixerChannel4Deck { + group: root.groups[0] + leftStyle: "default" + rightStyle: "warning" + showEqKillButtons: root.showEqKillButtons + showEqKnobs: root.showEqKnobs + showXfader: root.showXfader + } + MixerChannel4Deck { + group: root.groups[1] + leftStyle: "warning" + rightStyle: "default" + showEqKillButtons: root.showEqKillButtons + showEqKnobs: root.showEqKnobs + showXfader: root.showXfader + } + MixerChannel4Deck { + group: root.groups[3] + leftStyle: "warning" + rightStyle: "default" + showEqKillButtons: root.showEqKillButtons + showEqKnobs: root.showEqKnobs + showXfader: root.showXfader + } + } + Crossfader { + anchors.horizontalCenter: parent.horizontalCenter + groups: root.groups + showAssignments: false + visible: root.showXfader + y: root.fourDeckChannelHeight + Math.max(0, (parent.height - root.fourDeckChannelHeight - height) / 2) + } + } +} diff --git a/res/skins/LateNightQML/Mixer/PflButton.qml b/res/skins/LateNightQML/Mixer/PflButton.qml new file mode 100644 index 000000000000..9c720454a58f --- /dev/null +++ b/res/skins/LateNightQML/Mixer/PflButton.qml @@ -0,0 +1,41 @@ +import Mixxx 1.0 as Mixxx +import QtQuick +import "../LateNightTheme" + +Item { + id: root + + required property string group + + implicitHeight: 26 + implicitWidth: 26 + + Rectangle { + anchors.fill: parent + anchors.margins: 2 + color: pflControl.value > 0 ? LateNightTheme.mixerPflActiveFillColor : LateNightTheme.deckEmbeddedButtonInactiveColor + } + Image { + anchors.fill: parent + fillMode: Image.Stretch + source: LateNightTheme.assetMixerPflBackground + } + Image { + anchors.centerIn: parent + fillMode: Image.PreserveAspectFit + height: 26 + source: pflControl.value > 0 ? LateNightTheme.assetMixerPflActiveIcon : LateNightTheme.assetMixerPflIcon + width: 26 + } + MouseArea { + anchors.fill: parent + + onClicked: pflControl.value = pflControl.value > 0 ? 0 : 1 + } + Mixxx.ControlProxy { + id: pflControl + + group: root.group + key: "pfl" + } +} diff --git a/res/skins/LateNightQML/Mixer/QuickEffectEnableButton.qml b/res/skins/LateNightQML/Mixer/QuickEffectEnableButton.qml new file mode 100644 index 000000000000..ac617dbfa5ee --- /dev/null +++ b/res/skins/LateNightQML/Mixer/QuickEffectEnableButton.qml @@ -0,0 +1,45 @@ +import Mixxx 1.0 as Mixxx +import QtQuick +import "../LateNightTheme" + +Item { + id: root + + readonly property real enabledValue: enabledControl.value + required property string quickEffectGroup + + function toggle() { + enabledControl.value = enabledControl.value > 0 ? 0 : 1; + } + + implicitHeight: 18 + implicitWidth: 18 + + Rectangle { + anchors.fill: parent + color: enabledControl.value > 0 ? LateNightTheme.mixerQuickEffectActiveColor : "#111113" + } + Image { + anchors.fill: parent + source: enabledControl.value > 0 ? LateNightTheme.assetMixerEqKillButtonActiveBackground : LateNightTheme.assetMixerEqKillButtonBackground + } + Image { + anchors.centerIn: parent + fillMode: Image.PreserveAspectFit + height: 18 + source: enabledControl.value > 0 ? LateNightTheme.optionalMixerQuickEffectActiveIcon : LateNightTheme.assetMixerQuickEffectIcon + visible: enabledControl.value <= 0 || LateNightTheme.isPaleMoon + width: 18 + } + MouseArea { + anchors.fill: parent + + onClicked: root.toggle() + } + Mixxx.ControlProxy { + id: enabledControl + + group: root.quickEffectGroup + key: "enabled" + } +} diff --git a/res/skins/LateNightQML/Mixer/QuickEffectRow.qml b/res/skins/LateNightQML/Mixer/QuickEffectRow.qml new file mode 100644 index 000000000000..55d5f271122c --- /dev/null +++ b/res/skins/LateNightQML/Mixer/QuickEffectRow.qml @@ -0,0 +1,61 @@ +import QtQuick +import "../Controls" as LateNightControls +import "../LateNightTheme" + +Item { + id: root + + required property string group + property bool mirror: false + readonly property string quickEffectGroup: "[QuickEffectRack1_" + group + "]" + property bool showEqKillButtons: true + + implicitHeight: 34 + implicitWidth: 58 + + QuickEffectEnableButton { + id: enableButton + + anchors.left: root.mirror ? undefined : parent.left + anchors.right: root.mirror ? parent.right : undefined + anchors.verticalCenter: parent.verticalCenter + quickEffectGroup: root.quickEffectGroup + visible: root.showEqKillButtons + } + Image { + id: statusDot + + height: 9 + source: enableButton.enabledValue > 0 ? LateNightTheme.optionalMixerEqKillDotActiveGreen : LateNightTheme.optionalMixerEqKillDotOff + visible: LateNightTheme.isPaleMoon && !root.showEqKillButtons + width: 9 + x: root.mirror ? quickEffectKnob.x + 32 : quickEffectKnob.x + y: 27 + z: 1 + + MouseArea { + anchors.fill: parent + + onClicked: enableButton.toggle() + } + } + LateNightControls.Knob { + id: quickEffectKnob + + anchors.left: root.mirror ? parent.left : undefined + anchors.right: root.mirror ? undefined : parent.right + anchors.verticalCenter: parent.verticalCenter + backgroundSource: LateNightTheme.assetRegularKnobBackground + displayArc: true + displayArcColor: LateNightTheme.mixerArcQuickEffectColor + displayArcRadius: LateNightTheme.mixerArcRadiusBig + displayArcStart: LateNightControls.Knob.ArcStart.Center + displayArcWidth: LateNightTheme.mixerArcWidth + group: root.quickEffectGroup + height: 34 + indicatorColor: "green" + indicatorKind: "regular" + key: "super1" + width: 40 + } +} diff --git a/res/skins/LateNightQML/Mixer/QuickEffectSelector.qml b/res/skins/LateNightQML/Mixer/QuickEffectSelector.qml new file mode 100644 index 000000000000..fcf4e135acb8 --- /dev/null +++ b/res/skins/LateNightQML/Mixer/QuickEffectSelector.qml @@ -0,0 +1,121 @@ +import Mixxx 1.0 as Mixxx +import QtQuick +import QtQuick.Controls +import "../LateNightTheme" + +ComboBox { + id: root + + property bool arrowOnRight: false + readonly property bool compact: width <= 40 + required property string group + property int popupMaxItem: 44 + property int popupWidth: 160 + readonly property string quickEffectGroup: "[QuickEffectRack1_" + group + "]" + + currentIndex: root.count > 0 ? Math.max(0, Math.min(root.count - 1, Math.round(presetControl.value))) : -1 + font.family: "Open Sans" + font.pixelSize: 13 + font.weight: Font.Medium + implicitHeight: 18 + implicitWidth: 62 + model: Mixxx.EffectsManager.quickChainPresetModel + textRole: "display" + + background: Item { + } + contentItem: Item { + implicitHeight: root.implicitHeight + implicitWidth: root.implicitWidth + + Image { + id: arrow + + anchors.verticalCenter: parent.verticalCenter + fillMode: Image.PreserveAspectFit + height: 24 + source: LateNightTheme.assetToolbarDropdownIcon + width: 16 + x: root.arrowOnRight ? parent.width - width + 1 : -3 + } + Text { + anchors.fill: parent + anchors.leftMargin: root.compact && root.arrowOnRight ? -6 : 0 + anchors.rightMargin: root.compact && !root.arrowOnRight ? -6 : 0 + color: LateNightTheme.mixerQuickEffectSelectorTextColor + elide: Text.ElideRight + font: root.font + horizontalAlignment: root.arrowOnRight ? Text.AlignRight : Text.AlignLeft + leftPadding: root.arrowOnRight ? 0 : (root.compact ? 10 : 13) + rightPadding: root.arrowOnRight ? (root.compact ? 10 : 13) : 0 + text: root.displayText || qsTr("Filter") + verticalAlignment: Text.AlignVCenter + } + } + delegate: ItemDelegate { + id: presetDelegate + + required property int index + + checkable: false + checked: root.currentIndex === index + height: 20 + highlighted: root.highlightedIndex === index + padding: 0 + width: ListView.view ? ListView.view.width : root.popupWidth + + background: Rectangle { + color: presetDelegate.highlighted ? "#2c454f" : "transparent" + radius: presetDelegate.highlighted ? 1 : 0 + } + contentItem: Text { + color: presetDelegate.checked || presetDelegate.highlighted ? "#ffffff" : LateNightTheme.mixerQuickEffectSelectorTextColor + elide: Text.ElideRight + font: root.font + leftPadding: 20 + rightPadding: 4 + text: root.textAt(presetDelegate.index) + verticalAlignment: Text.AlignVCenter + } + } + indicator: Item { + width: 0 + } + popup: Popup { + height: Math.min(contentItem.contentHeight, root.popupMaxItem * 20) + 2 + padding: 1 + width: root.popupWidth + x: root.arrowOnRight ? root.width - width : 0 + y: root.height + + background: Rectangle { + border.color: "#333333" + border.width: 1 + color: "#151517" + radius: 1 + } + contentItem: ListView { + id: presetList + + clip: true + currentIndex: root.highlightedIndex + implicitHeight: contentHeight + model: root.popup.visible ? root.delegateModel : null + + ScrollBar.vertical: ScrollBar { + policy: ScrollBar.AlwaysOff + } + } + + onOpened: presetList.contentY = 0 + } + + onActivated: index => presetControl.value = index + + Mixxx.ControlProxy { + id: presetControl + + group: root.quickEffectGroup + key: "loaded_chain_preset" + } +} diff --git a/res/skins/LateNightQML/main.qml b/res/skins/LateNightQML/main.qml index c731ee4b2726..2ee15d8e0071 100644 --- a/res/skins/LateNightQML/main.qml +++ b/res/skins/LateNightQML/main.qml @@ -1,6 +1,7 @@ import "../../qml" as Skin import "LateNightTheme" import "Deck" as LateNightDeck +import "Mixer" as LateNightMixer import "Toolbar" as LateNightToolbar import "Waveforms" as LateNightWaveforms import Mixxx 1.0 as Mixxx @@ -13,15 +14,15 @@ ApplicationWindow { property alias editDeck: toolbar.editDeck property var focusedDeck: null - property alias maximizeLibrary: toolbar.maximizeLibrary readonly property int fullDeckHeight: 206 + property alias maximizeLibrary: toolbar.maximizeLibrary readonly property int minimizedDeckHeight: 80 readonly property int numDecks: 4 readonly property int numSamplers: 64 readonly property bool show4decks: toolbar.show4decks + property alias showEffects: toolbar.showEffects readonly property bool showMaximizedDecks: toolbar.showMaximizedDecks readonly property bool showMixer: toolbar.showMixer - property alias showEffects: toolbar.showEffects property alias showSamplers: toolbar.showSamplers readonly property bool showWaveforms: toolbar.showWaveforms @@ -49,58 +50,58 @@ ApplicationWindow { } } Mixxx.SkinControlCreator { + defaultValue: 1.0 group: "[Skin]" key: "show_waveforms" persist: true - defaultValue: 1.0 } Mixxx.SkinControlCreator { + defaultValue: 1.0 group: "[Skin]" key: "show_hotcues" persist: true - defaultValue: 1.0 } Mixxx.SkinControlCreator { + defaultValue: 1.0 group: "[Skin]" key: "show_8_hotcues" persist: true - defaultValue: 1.0 } Mixxx.SkinControlCreator { + defaultValue: 1.0 group: "[Skin]" key: "show_intro_outro_cues" persist: true - defaultValue: 1.0 } Mixxx.SkinControlCreator { + defaultValue: 1.0 group: "[Skin]" key: "show_loop_controls" persist: true - defaultValue: 1.0 } Mixxx.SkinControlCreator { + defaultValue: 1.0 group: "[Skin]" key: "show_beatjump_controls" persist: true - defaultValue: 1.0 } Mixxx.SkinControlCreator { + defaultValue: 1.0 group: "[Skin]" key: "show_rate_controls" persist: true - defaultValue: 1.0 } Mixxx.SkinControlCreator { + defaultValue: 1.0 group: "[Skin]" key: "show_rate_control_buttons" persist: true - defaultValue: 1.0 } Mixxx.SkinControlCreator { + defaultValue: 1.0 group: "[Skin]" key: "show_key_controls" persist: true - defaultValue: 1.0 } Mixxx.SkinControlCreator { group: "[Skin]" @@ -108,16 +109,16 @@ ApplicationWindow { persist: true } Mixxx.SkinControlCreator { + defaultValue: 1.0 group: "[Skin]" key: "show_spinnies" persist: true - defaultValue: 1.0 } Mixxx.SkinControlCreator { + defaultValue: 1.0 group: "[Skin]" key: "show_coverart" persist: true - defaultValue: 1.0 } Mixxx.SkinControlCreator { group: "[Skin]" @@ -130,28 +131,28 @@ ApplicationWindow { persist: true } Mixxx.SkinControlCreator { + defaultValue: 1.0 group: "[Skin]" key: "show_eq_knobs" persist: true - defaultValue: 1.0 } Mixxx.SkinControlCreator { + defaultValue: 1.0 group: "[Skin]" key: "show_eq_kill_buttons" persist: true - defaultValue: 1.0 } Mixxx.SkinControlCreator { + defaultValue: 1.0 group: "[Skin]" key: "show_xfader" persist: true - defaultValue: 1.0 } Mixxx.SkinControlCreator { + defaultValue: 1.0 group: "[Skin]" key: "show_main_head_mixer" persist: true - defaultValue: 1.0 } Mixxx.SkinControlCreator { group: "[Skin]" @@ -236,8 +237,8 @@ ApplicationWindow { SplitView.fillHeight: !library.active SplitView.preferredHeight: library.active ? 120 : undefined - visible: root.showWaveforms && !root.maximizeLibrary show4decks: root.show4decks + visible: root.showWaveforms && !root.maximizeLibrary Skin.FadeBehavior on visible { fadeTarget: waveforms @@ -246,9 +247,14 @@ ApplicationWindow { Item { id: deckPane + readonly property real deckRowsHeight: root.show4decks ? visibleDeckHeight * 2 : visibleDeckHeight + readonly property real requiredPaneHeight: Math.max(deckRowsHeight, mixer.visible ? mixer.implicitHeight : 0) + readonly property real visibleDeckHeight: root.maximizeLibrary ? (root.showMaximizedDecks ? root.minimizedDeckHeight : 0) : root.fullDeckHeight + SplitView.fillHeight: library.active - SplitView.maximumHeight: library.active ? undefined : mixer.height - SplitView.minimumHeight: mixer.height + SplitView.maximumHeight: library.active ? undefined : requiredPaneHeight + SplitView.minimumHeight: requiredPaneHeight + implicitHeight: requiredPaneHeight width: splitView.width LateNightDeck.Deck { @@ -290,25 +296,17 @@ ApplicationWindow { top: parent.top } } - Skin.Mixer { + LateNightMixer.Mixer { id: mixer anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top groups: [deck1.group, deck2.group, deck3.group, deck4.group] - width: visible ? implicitWidth : 0 + height: visible ? implicitHeight : 0 show4decks: root.show4decks visible: root.showMixer && !root.maximizeLibrary + width: visible ? implicitWidth : 0 - Behavior on height { - SpringAnimation { - id: mixerHeightAnimation - - damping: 0.2 - duration: 500 - spring: 2 - } - } states: [ State { when: root.focusedDeck === deck1 && root.width < 1400 && !root.maximizeLibrary @@ -375,6 +373,15 @@ ApplicationWindow { Skin.FadeBehavior on visible { fadeTarget: mixer } + Behavior on width { + SpringAnimation { + id: mixerWidthAnimation + + damping: 0.2 + duration: 500 + spring: 2 + } + } } LateNightDeck.Deck { id: deck2 @@ -525,7 +532,7 @@ ApplicationWindow { Loader { id: library - active: root.maximizeLibrary || root.height - mixer.height >= 400 + active: root.maximizeLibrary || root.height - deckPane.requiredPaneHeight >= 400 width: parent.width sourceComponent: Component { @@ -559,7 +566,7 @@ ApplicationWindow { } }, State { - when: !root.maximizeLibrary && root.height - mixer.height < 400 + when: !root.maximizeLibrary && root.height - deckPane.requiredPaneHeight < 400 PropertyChanges { target: library @@ -570,11 +577,10 @@ ApplicationWindow { anchors { bottom: parent.bottom - top: mixer.bottom + top: root.show4decks ? deck4.bottom : deck1.bottom } } } } } - }