From ef06f21d2a03cfda4347682c4fbdafcfebd5e30b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Sun, 23 Dec 2018 15:33:31 +0100 Subject: [PATCH] Add basic board view MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- css/style.scss | 7 +- package.json | 1 + src/components/board/Board.vue | 58 +++++++++++- src/components/card/CardSidebar.vue | 45 ++++++++++ src/components/cards/CardBadges.vue | 71 +++++++++++++++ src/components/cards/CardItem.vue | 131 ++++++++++++++++++++++++++++ src/components/cards/LabelTag.vue | 40 +++++++++ src/mixins/color.js | 85 ++++++++++++++++++ src/services/StackApi.js | 109 +++++++++++++++++++++++ 9 files changed, 538 insertions(+), 9 deletions(-) create mode 100644 src/components/card/CardSidebar.vue create mode 100644 src/components/cards/CardBadges.vue create mode 100644 src/components/cards/CardItem.vue create mode 100644 src/components/cards/LabelTag.vue create mode 100644 src/mixins/color.js create mode 100644 src/services/StackApi.js diff --git a/css/style.scss b/css/style.scss index 40fba0d0a..c5aa3ef50 100644 --- a/css/style.scss +++ b/css/style.scss @@ -526,11 +526,6 @@ input.input-inline { margin-right: 2px; } } - - button { - padding: 22px; - margin: 0; - } } a { @@ -1537,7 +1532,7 @@ input.input-inline { table { margin-bottom: 10px; border-collapse: collapse; - + thead { background-color: var(--color-background-dark, $color-lightgrey); } diff --git a/package.json b/package.json index 6e85c000e..0e3f276ec 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "vue-click-outside": "^1.0.7", "vue-infinite-loading": "^2.4.1", "vue-router": "^3.0.1", + "vue-smooth-dnd": "^0.2.8", "vuex": "^3.0.1", "vuex-router-sync": "^5.0.0" }, diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue index f5d8d903d..02bdaa39e 100644 --- a/src/components/board/Board.vue +++ b/src/components/board/Board.vue @@ -25,20 +25,61 @@
board {{ board.title }}
+ + + + +

{{ stack.title }}

+ + + + +
+ + diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue new file mode 100644 index 000000000..4fb829e59 --- /dev/null +++ b/src/components/cards/CardBadges.vue @@ -0,0 +1,71 @@ + + + + + + diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue new file mode 100644 index 000000000..cbc3cef0d --- /dev/null +++ b/src/components/cards/CardItem.vue @@ -0,0 +1,131 @@ + + + + + + + diff --git a/src/components/cards/LabelTag.vue b/src/components/cards/LabelTag.vue new file mode 100644 index 000000000..1db9fb66c --- /dev/null +++ b/src/components/cards/LabelTag.vue @@ -0,0 +1,40 @@ + + + + + + diff --git a/src/mixins/color.js b/src/mixins/color.js new file mode 100644 index 000000000..7f2397ebd --- /dev/null +++ b/src/mixins/color.js @@ -0,0 +1,85 @@ +/* + * @copyright Copyright (c) 2018 Julius Härtl + * + * @author Julius Härtl + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + +export default { + methods: { + hexToRgb(hex) { + let result = /^#?([A-Fa-f\d]{2})([A-Fa-f\d]{2})([A-Fa-f\d]{2})$/i.exec(hex) + return result + ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : null + }, + rgb2hls(rgb) { + // RGB2HLS by Garry Tan + // http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c + const r = rgb.r / 255 + const g = rgb.g / 255 + const b = rgb.b / 255 + let max = Math.max(r, g, b) + let min = Math.min(r, g, b) + let h + let s + let l = (max + min) / 2 + + if (max === min) { + h = s = 0 // achromatic + } else { + const d = max - min + s = l > 0.5 ? d / (2 - max - min) : d / (max + min) + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0) + break + case g: + h = (b - r) / d + 2 + break + case b: + h = (r - g) / d + 4 + break + } + h /= 6 + } + return { + h, l, s + } + }, + textColor(hex) { + + let rgb = this.hexToRgb(hex) + if (rgb === null) { + return '#000000' + } + const { l } = this.rgb2hls(rgb) + + if (l < 0.5) { + return '#ffffff' + } else { + return '#000000' + } + + } + + } +} diff --git a/src/services/StackApi.js b/src/services/StackApi.js new file mode 100644 index 000000000..5b2785117 --- /dev/null +++ b/src/services/StackApi.js @@ -0,0 +1,109 @@ +/* + * @copyright Copyright (c) 2018 Michael Weimann + * + * @author Michael Weimann + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + +import axios from 'nextcloud-axios' + +/** + * This class handles all the api communication with the Deck backend. + */ +export class BoardApi { + + url(url) { + url = `/apps/deck${url}` + return OC.generateUrl(url) + } + + /** + * Updates a board. + * + * @param {Board} board + * @return Promise + */ + updateBoard(board) { + return axios.put(this.url(`/boards/${board.id}`), board) + .then( + (response) => { + return Promise.resolve(response.data) + }, + (err) => { + return Promise.reject(err) + } + ) + .catch((err) => { + return Promise.reject(err) + }) + } + + /** + * Creates a new board. + * + * @param {{String title, String color, String hashedColor}} boardData The board data to send. + * hashedColor is the color in hex format, e.g. "#ff0000" + * color is the same color without the "#" + * @return Promise + */ + createBoard(boardData) { + return axios.post(this.url('/boards'), boardData) + .then( + (response) => { + return Promise.resolve(response.data) + }, + (err) => { + return Promise.reject(err) + } + ) + .catch((err) => { + return Promise.reject(err) + }) + } + + loadBoards() { + return axios.get(this.url('/boards')) + .then( + (response) => { + return Promise.resolve(response.data) + }, + (err) => { + return Promise.reject(err) + } + ) + .catch((err) => { + return Promise.reject(err) + }) + } + + loadById(id) { + return axios.get(this.url(`/boards/${id}`)) + .then( + (response) => { + return Promise.resolve(response.data) + }, + (err) => { + return Promise.reject(err) + } + ) + .catch((err) => { + return Promise.reject(err) + }) + } + +}