Merge pull request #2 from CESNET/next

Update theme for next big ownCloud server update

.github/workflows/php.yml

@@ -0,0 +1,28 @@
+name: PHP Composer Build
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    container: owncloudci/php:7.3
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '15'
+      - name: Install build dependencies
+        working-directory: build
+        run: npm install
+      - name: Build scss assets
+        working-directory: build
+        run: npm run build-all
+      - name: Build app distribution
+        run: tar -czvf theme-cesnet.tar.gz appinfo apps core *.php README.md LICENSE AUTHORS.md
+      - name: Release app distribution assets
+        if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags')
+        uses: softprops/action-gh-release@v1
+        with:
+          files: theme-cesnet.tar.gz
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

LICENSE

@@ -1,4 +1,4 @@
-GNU AFFERO GENERAL PUBLIC LICENSE
+                    GNU AFFERO GENERAL PUBLIC LICENSE
                        Version 3, 19 November 2007
 
  Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
@@ -658,4 +658,4 @@ specific requirements.
   You should also get your employer (if you work as a programmer) or school,
 if any, to sign a "copyright disclaimer" for the program, if necessary.
 For more information on this, and how to apply and follow the GNU AGPL, see
-<http://www.gnu.org/licenses/>.
+<http://www.gnu.org/licenses/>.

README.md

@@ -1,9 +1,2 @@
-theme-cesnet
-==============
-
-CESNET branded ownCloud theme with specifics
-for the ownCloud@CESNET instance.
-
-To use this theme, just clone it to the apps folder
-of your ownCloud installation and enable the app from
-the Admin interface.
+## theme-cesnet for ownCloud
+![image](docs/screenshot.png)

appinfo/info.xml

@@ -1,16 +1,16 @@
 <?xml version="1.0"?>
 <info>
 	<id>theme-cesnet</id>
-	<name>CESNET Theme</name>
-	<description>This is a theme used by the ownCloud@CESNET instance.</description>
+	<name>CESNET ownCloud Theme</name>
+	<description>Custom theme for the ownCloud@CESNET server.</description>
 	<licence>AGPL</licence>
 	<author>Miroslav Bauer @ CESNET</author>
-	<version>1.0.0</version>
+	<version>2.0.0</version>
 	<types>
 		<theme/>
 	</types>
 	<dependencies>
-		<owncloud min-version="10.0" max-version="10.0" />
+		<owncloud min-version="10.2" max-version="10" />
 	</dependencies>
 	<namespace>Theme</namespace>
 </info>

build/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "cesnet-brand",
+  "version": "1.0.0",
+  "description": "",
+  "main": "sass/bulma.scss",
+  "scripts": {
+    "cubes-build": "node-sass --omit-source-map-url sass/cubes.scss ../core/css/cubes.min.css --output-style compressed",
+    "bulma-build": "node-sass --omit-source-map-url sass/bulma.scss ../core/css/bulma.min.css --output-style compressed",
+    "build-all": "npm run bulma-build && npm run cubes-build",
+    "css-watch": "npm run bulma-build -- --watch",
+    "start": "npm run css-watch"
+  },
+  "author": "Miroslav Bauer @ CESNET",
+  "license": "MIT",
+  "devDependencies": {
+    "bulma": "^0.9.2",
+    "node-sass": "^6.0.0"
+  }
+}

build/sass/_colors.scss

@@ -0,0 +1,15 @@
+@charset "utf-8";
+
+$datacare: #a70057;
+$grey-dark: hsl(0, 0%, 29%);
+$grey-darker: hsl(0, 0%, 21%);
+
+$primary: #0068a2;
+$link:  $datacare;
+$info: #00A1DE;
+$success: #008547;
+$warning: #FBB731;
+$danger: #E60000;
+$dark: $grey-darker;
+$text: $grey-dark;
+$orange: #d33d39;

build/sass/bulma.scss

@@ -0,0 +1,23 @@
+@charset "utf-8";
+@import "colors";
+
+$size-1: 6rem !default;
+$size-2: 4.5rem !default;
+$size-3: 3rem !default;
+
+@import "../node_modules/bulma/sass/utilities/_all.sass";
+@import "../node_modules/bulma/sass/base/_all.sass";
+@import "../node_modules/bulma/sass/elements/button.sass";
+@import "../node_modules/bulma/sass/elements/container.sass";
+@import "../node_modules/bulma/sass/elements/title.sass";
+@import "../node_modules/bulma/sass/elements/content.sass";
+@import "../node_modules/bulma/sass/components/navbar.sass";
+@import "../node_modules/bulma/sass/components/message.sass";
+@import "../node_modules/bulma/sass/components/level.sass";
+@import "../node_modules/bulma/sass/layout/hero.sass";
+@import "../node_modules/bulma/sass/layout/section.sass";
+@import "../node_modules/bulma/sass/grid/columns.sass";
+@import "../node_modules/bulma/sass/helpers/typography.sass";
+@import "../node_modules/bulma/sass/helpers/spacing.sass";
+@import "../node_modules/bulma/sass/helpers/visibility.sass";
+

build/sass/cubes.scss

@@ -0,0 +1,202 @@
+@charset "utf-8";
+/*
+Copyright (c) 2021 by Jon Ambas (https://codepen.io/jonambas/pen/OPqbzx)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+$cube-size: 85;
+$animation-duration: 7.7s;
+$easing: cubic-bezier(0.645, 0.045, 0.355, 1);
+$base-matrix: matrix(0.9, 0.5, 0, 1, 0, 0);
+
+@import "colors";
+
+@function base($n) {
+  @return $n * ($cube-size - 1px);
+}
+
+.layer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  &.top {
+    animation: $animation-duration top $easing infinite;
+  }
+  &.bottom {
+    animation: $animation-duration bottom $easing infinite;
+  }
+}
+
+$radial-map: (
+        "n": (
+                x1: base(1),
+                y1: base(-1),
+                x2: base(1),
+                y2: base(-1),
+                x3: base(2),
+                y3: base(-2),
+                x4: base(2),
+                y4: base(-2)
+        ),
+        "s": (
+                x1: base(-1),
+                y1: base(1),
+                x2: base(-1),
+                y2: base(1),
+                x3: base(-2),
+                y3: base(2),
+                x4: base(-2),
+                y4: base(2)
+        ),
+        "e": (
+                x1: base(1),
+                y1: 0,
+                x2: base(2),
+                y2: 0,
+                x3: base(2),
+                y3: 0,
+                x4: base(1),
+                y4: 0
+        ),
+        "w": (
+                x1: base(-1),
+                y1: 0,
+                x2: base(-2),
+                y2: 0,
+                x3: base(-2),
+                y3: 0,
+                x4: base(-1),
+                y4: 0
+        ),
+        "ne": (
+                x1: base(2),
+                y1: base(-1),
+                x2: base(3),
+                y2: base(-1),
+                x3: base(4),
+                y3: base(-2),
+                x4: base(3),
+                y4: base(-2)
+        ),
+        "se": (
+                x1: 0,
+                y1: base(1),
+                x2: base(1),
+                y2: base(1),
+                x3: base(0),
+                y3: base(2),
+                x4: base(-1),
+                y4: base(2)
+        ),
+        "sw": (
+                x1: base(-2),
+                y1: base(1),
+                x2: base(-3),
+                y2: base(1),
+                x3: base(-4),
+                y3: base(2),
+                x4: base(-3),
+                y4: base(2)
+        ),
+        "nw": (
+                x1: base(0),
+                y1: base(-1),
+                x2: base(-1),
+                y2: base(-1),
+                x3: base(0),
+                y3: base(-2),
+                x4: base(1),
+                y4: base(-2)
+        )
+);
+
+@each $position, $points in $radial-map {
+  .#{$position} {
+    animation: $animation-duration $position $easing infinite;
+  }
+  @keyframes #{$position} {
+    0%,
+    83.33%,
+    100% {
+      transform: $base-matrix
+      translate(map-get($points, x1), map-get($points, y1));
+    }
+    16.66% {
+      transform: $base-matrix
+      translate(map-get($points, x2), map-get($points, y2));
+    }
+    33.33%,
+    50% {
+      transform: $base-matrix
+      translate(map-get($points, x3), map-get($points, y3));
+    }
+    66.66% {
+      transform: $base-matrix
+      translate(map-get($points, x4), map-get($points, y4));
+    }
+  }
+}
+
+.cube {
+  position: absolute;
+  top: 45%;
+  left: 45%;
+  width: $cube-size + 0px;
+  height: $cube-size + 0px;
+  margin: 0 auto;
+  background: $orange;
+  transform: $base-matrix;
+
+  &:before,
+  &:after {
+    display: block;
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  &:before {
+    background: $warning;
+    transform: matrix(1, -1, 1, 0, $cube-size / 2, -$cube-size);
+  }
+
+  &:after {
+    background: $link;
+    transform: matrix(1, -1, 0, 1, $cube-size, -$cube-size / 2);
+  }
+}
+
+@keyframes top {
+  0%,
+  33.33%,
+  100% {
+    transform: translate(0, base(-1));
+  }
+  50%,
+  83.33% {
+    transform: translate(0, base(-2));
+  }
+}
+@keyframes bottom {
+  0%,
+  33.33%,
+  100% {
+    transform: translate(0, base(1));
+  }
+  50%,
+  83.33% {
+    transform: translate(0, base(2));
+  }
+}