Refine user interaction [DISCL-394]

doc/Changelog.md

@@ -2,8 +2,16 @@ Changelog {#changelog}
 ============
 
 # Release 1.2 (git master)
+
+* [95](https://github.com/BlueBrain/Tide/pull/95):
+  More consistent and intuitive user experience:
+  - Double-tap a window to make it fullscreen
+  - To present multiple contents side by side, select them on the Desktop with a
+    single tap then press any of their "eye" icons.
+  - Tap the background to exit any presentation mode.
+  - On the Desktop, tap the background to unselect all windows.
 * [93](https://github.com/BlueBrain/Tide/pull/93):
-  Adding a whiteboard application [DISCL-137] :
+  Added a whiteboard application with support for:
   - Drawing in multiple colors and with different brush sizes
   - Saving an image to a png file
   - Extending/shrinking a canvas on the size change of applications window

tests/cpp/core/DisplayGroupTests.cpp

@@ -104,12 +104,12 @@ BOOST_AUTO_TEST_CASE( testWindowZorder )
 
     BOOST_CHECK_EQUAL( group->getZindex( window2 ), 2 );
 
-    group->moveContentWindowToFront( window1 );
+    group->moveToFront( window1 );
     BOOST_CHECK_EQUAL( group->getZindex( window0 ), 0 );
     BOOST_CHECK_EQUAL( group->getZindex( window2 ), 1 );
     BOOST_CHECK_EQUAL( group->getZindex( window1 ), 2 );
 
-    group->moveContentWindowToFront( window0 );
+    group->moveToFront( window0 );
     BOOST_CHECK_EQUAL( group->getZindex( window2 ), 0 );
     BOOST_CHECK_EQUAL( group->getZindex( window1 ), 1 );
     BOOST_CHECK_EQUAL( group->getZindex( window0 ), 2 );

tests/cpp/core/VisibilityHelperTests.cpp

@@ -163,7 +163,7 @@ BOOST_FIXTURE_TEST_CASE( testUnderlyingWindow, Fixture )
     BOOST_CHECK_EQUAL( helper.getVisibleArea( *window ), QRectF( ));
     BOOST_CHECK_EQUAL( helper.getVisibleArea( *otherWindow ), coord );
 
-    group->moveContentWindowToFront( window );
+    group->moveToFront( window );
     BOOST_CHECK_EQUAL( helper.getVisibleArea( *otherWindow ), QRectF( ));
     BOOST_CHECK_EQUAL( helper.getVisibleArea( *window ), coord );
 }

tide/core/resources/BaseContentWindow.qml

@@ -31,7 +31,7 @@ Rectangle {
     y: contentArea.posY - yOffset
     width: contentArea.width + border.width * 2
     height: contentArea.height + border.width + yOffset // top + bottom padding
-    z: isBackground ? Style.backgroundZOrder : 0
+    z: isBackground ? Style.backgroundZOrder : contentwindow.isPanel ? Style.panelsZorder : 0
 
     Loader {
         id: backgroundLoader
@@ -166,7 +166,7 @@ Rectangle {
         delegate: Triangle {
         }
         delegateOverflow: windowRect.border.width
-        visible: (contentwindow.controlsVisible || contentwindow.focused ||
+        visible: (contentwindow.selected || contentwindow.focused ||
                   contentwindow.fullscreen) &&
                  contentwindow.content.page !== undefined &&
                  contentwindow.content.page > 0
@@ -181,7 +181,7 @@ Rectangle {
         }
         delegateOverflow: windowRect.border.width
         flipRight: true
-        visible: (contentwindow.controlsVisible || contentwindow.focused ||
+        visible: (contentwindow.selected || contentwindow.focused ||
                   contentwindow.fullscreen) &&
                  contentwindow.content.page !== undefined &&
                  contentwindow.content.page < contentwindow.content.pageCount - 1
@@ -190,6 +190,7 @@ Rectangle {
     WindowControls {
         id: windowControls
         contentActionsVisible: !controlBar.visible
+        color: windowRect.border.color
     }
 
     ResizeCircles {
@@ -233,6 +234,14 @@ Rectangle {
                 z: Style.focusZorder
             }
         },
+        State {
+            name: "selected"
+            when: contentwindow.selected
+            PropertyChanges {
+                target: windowRect
+                border.color: Style.windowBorderSelectedColor
+            }
+        },
         State {
             name: "moving"
             when: contentwindow.state === ContentWindow.MOVING
@@ -269,7 +278,7 @@ Rectangle {
     transitions: [
         Transition {
             from: "focused"
-            to: ""
+            to: "selected,"     // selected AND default state ""
             id: unfocusTransition
             SequentialAnimation {
                 // Slide behind other focused windows for the transition

tide/core/resources/DisplayGroup.qml

@@ -6,6 +6,7 @@ Item {
     id: displaygroupitem
 
     property alias showFocusContext: focuscontext.visible
+    property alias focusContextZorder: focuscontext.z
     property alias sideControl: sideControl
 
     width: displaygroup.width
@@ -52,6 +53,15 @@ Item {
                 target: focuscontext
                 opacity: Style.focusContextOpacity
             }
+        },
+        State {
+            name: "panels"
+            when: displaygroup.hasVisiblePanels
+            PropertyChanges {
+                target: focuscontext
+                opacity: Style.focusContextPanelsOpacity
+                z: Style.panelsBackgroundZorder
+            }
         }
     ]
 }

tide/core/resources/ResizeCircles.qml

@@ -9,7 +9,7 @@ Rectangle {
     property alias delegate: repeater.delegate
 
     visible: !contentwindow.isPanel
-             && contentwindow.controlsVisible
+             && contentwindow.selected
              && contentwindow.mode === ContentWindow.STANDARD
     opacity: Style.resizeCircleOpacity
 

tide/core/resources/SideControl.qml

@@ -15,8 +15,8 @@ SideButton {
         anchors.fill: parent
         anchors.margins: sideControl.innerMargin * parent.width
         Image {
-            source: displaygroup.hasFullscreenWindows ? "qrc:/img/exit.svg" :
-                    displaygroup.hasFocusedWindows ? "qrc:/img/focus.svg" :
+            source: displaygroup.hasFullscreenWindows ||
+                    displaygroup.hasFocusedWindows ? "qrc:/img/exit.svg" :
                                                      "qrc:/img/launch.svg"
             width: parent.width
             height: width

tide/core/resources/WindowControls.qml

@@ -10,7 +10,7 @@ Rectangle {
     width: buttons.width + radius + (Style.buttonsSize * (1.0 - Style.buttonsImageRelSize))
     height: buttons.height + (Style.buttonsSize * (1.0 - Style.buttonsImageRelSize))
     color: Style.controlsDefaultColor
-    border.color: Style.controlsDefaultColor
+    border.color: color
     border.width: Style.controlsBorderWidth
     radius: Style.controlsRadius
     anchors.right: parent.left
@@ -52,19 +52,14 @@ Rectangle {
             name: "focus_mode"
             when: contentwindow.focused
             extend: "opaque"
-            PropertyChanges {
-                target: windowControls
-                color: Style.controlsFocusedColor
-                border.color: Style.controlsFocusedColor
-            }
             PropertyChanges {
                 target: buttons
                 fixed_buttons_count: 3
             }
         },
         State {
             name: "opaque"
-            when: contentwindow.controlsVisible &&
+            when: contentwindow.selected &&
                   contentwindow.state !== ContentWindow.RESIZING &&
                   !contentwindow.fullscreen
             PropertyChanges {
@@ -82,8 +77,6 @@ Rectangle {
                 duration: Style.focusTransitionTime
                 easing.type: Easing.InOutQuad
             }
-            ColorAnimation { duration: Style.focusTransitionTime }
-            ColorAnimation { target: border; duration: Style.focusTransitionTime }
         }
     ]
 }

tide/core/resources/style.js

@@ -8,6 +8,8 @@ var contrastColor = "black"; // black
 
 // General
 var backgroundZOrder = -1;
+var panelsBackgroundZorder = 96;
+var panelsZorder = 97;
 var focusBackgroundZorder = 98;
 var unfocusZorder = 99;
 var focusZorder = 100;
@@ -18,6 +20,7 @@ var overlayZorder = 1000;
 
 var focusContextColor = "black"
 var focusContextOpacity = 0.7;
+var focusContextPanelsOpacity = 0.5;
 var focusContextFullscreenOpacity = 0.99;
 var focusTransitionTime = 500;
 var panelsAnimationTime = 300
@@ -64,7 +67,7 @@ var transparentContentsBackgroundColor = "black";
 
 var windowBorderWidth = 24;
 var windowBorderDefaultColor = baseColor;
-var windowBorderSelectedColor = baseColor;
+var windowBorderSelectedColor = activeColor;
 var windowBorderFocusedColor = activeColor;
 var windowBorderMovingColor = baseColor;
 var windowBorderResizingColor = baseColor;

tide/core/scene/ContentWindow.cpp

@@ -51,7 +51,7 @@ ContentWindow::ContentWindow( ContentPtr content, const WindowType type )
     , _resizePolicy( KEEP_ASPECT_RATIO )
     , _mode( WindowMode::STANDARD )
     , _windowState( NONE )
-    , _controlsVisible( false )
+    , _selected( false )
 {
     assert( content );
     _init();
@@ -65,7 +65,7 @@ ContentWindow::ContentWindow()
     , _resizePolicy( KEEP_ASPECT_RATIO )
     , _mode( WindowMode::STANDARD )
     , _windowState( NONE )
-    , _controlsVisible( false )
+    , _selected( false )
 {}
 
 ContentWindow::~ContentWindow() {}
@@ -284,18 +284,18 @@ QString ContentWindow::getLabel() const
     return _content->getURI().section( "/", -1, -1 );
 }
 
-bool ContentWindow::getControlsVisible() const
+bool ContentWindow::isSelected() const
 {
-    return _controlsVisible;
+    return _selected;
 }
 
-void ContentWindow::setControlsVisible( const bool value )
+void ContentWindow::setSelected( const bool value )
 {
-    if( value == _controlsVisible )
+    if( value == _selected )
         return;
 
-    _controlsVisible = value;
-    emit controlsVisibleChanged();
+    _selected = value;
+    emit selectedChanged();
     emit modified();
 }
 

tide/core/scene/ContentWindow.h

@@ -75,8 +75,8 @@ class ContentWindow : public Rectangle
     Q_PROPERTY( ResizePolicy resizePolicy READ getResizePolicy
                 WRITE setResizePolicy NOTIFY resizePolicyChanged )
     Q_PROPERTY( QString label READ getLabel NOTIFY labelChanged )
-    Q_PROPERTY( bool controlsVisible READ getControlsVisible
-                WRITE setControlsVisible NOTIFY controlsVisibleChanged )
+    Q_PROPERTY( bool selected READ isSelected
+                WRITE setSelected NOTIFY selectedChanged )
 
 public:
     /** The current active resize handle. */
@@ -125,7 +125,8 @@ class ContentWindow : public Rectangle
     enum WindowType
     {
         DEFAULT,    // A regular window
-        PANEL       // A panel window - always interative, cannot be focused
+        PANEL       // An overlay window without a control bar, cannot be
+                    // focused or fullscreen
     };
     Q_ENUMS( WindowType )
 
@@ -144,7 +145,7 @@ class ContentWindow : public Rectangle
     /** @return the unique identifier for this window. */
     const QUuid& getID() const;
 
-    /** Is the window a panel */
+    /** @return true if window is a panel. */
     bool isPanel() const;
 
     /** Get the content from QML. */
@@ -215,11 +216,11 @@ class ContentWindow : public Rectangle
     /** Get the label for the window */
     QString getLabel() const;
 
-    /** Get the visibility of the window control buttons. */
-    bool getControlsVisible() const;
+    /** @return true if the window is selected. */
+    bool isSelected() const;
 
-    /** Set the visibility of the window control buttons. */
-    void setControlsVisible( bool value );
+    /** Select or deselect the window. */
+    void setSelected( bool value );
 
 public slots:
     /** Set the current active resize handle. */
@@ -253,7 +254,7 @@ public slots:
     void fullscreenCoordinatesChanged();
     void stateChanged();
     void labelChanged();
-    void controlsVisibleChanged();
+    void selectedChanged();
     void hiddenChanged( bool hidden );
     //@}
 
@@ -277,7 +278,7 @@ public slots:
         ar & _focusedCoordinates;
         ar & _fullscreenCoordinates;
         ar & _windowState;
-        ar & _controlsVisible;
+        ar & _selected;
     }
 
     /** Serialize members to and from xml. */
@@ -347,7 +348,7 @@ public slots:
     QRectF _focusedCoordinates;
     QRectF _fullscreenCoordinates;
     ContentWindow::WindowState _windowState;
-    bool _controlsVisible;
+    bool _selected;
 };
 
 BOOST_CLASS_VERSION( ContentWindow, 3 )