From 9edc39633b82b5e02d33c4b0a395fe110af28eb4 Mon Sep 17 00:00:00 2001 From: Tannin Date: Tue, 6 Jan 2015 19:31:53 +0100 Subject: - bugfixes - moved more functionality to game-plugins - further decoupled management functionality from the UI - created another "tutorial" which is only a single page with relevant parts of the ui highlighted with info as tooltips --- src/tutorials/Highlight.qml | 1 - src/tutorials/Tooltip.qml | 31 ++++++++++ src/tutorials/TooltipArea.qml | 55 +++++++++++++++++ src/tutorials/TutorialDescription.qml | 5 +- src/tutorials/TutorialOverlay.qml | 93 ++++++++++++++++------------ src/tutorials/tutorial_primer_main.js | 111 ++++++++++++++++++++++++++++++++++ src/tutorials/tutorials.js | 28 ++++++--- 7 files changed, 273 insertions(+), 51 deletions(-) create mode 100644 src/tutorials/Tooltip.qml create mode 100644 src/tutorials/TooltipArea.qml create mode 100644 src/tutorials/tutorial_primer_main.js (limited to 'src/tutorials') diff --git a/src/tutorials/Highlight.qml b/src/tutorials/Highlight.qml index bb4db78f..55474c91 100644 --- a/src/tutorials/Highlight.qml +++ b/src/tutorials/Highlight.qml @@ -1,4 +1,3 @@ -// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5 import QtQuick 1.1 Rectangle { diff --git a/src/tutorials/Tooltip.qml b/src/tutorials/Tooltip.qml new file mode 100644 index 00000000..6424d9ab --- /dev/null +++ b/src/tutorials/Tooltip.qml @@ -0,0 +1,31 @@ +import QtQuick 1.1 + + +Rectangle { + color: "#EE888888" + width: childrenRect.width + 15 + height: childrenRect.height + 15 + z: 20000 + clip: false + border.color: "black" + border.width: 1 + property alias text: tooltipText.text + Text { + id: tooltipText + font.pointSize: 11 + wrapMode: Text.WordWrap + anchors.left: parent.left + anchors.top: parent.top + anchors.leftMargin: 7 + anchors.rightMargin: 7 + z: parent.z + color: "black" + onTextChanged: { + if (width > 200) + width = 200 + } + } + visible: false +} + + diff --git a/src/tutorials/TooltipArea.qml b/src/tutorials/TooltipArea.qml new file mode 100644 index 00000000..48a50f76 --- /dev/null +++ b/src/tutorials/TooltipArea.qml @@ -0,0 +1,55 @@ +import QtQuick 1.1 + +Rectangle { + radius: 2 + color: clickable ? "#AA6666AA" : "#AA882222" + height: 100 + border.color: "black" + border.width: 2 + z: 1 + smooth: true + property bool wasLocked: false + property bool clickable: false + property string tooltipText: "" + + MouseArea { + id: clickArea + anchors.fill: parent + hoverEnabled: true + + onMousePositionChanged: { + if (parent.parent.width - (parent.x + mouseX) < tooltip.width + 50) { + tooltip.x = parent.x + mouseX - 15 - tooltip.width + } else { + tooltip.x = parent.x + mouseX + 15 + } + + if (parent.parent.height - (parent.y + mouseY) < tooltip.height + 50) { + tooltip.y = parent.y + mouseY - 15 - tooltip.height + } else { + tooltip.y = parent.y + mouseY + 15 + } + } + + onEntered: { + tooltip.visible = true + tooltip.text = tooltipText + } + + onPressed: { + wasLocked = tutToplevel.backgroundEnabled() + if (wasLocked && clickable) { + tutorialControl.simulateClick(mouseX + parent.x, mouseY + parent.y) + } + mouse.accepted = false + } + + onCanceled: { + tooltip.visible = false + } + + onExited: { + tooltip.visible = false + } + } +} diff --git a/src/tutorials/TutorialDescription.qml b/src/tutorials/TutorialDescription.qml index b295e477..498573d2 100644 --- a/src/tutorials/TutorialDescription.qml +++ b/src/tutorials/TutorialDescription.qml @@ -15,8 +15,9 @@ Rectangle { border.color: "black" border.width: 3 smooth: true - opacity: 0.9 - color: "#707070" + //opacity: 0.9 + z: 10000 + color: "#FF707070" Image { id: continueIcon diff --git a/src/tutorials/TutorialOverlay.qml b/src/tutorials/TutorialOverlay.qml index f2aad027..15fe9603 100644 --- a/src/tutorials/TutorialOverlay.qml +++ b/src/tutorials/TutorialOverlay.qml @@ -2,52 +2,67 @@ import QtQuick 1.1 import "tutorials.js" as Logic Rectangle { - color: "transparent" - - property int step : 0 - property alias description: tutDescription - property alias highlight: tutHighlight - property alias text: tutDescription.text - property alias boxOpacity: tutDescription.opacity - property int offsetBottom: 50 - property int maxWidth: 400 - - function init() { - Logic.init() - Logic.nextStep() - } + color: "transparent" - function enableBackground(enabled) { - disabledBackground.visible = enabled - } -/* - signal nextStep + id: tutToplevel - onNextStep: {*/ - function nextStep() { - if (step == 0) { - Logic.init() - } + property int step : 0 + property alias description: tutDescription + property alias highlight: tutHighlight + property alias text: tutDescription.text + property alias boxOpacity: tutDescription.opacity + property int offsetBottom: 50 + property int maxWidth: 400 - Logic.nextStep() - } + signal tabChanged(int index) + + function init() { + Logic.init() + Logic.nextStep() + } + + function enableBackground(enabled) { + disabledBackground.visible = enabled + } - TutorialDescription { - id: tutDescription - innerWidth: maxWidth - anchors.bottomMargin: offsetBottom - onClicked: { - Logic.clickNext() - } + function backgroundEnabled() { + return disabledBackground.visible + } + + function nextStep() { + if (step == 0) { + Logic.init() } - Rectangle { - id: disabledBackground - anchors.fill: parent - opacity: 0.2 - color: "#808080" + Logic.nextStep() + } + + TutorialDescription { + id: tutDescription + innerWidth: maxWidth + anchors.bottomMargin: offsetBottom + onClicked: { + Logic.clickNext() } + } + + Rectangle { + id: disabledBackground + anchors.fill: parent + opacity: 0.2 + color: "#808080" + } + + Connections { + target: manager + onTabChanged: tabChanged(index) + } - Highlight { id: tutHighlight } + Tooltip { + id: tooltip + } + Highlight { + id: tutHighlight + } } diff --git a/src/tutorials/tutorial_primer_main.js b/src/tutorials/tutorial_primer_main.js new file mode 100644 index 00000000..12df2c86 --- /dev/null +++ b/src/tutorials/tutorial_primer_main.js @@ -0,0 +1,111 @@ +//TL Overview#5 + + +var tooltips = [] + +function tooltipWidget(widgetName, explanation, maxheight, clickable) { + var rect = tutorialControl.getRect(widgetName) + var component = Qt.createComponent("TooltipArea.qml") + if (component.status === Component.Error) { + console.log("b" + component.errorString()) + } + if (typeof clickable === 'undefined') { + clickable = false + } + if ((typeof maxheight === 'undefined') || maxheight === 0) { + maxheight = rect.height + } + + var obj = component.createObject(tutToplevel, + { "x" : rect.x, + "y" : rect.y, + "width" : rect.width, + "height" : maxheight + }) + obj.tooltipText = explanation + obj.clickable = clickable + obj.visible = true + + tooltips.push(obj) +} + +function tooltipAction(actionName, explanation, maxheight, clickable) { + var rect = tutorialControl.getActionRect(actionName) + var component = Qt.createComponent("TooltipArea.qml") + if (typeof clickable === 'undefined') { + clickable = false + } + if ((typeof maxheight === 'undefined') || maxheight === 0) { + maxheight = rect.height + } + var obj = component.createObject(tutToplevel, + { "x" : rect.x, + "y" : rect.y, + "width" : rect.width, + "height" : maxheight + }) + obj.tooltipText = explanation + obj.clickable = clickable + obj.visible = true + + tooltips.push(obj) +} + +function setupTooptips() { + for (var tip in tooltips) { + tooltips[tip].destroy() + } + tooltips = [] + + tooltipWidget("modList", qsTr("This window shows all the mods that are installed. The column headers can be used for sorting. Only checked mods are active in the current profile.")) + tooltipWidget("profileBox", qsTr("Each profile is a separate set of enabled mods and ini settings.")) + tooltipWidget("groupCombo", qsTr("The dropdown allows various ways of grouping the mods shown in the mod list.")) + tooltipWidget("displayCategoriesBtn", qsTr("Show/hide the category pane.")) + tooltipWidget("modFilterEdit", qsTr("Quickly filter the mod list as you type.")) + tooltipWidget("qt_tabwidget_tabbar", qsTr("Switch between information views."), 0, true) + tooltipWidget("categoriesList", qsTr("This shows mod categories and some meta categories (in angle-brackets). Select some to filter the mod list. For example select \"\" to show only active mods.")) + tooltipWidget("executablesListBox", qsTr("Customizable list for choosing the program to run.")) + tooltipWidget("startButton", qsTr("When this button is clicked, Mod Organizer creates a virtual directory structure then runs the program selected to the left.")) + tooltipWidget("linkButton", qsTr("Will create a shortcut for quick access. The shortcut can be placed in the toolbar at the top, in the Start Menu or on the Windows Desktop.")) + tooltipWidget("logList", qsTr("Log messages produced by MO. Please note that messages with a light bulb usually don't require your attention.")) + + tooltipAction("actionSettings", qsTr("Configure Mod Organizer.")) + tooltipAction("actionProblems", qsTr("Reports potential Problems about the current setup.")) + tooltipAction("actionUpdate", qsTr("Activates if there is an update for MO. Please note that if, for any reason, MO can't communicate with NMM, this will not work either.")) + + switch (manager.findControl("tabWidget").currentIndex) { + case 0: + tooltipWidget("espList", qsTr("Plugins (esp/esm files) of the mods in the current profile. They need to be checked to be loaded.")) + tooltipWidget("bossButton", qsTr("Automatically sort plugins using the bundled LOOT application.")) + tooltipWidget("espFilterEdit", qsTr("Quickly filter plugin list as you type.")) + break + case 1: + tooltipWidget("bsaList", qsTr("All the asset archives (.bsa files) for all active mods.")) + break + case 2: + tooltipWidget("dataTree", qsTr("The directory tree and all files that the program will see.")) + break + case 3: + tooltipWidget("savegameList", qsTr("Save game browser. Shows all the saves for the current profile and whether or not the current mod-load status is correct.")) + break + case 4: + tooltipWidget("downloadView", qsTr("Shows the mods that have been downloaded and if they’ve been installed.")) + break + } +} + +function getTutorialSteps() { + return [ + function() { + tutorial.text = qsTr("Click to quit") + + setupTooptips() + + onTabChanged(setupTooptips) + + waitForClick() + } + ] +} + + diff --git a/src/tutorials/tutorials.js b/src/tutorials/tutorials.js index f2b18856..eb23eab7 100644 --- a/src/tutorials/tutorials.js +++ b/src/tutorials/tutorials.js @@ -52,15 +52,25 @@ function clickNext() function nextStep() { - waitingForClick = false; - description.continueVisible = false - if (step < tutorialSteps.length) { - tutorialControl.lockUI(false) - step++ - tutorialSteps[step - 1]() - } else { - tutorialControl.finish() - } + waitingForClick = false; + description.continueVisible = false + if (step < tutorialSteps.length) { + tutorialControl.lockUI(false) + step++ + tutorialSteps[step - 1]() + } else { + tutorialControl.finish() + } +} + +function sameStep() +{ + tutorialSteps[step - 1]() +} + +function onTabChanged(func) +{ + tutToplevel.tabChanged.connect(func) } function init() -- cgit v1.3.1