another progress

app/icons/icons.qrc

@@ -1,6 +1,10 @@
 <RCC>
     <qresource prefix="/">
         <file>Arrow Link Right.svg</file>
+        <file>Back.svg</file>
+        <file>Bubble.svg</file>
+        <file>AcceptInvitationImage.svg</file>
+        <file>AcceptInvitationLogoImage.svg</file>
         <file>Calendar.svg</file>
         <file>Hide.svg</file>
         <file>Search.svg</file>

app/mmstyle.h

@@ -77,6 +77,8 @@ class MMStyle: public QObject
     // Icons
     Q_PROPERTY( QUrl arrowLinkRightIcon READ arrowLinkRightIcon CONSTANT )
     Q_PROPERTY( QUrl searchIcon READ searchIcon CONSTANT )
+    Q_PROPERTY( QUrl backIcon READ backIcon CONSTANT )
+    Q_PROPERTY( QUrl bubbleIcon READ bubbleIcon CONSTANT )
     Q_PROPERTY( QUrl calendarIcon READ calendarIcon CONSTANT )
     Q_PROPERTY( QUrl showIcon READ showIcon CONSTANT )
     Q_PROPERTY( QUrl hideIcon READ hideIcon CONSTANT )
@@ -97,6 +99,8 @@ class MMStyle: public QObject
     // Images
     Q_PROPERTY( QUrl uploadImage READ uploadImage CONSTANT )
     Q_PROPERTY( QUrl reachedDataLimitImage READ reachedDataLimitImage CONSTANT )
+    Q_PROPERTY( QUrl acceptInvitationImage READ acceptInvitationImage CONSTANT )
+    Q_PROPERTY( QUrl acceptInvitationLogoImage READ acceptInvitationLogoImage CONSTANT )
 
     // Map items
     Q_PROPERTY( double mapItemHeight READ mapItemHeight CONSTANT )
@@ -160,6 +164,8 @@ class MMStyle: public QObject
 
     QUrl arrowLinkRightIcon() {return QUrl( "qrc:/Arrow Link Right.svg" );}
     QUrl searchIcon() {return QUrl( "qrc:/Search.svg" );}
+    QUrl backIcon() {return QUrl( "qrc:/Back.svg" );}
+    QUrl bubbleIcon() {return QUrl( "qrc:/Bubble.svg" );}
     QUrl calendarIcon() {return QUrl( "qrc:/Calendar.svg" );}
     QUrl showIcon() {return QUrl( "qrc:/Show.svg" );}
     QUrl hideIcon() {return QUrl( "qrc:/Hide.svg" );}
@@ -177,6 +183,8 @@ class MMStyle: public QObject
     QUrl editIcon() {return QUrl( "qrc:/Edit.svg" );}
     QUrl moreIcon() {return QUrl( "qrc:/More.svg" );}
 
+    QUrl acceptInvitationLogoImage() {return QUrl( "qrc:/AcceptInvitationLogoImage.svg" ); }
+    QUrl acceptInvitationImage() {return QUrl( "qrc:/AcceptInvitationImage.svg" ); }
     QUrl uploadImage() {return QUrl( "qrc:/UploadImage.svg" );}
     QUrl reachedDataLimitImage() {return QUrl( "qrc:/ReachedDataLimitImage.svg" );}
 

app/qml/components/MMBackButton.qml

@@ -0,0 +1,32 @@
+/***************************************************************************
+ *                                                                         *
+ *   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.                                   *
+ *                                                                         *
+ ***************************************************************************/
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import "."
+
+RoundButton {
+  id: control
+
+  implicitWidth: icon.width * 2
+  implicitHeight: icon.height * 2
+
+  contentItem: MMIcon {
+    id: icon
+
+    source: __style.backIcon
+    color: __style.forestColor
+  }
+
+  background: Rectangle {
+    color: control.down || control.hovered ? __style.mediumGreenColor : __style.lightGreenColor
+    radius: control.implicitHeight / 2
+  }
+}

app/qml/onboarding/MMOnboardingHeader.qml → app/qml/components/MMHeader.qml

@@ -25,20 +25,20 @@ RowLayout {
 
   property bool backVisible: true
 
-  RoundButton {
+  MMBackButton {
     visible: backVisible
     onClicked: root.backClicked()
-    text: "<"
   }
 
   Label {
     text: headerTitle
+    font: __style.p2
+    color: __style.forestColor
   }
 
-  ProgressBar {
+  MMProgressBar {
+    width: 50
     visible: step > 0
-    from: 0
-    to: 3
-    value: step > 0 ? step : 0
+    position: step > 0 ? step / 3 : 0
   }
 }

app/qml/onboarding/MMOnboardingHlineText.qml → app/qml/components/MMHlineText.qml

@@ -19,16 +19,21 @@ RowLayout {
   spacing: 10
 
   Rectangle {
+    id: topRect
     width: 50
     height: 1
+    color: __style.forestColor
   }
 
   Label {
     text: title
+    font: __style.p5
+    color: topRect.color
   }
 
   Rectangle {
-    width: 50
-    height: 1
+    width: topRect.width
+    height: topRect.height
+    color: topRect.color
   }
 }

app/qml/components/MMPasswordInput.qml

@@ -14,10 +14,19 @@ import QtQuick.Controls.Basic
 Column {
   id: control
 
+  signal textEdited
+
+  enum MsgShowBehaviour {
+      Never,
+      OnNotMatchingRegex,
+      Always
+  }
+
   property alias title: titleItem.text
   property alias text: textField.text
   property alias placeholderText: textField.placeholderText
-  required property string regexp
+  property string regexp: '.*'
+  property int msgShowBehaviour: MMPasswordInput.OnNotMatchingRegex
   property url iconSource: ""
   property string warningMsg
   property string errorMsg
@@ -77,6 +86,10 @@ Column {
         background: Rectangle {
           color: __style.transparentColor
         }
+
+        onTextEdited: {
+            control.textEdited()
+        }
       }
 
       MMIcon {
@@ -127,6 +140,11 @@ Column {
   }
 
   function isPasswordCorrect(pwd) {
+    if (msgShowBehaviour === MMPasswordInput.Never)
+        return true
+    else if (msgShowBehaviour === MMPasswordInput.Always)
+        return false
+
     let pwdRegexp = new RegExp(control.regexp)
     return pwdRegexp.test(pwd)
   }

app/qml/components/MMTextBubble.qml

@@ -0,0 +1,70 @@
+
+/***************************************************************************
+ *                                                                         *
+ *   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.                                   *
+ *                                                                         *
+ ***************************************************************************/
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Item {
+  id: root
+
+  height: 100
+  width: 300
+
+  required property var title
+  required property var description
+
+  Rectangle {
+      width: root.width
+      height: root.height
+      color: __style.whiteColor
+      radius: 15
+  }
+
+  Row {
+      padding: 10
+      spacing: 10
+      anchors.fill: parent
+
+      Rectangle {
+          implicitWidth: radius * 2
+          implicitHeight: radius * 2
+          // x: control.leftPadding
+          y: parent.height / 2 - height / 2
+          radius: 20
+          color: __style.forestColor
+
+          MMIcon {
+            id: icon
+            anchors.centerIn: parent
+            source: __style.bubbleIcon
+          }
+        }
+
+      Column {
+          id: column
+          width: 2* root.width / 3
+          spacing: 10
+          Label {
+              text: root.title
+              font: __style.t1
+              color: __style.nightColor
+              wrapMode: Label.WordWrap
+          }
+
+          Label {
+              text:root.description
+              font: __style.p5
+              color: __style.forestColor
+              wrapMode: Label.WordWrap
+              width: column.width
+          }
+      }
+  }
+}

app/qml/inputs/MMCheckBox.qml

@@ -18,7 +18,7 @@ CheckBox {
   property bool small: false
 
   width: (control.small ? 16 : 24) * __dp
-  height: width
+  height: control.width
 
   indicator: Rectangle {
     width: control.width

app/qml/onboarding/MMAcceptInvitation.qml

@@ -12,28 +12,69 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 
+import "../components"
+
 Page {
   id: root
 
   signal backClicked
   signal continueClicked
   signal createWorkspaceClicked
 
-  ColumnLayout {
-    MMOnboardingHeader {
+  Column {
+    spacing: 20
+
+    MMHeader {
       headerTitle: qsTr("Accept Invitation")
 
       onBackClicked: root.backClicked()
     }
 
-    ToolButton {
+   Item {
+     width: bg.width
+     height: bg.height
+
+     MMIcon {
+       id: bg
+       source: __style.acceptInvitationImage
+     }
+
+     MMIcon {
+        id: fg
+        x: ( bg.width - fg.width ) / 2 + 7
+        y: ( bg.height - fg.height ) / 2 + 5
+        source: __style.acceptInvitationLogoImage
+     }
+   }
+
+    Label {
+        text: qsTr("You have been invited to workspace")
+        font: __style.t1
+        color: __style.forestColor
+    }
+
+    Label {
+        text: qsTr("User %1 has invited you to join his workspace").arg("andrej")
+        font: __style.p2
+    }
+
+    Label {
+        text: "my-workspace-funny"
+        font: __style.p2
+    }
+
+    MMButton {
       onClicked: root.continueClicked()
-      text: qsTr("Continue")
+      text: qsTr("Join workspace")
+    }
+
+    MMHlineText {
+      title: qsTr("or")
     }
 
-    ToolButton {
+    MMLinkButton {
       onClicked: root.createWorkspaceClicked()
-      text: qsTr("Create Workspace")
+      text: qsTr("Create new workspace")
     }
   }
 }