From e4fe1b360f0296247c6666b22c8c8f577086e772 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Gr=C3=A4=C3=9Flin?= Date: Mon, 10 Mar 2014 10:40:42 +0100 Subject: [PATCH] Improve layout of Effect View * use frame in the scroll area * remove needless anchoring for an Effect * use one RowLayout for one Effect row * add a left and right padding using the normal spacing * Use a ColumnLayout for the center element consisting of ** name ** description ** (info) ** (video) * Video moved into an own component * Animations removed REVIEW: 116693 --- kcmkwin/kwincompositing/qml/Effect.qml | 268 +++++++-------------- kcmkwin/kwincompositing/qml/EffectView.qml | 7 +- kcmkwin/kwincompositing/qml/Video.qml | 71 ++++++ 3 files changed, 165 insertions(+), 181 deletions(-) create mode 100644 kcmkwin/kwincompositing/qml/Video.qml diff --git a/kcmkwin/kwincompositing/qml/Effect.qml b/kcmkwin/kwincompositing/qml/Effect.qml index 62ec89c83b..b6ceff191d 100644 --- a/kcmkwin/kwincompositing/qml/Effect.qml +++ b/kcmkwin/kwincompositing/qml/Effect.qml @@ -23,195 +23,113 @@ import QtQuick 2.1 import QtQuick.Controls 1.1 import QtQuick.Layouts 1.0 import org.kde.kwin.kwincompositing 1.0 -import QtMultimedia 5.0 as Multimedia -import org.kde.qtextracomponents 2.0 as QtExtra -Item { +Rectangle { id: item width: parent.width - height: 40 + height: childrenRect.height + color: item.ListView.isCurrentItem ? effectView.backgroundActiveColor : index % 2 ? effectView.backgroundNormalColor : effectView.backgroundAlternateColor signal changed() property alias checked: effectStatusCheckBox.checked - Rectangle { - id: background - color: item.ListView.isCurrentItem ? effectView.backgroundActiveColor : index % 2 ? effectView.backgroundNormalColor : effectView.backgroundAlternateColor - anchors.fill : parent + MouseArea { + anchors.fill: parent + onClicked: { + effectView.currentIndex = index; + } + } - RowLayout { - id: rowEffect - anchors.fill: parent - CheckBox { - function isDesktopSwitching() { - if (model.ServiceNameRole == "kwin4_effect_slide") { - return true; - } else if (model.ServiceNameRole == "kwin4_effect_fadedesktop") { - return true; - } else if (model.ServiceNameRole == "kwin4_effect_cubeslide") { - return true; - } else { - return false; - } - } - function isWindowManagementEnabled() { - if (model.ServiceNameRole == "kwin4_effect_dialogparent") { - windowManagementEnabled = effectStatusCheckBox.checked; - return windowManagementEnabled = effectStatusCheckBox.checked && windowManagementEnabled; - } else if (model.ServiceNameRole == "kwin4_effect_desktopgrid") { - windowManagementEnabled = effectStatusCheckBox.checked; - return windowManagementEnabled = effectStatusCheckBox.checked && windowManagementEnabled; - } else if (model.ServiceNameRole == "kwin4_effect_presentwindows") { - windowManagementEnabled = effectStatusCheckBox.checked; - return windowManagementEnabled = effectStatusCheckBox.checked && windowManagementEnabled; - } - return windowManagementEnabled; - } - - id: effectStatusCheckBox - property bool windowManagementEnabled; - checked: model.EffectStatusRole - exclusiveGroup: isDesktopSwitching() ? desktopSwitching : null - - onCheckedChanged: item.changed() - Connections { - target: searchModel - onDataChanged: { - effectStatusCheckBox.checked = model.EffectStatusRole; - } + RowLayout { + id: rowEffect + width: parent.width - 2 * spacing + x: spacing + CheckBox { + function isDesktopSwitching() { + if (model.ServiceNameRole == "kwin4_effect_slide") { + return true; + } else if (model.ServiceNameRole == "kwin4_effect_fadedesktop") { + return true; + } else if (model.ServiceNameRole == "kwin4_effect_cubeslide") { + return true; + } else { + return false; } } - - Item { - id: effectItem - width: effectView.width - effectStatusCheckBox.width - aboutButton.width - configureButton.width - height: item.height - anchors.top: rowEffect.top - anchors.left: effectStatusCheckBox.right - MouseArea { - id: area - width: effectView.width - effectStatusCheckBox.width - height: effectView.height - onClicked: { - effectView.currentIndex = index; - } - } - Column { - id: col - height: parent.height - Text { - text: model.NameRole - } - Text { - id: desc - function wrapDescription() { - if (wrapMode == Text.NoWrap) { - wrapMode = Text.WordWrap; - elide = Text.ElideNone; - } else { - wrapMode = Text.NoWrap; - elide = Text.ElideRight; - } - } - text: model.DescriptionRole - width: effectView.width - 100 - elide: Text.ElideRight - } - Item { - id:aboutItem - anchors.top: desc.bottom - anchors.topMargin: 20 - visible: false - - Text { - text: "Author: " + model.AuthorNameRole + "\n" + "License: " + model.LicenseRole - font.bold: true - } - PropertyAnimation {id: animationAbout; target: aboutItem; property: "visible"; to: !aboutItem.visible} - PropertyAnimation {id: animationAboutSpacing; target: item; property: "height"; to: item.height == 40 ? item.height + 100 : 40} - } - Multimedia.Video { - id: videoItem - function showHide() { - replayButton.visible = false; - if (videoItem.visible === true) { - videoItem.stop(); - videoItem.visible = false; - // TODO: this should be done in a better way - item.height = item.height - 400; - } else { - videoItem.visible = true; - videoItem.play(); - item.height = item.height + 400; - } - } - autoLoad: false - source: model.VideoRole - visible: false - width: 400 - height: 400 - anchors.bottom: parent.bottom - BusyIndicator { - anchors.centerIn: parent - visible: videoItem.status == Multimedia.MediaPlayer.Loading - running: true - } - MouseArea { - // it's a mouse area with icon inside to not have an ugly button background - id: replayButton - visible: false - anchors.fill: parent - onClicked: { - replayButton.visible = false; - videoItem.play(); - } - QtExtra.QIconItem { - id: replayIcon - anchors.centerIn: parent - width: 16 - height: 16 - icon: "media-playback-start" - } - Connections { - target: videoItem - onStopped: { - replayButton.visible = true - } - } - } - } + function isWindowManagementEnabled() { + if (model.ServiceNameRole == "kwin4_effect_dialogparent") { + windowManagementEnabled = effectStatusCheckBox.checked; + return windowManagementEnabled = effectStatusCheckBox.checked && windowManagementEnabled; + } else if (model.ServiceNameRole == "kwin4_effect_desktopgrid") { + windowManagementEnabled = effectStatusCheckBox.checked; + return windowManagementEnabled = effectStatusCheckBox.checked && windowManagementEnabled; + } else if (model.ServiceNameRole == "kwin4_effect_presentwindows") { + windowManagementEnabled = effectStatusCheckBox.checked; + return windowManagementEnabled = effectStatusCheckBox.checked && windowManagementEnabled; } + return windowManagementEnabled; } - RowLayout { - anchors.right: parent.right - Button { - id: videoButton - visible: model.VideoRole.toString() !== "" - iconName: "video" - onClicked: videoItem.showHide() - } - Button { - id: configureButton - visible: effectConfig.effectUiConfigExists(model.ServiceNameRole) - enabled: effectStatusCheckBox.checked - iconName: "configure" - onClicked: { - effectConfig.openConfig(model.NameRole); - } - } + id: effectStatusCheckBox + property bool windowManagementEnabled; + checked: model.EffectStatusRole + exclusiveGroup: isDesktopSwitching() ? desktopSwitching : null - Button { - id: aboutButton - iconName: "dialog-information" - onClicked: { - animationAbout.running = true; - animationAboutSpacing.running = true; - desc.wrapDescription(); - } + onCheckedChanged: item.changed() + Connections { + target: searchModel + onDataChanged: { + effectStatusCheckBox.checked = model.EffectStatusRole; } } + } - } //end Row - } //end Rectangle -} //end item + ColumnLayout { + id: effectItem + Text { + text: model.NameRole + } + Text { + id: desc + text: model.DescriptionRole + } + Text { + id:aboutItem + text: "Author: " + model.AuthorNameRole + "\n" + "License: " + model.LicenseRole + font.bold: true + visible: false + } + Video { + id: videoItem + visible: false + } + } + Item { + // spacer + Layout.fillWidth: true + } + Button { + id: videoButton + visible: model.VideoRole.toString() !== "" + iconName: "video" + onClicked: videoItem.showHide() + } + Button { + id: configureButton + visible: effectConfig.effectUiConfigExists(model.ServiceNameRole) + enabled: effectStatusCheckBox.checked + iconName: "configure" + onClicked: { + effectConfig.openConfig(model.NameRole); + } + } + + Button { + id: aboutButton + iconName: "dialog-information" + onClicked: { + aboutItem.visible = !aboutItem.visible; + } + } + } //end Row +} //end Rectangle diff --git a/kcmkwin/kwincompositing/qml/EffectView.qml b/kcmkwin/kwincompositing/qml/EffectView.qml index b1b4c534c0..d369c4a24c 100644 --- a/kcmkwin/kwincompositing/qml/EffectView.qml +++ b/kcmkwin/kwincompositing/qml/EffectView.qml @@ -93,20 +93,15 @@ Item { ScrollView { id: scroll + frameVisible: true highlightOnFocus: true Layout.fillWidth: true Layout.fillHeight: true - anchors { - top: searchField.bottom - left: parent.left - bottom: parent.bottom - } ListView { id: effectView property color backgroundActiveColor: searchModel.backgroundActiveColor property color backgroundNormalColor: searchModel.backgroundNormalColor property color backgroundAlternateColor: searchModel.backgroundAlternateColor - Layout.fillWidth: true anchors.fill: parent model: searchModel delegate: Effect{ diff --git a/kcmkwin/kwincompositing/qml/Video.qml b/kcmkwin/kwincompositing/qml/Video.qml new file mode 100644 index 0000000000..a1b0c6f0f8 --- /dev/null +++ b/kcmkwin/kwincompositing/qml/Video.qml @@ -0,0 +1,71 @@ +/************************************************************************** +* KWin - the KDE window manager * +* This file is part of the KDE project. * +* * +* Copyright (C) 2013 Antonis Tsiapaliokas * +* Copyright (C) 2014 Martin Gräßlin * +* * +* This program is free software; you can redistribute it and/or modify * +* it under the terms of the GNU General Public License as published by * +* the Free Software Foundation; either version 2 of the License, or * +* (at your option) any later version. * +* * +* This program is distributed in the hope that it will be useful, * +* but WITHOUT ANY WARRANTY; without even the implied warranty of * +* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * +* GNU General Public License for more details. * +* * +* You should have received a copy of the GNU General Public License * +* along with this program. If not, see . * +**************************************************************************/ +import QtQuick 2.1 +import QtQuick.Controls 1.1 +import QtQuick.Layouts 1.0 +import QtMultimedia 5.0 as Multimedia +import org.kde.qtextracomponents 2.0 as QtExtra + +Multimedia.Video { + id: videoItem + function showHide() { + replayButton.visible = false; + if (videoItem.visible === true) { + videoItem.stop(); + videoItem.visible = false; + } else { + videoItem.visible = true; + videoItem.play(); + } + } + autoLoad: false + source: model.VideoRole + width: 400 + height: 400 + BusyIndicator { + anchors.centerIn: parent + visible: videoItem.status == Multimedia.MediaPlayer.Loading + running: true + } + MouseArea { + // it's a mouse area with icon inside to not have an ugly button background + id: replayButton + visible: false + anchors.fill: parent + onClicked: { + replayButton.visible = false; + videoItem.play(); + } + QtExtra.QIconItem { + id: replayIcon + anchors.centerIn: parent + width: 16 + height: 16 + icon: "media-playback-start" + } + Connections { + target: videoItem + onStopped: { + replayButton.visible = true + } + } + } +}