initial commit

Author: Plaristote

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+package-lock.json

background/Button.qml

@@ -0,0 +1,49 @@
+import QtQuick 2.0
+
+Rectangle {
+  id: buttonBackground
+  color: parent.enabled ? parent.Material.primary : "#E0E0E0"
+  radius: 4
+  clip: true
+
+  Component.onCompleted: {
+    buttonBackground.dom.style.boxShadow = "rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px";
+    buttonBackground.dom.style.cursor = "pointer";
+  }
+
+  // Ripple
+  Rectangle {
+    id: ripple
+    color: "white"
+    anchors.centerIn: parent
+    radius: 999
+    width: 1
+    height: 1
+    opacity: 0
+  }
+  NumberAnimation {
+    id: rippleAnimationPart1
+    target: ripple
+    properties: "height,width"
+    from: 0
+    to: Math.max(buttonBackground.width, buttonBackground.height) * 1.25
+    onFinished: rippleAnimationPart2.start()
+  }
+  NumberAnimation {
+    id: rippleAnimationPart2
+    target: ripple
+    properties: "opacity"
+    from: 0.32
+    to: 0
+  }
+  Connections {
+    target: buttonBackground.parent
+    onDownChanged: {
+      if (buttonBackground.parent.down) {
+        ripple.opacity = 0.32;
+        ripple.height = ripple.width = 1;
+        rippleAnimationPart1.start();
+      }
+    }
+  }
+}

background/Popup.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.0
+
+Rectangle {
+  color: "white"
+  border.width: 1
+  border.color: "gray"
+}

background/ScrollBar.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.0
+
+Rectangle {
+  color: "transparent"
+  height: parent.orientation == Qt.Vertical ? parent.height : 20
+  width: parent.orientation == Qt.Vertical ? 20 : parent.width
+  anchors {
+    bottom: parent.bottom
+    right: parent.right
+  }
+}

content/Button.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.0
+
+Text {
+  anchors.centerIn: parent
+  text: parent.$formatLabel(parent.text.toUpperCase(), parent.display, parent.icon)
+  color: parent.enabled ? "white" : "grey"
+  font.size: 14
+  font.weight: 500
+  font.family: "Roboto"
+  horizontalAlignment: Text.AlignHCenter
+}

content/ScrollBar.qml

@@ -0,0 +1,12 @@
+import QtQuick 2.0
+
+Rectangle {
+  color: "lightgrey"
+  opacity: parent.active ? 1 : 0
+  radius: 25
+  implicitWidth: parent.orientation == Qt.Vertical ? 20 : null
+  implicitHeight: parent.orientation == Qt.Horizontal ? 20 : null
+  Behavior on opacity {
+    NumberAnimation { duration: 300 }
+  }
+}

dist/controls2.material.js

@@ -0,0 +1,24 @@
+var gulp = require("gulp");
+var qrc = require("gulp-qmlweb");
+var concat = require("gulp-concat");
+var sources = ["material.js"];
+var resourceFile = "material.qrc";
+
+gulp.task("rcc", function() {
+  return gulp.src(resourceFile)
+    .pipe(qrc({
+      filename: "controls2.material.rc.js",
+      src: "QmlWeb.newControls2Style(\"Material\", QtQuick_Controls_Material, {{object}});"
+    }))
+    .pipe(gulp.dest("./dist"));
+});
+
+gulp.task("build", gulp.series("rcc", function() {
+  return gulp.src(sources.concat(["dist/controls2.material.rc.js"]))
+    .pipe(concat("controls2.material.js"))
+    .pipe(gulp.dest("./dist"));
+}));
+
+gulp.task("watch", gulp.series("build", function() {
+  return gulp.watch(sources.concat([qrc]), gulp.series("build"));
+}));

gulpfile.js

@@ -0,0 +1,59 @@
+const materialColors = {
+  Red: new QmlWeb.QColor("#F44336"),
+  Pink: new QmlWeb.QColor("#E91E63"),
+  Purple: new QmlWeb.QColor("#9C27B0"),
+  DeepPurple: new QmlWeb.QColor("#673AB7"),
+  Indigo: new QmlWeb.QColor("#3F51B5"),
+  Blue: new QmlWeb.QColor("#21963F"),
+  LightBlue: new QmlWeb.QColor("#03A9F4"),
+  Cyan: new QmlWeb.QColor("#00BCD4"),
+  Teal: new QmlWeb.QColor("#009688"),
+  Green: new QmlWeb.QColor("#4CAF50"),
+  LightGreen: new QmlWeb.QColor("#88C34A"),
+  Lime: new QmlWeb.QColor("#CDDC39"),
+  Yellow: new QmlWeb.QColor("#FFEB3B"),
+  Amber: new QmlWeb.QColor("#FFC107"),
+  Orange: new QmlWeb.QColor("#FF9800"),
+  DeepOrange: new QmlWeb.QColor("#FF5722"),
+  Brown: new QmlWeb.QColor("#795548"),
+  Grey: new QmlWeb.QColor("#9E9E9E"),
+  BlueGrey: new QmlWeb.QColor("#607D8B")
+};
+
+function prepareRoboto() {
+  if (!window._roboto_initialized) {
+    const link = document.createElement("link");
+    link.setAttribute("rel", "stylesheet");
+    link.setAttribute("type", "text/css");
+    link.setAttribute("href", "http://fonts.cdnfonts.com/css/roboto");
+    document.head.append(link);
+    window._roboto_initialized = true;
+  }
+}
+
+class QtQuick_Controls_Material {
+  static getAttachedObject() {
+    if (!this.$Material) {
+      prepareRoboto();
+      this.$Material = new QmlWeb.QObject(this);
+      this.$Material.Light = 0;
+      this.$Material.Dark = 1;
+      this.$Material.System = 2;
+      for (const color in materialColors) {
+        this.$Material[color] = materialColors[color];
+      }
+      QmlWeb.createProperties(this.$Material, {
+        accent: { type: "color", initialValue: materialColors.Pink },
+        background: { type: "color", initialValue: materialColors.Teal },
+        elevation: { type: "int", initialValue: null },
+        foreground: { type: "color", initialValue: "transparent" },
+        primary: { type: "color", initialValue: materialColors.Indigo },
+        theme: "enum"
+      });
+      QmlWeb.createProperties(this, {
+        Material: { type: "QtObject", initialValue: this.$Material, readOnly: true }
+      });
+    }
+    return this.$Material;
+  }
+}

material.js

@@ -0,0 +1,9 @@
+<RCC>
+  <qresource prefix="/">
+    <file>background/Popup.qml</file>
+    <file>background/Button.qml</file>
+    <file>background/ScrollBar.qml</file>
+    <file>content/Button.qml</file>
+    <file>content/ScrollBar.qml</file>
+  </qresource>
+</RCC>