nextcloud
/
calendar
mirror of https://github.com/nextcloud/calendar
0
0
Fork 0
Code Issues Releases Wiki Activity

refactor ColorService, remove DefaultColorService 

Signed-off-by: Georg Ehrke <developer@georgehrke.com>
This commit is contained in:
Georg Ehrke 2019-09-19 18:00:06 +02:00
parent ca9d7c53a0
commit eec95302a2
No known key found for this signature in database
GPG Key ID: 9D98FD9380A1CB43
12 changed files with 62 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
package-lock.json generated
View File

@ -2175,6 +2175,23 @@
"dev": true,
"requires": {
"color-convert": "^1.9.0"
},
"dependencies": {
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"requires": {
"color-name": "1.1.3"
}
},
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
}
}
},
"anymatch": {
@ -5169,19 +5186,17 @@
}
},
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"requires": {
"color-name": "1.1.3"
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
"combined-stream": {
"version": "1.0.7",

1
package.json
View File

@ -44,6 +44,7 @@
"@fullcalendar/vue": "^4.3.1",
"calendar-js": "git+https://github.com/georgehrke/calendar-js.git",
"cdav-library": "github:nextcloud/cdav-library",
"color-convert": "^2.0.1",
"debounce": "^1.2.0",
"jstz": "^2.1.1",
"nextcloud-auth": "0.0.3",

4
src/components/AppNavigation/CalendarListNew.vue
View File

@ -24,7 +24,7 @@
<script>
import ClickOutside from 'vue-click-outside'
import { randomColor } from '../../services/colorService'
import { getRandomColor } from '../../services/colorService'
export default {
name: 'CalendarListNew',
@ -63,7 +63,7 @@ export default {
},
addCalendar() {
this.isCreating = true
this.$store.dispatch('appendCalendar', { displayName: this.displayName, color: randomColor() })
this.$store.dispatch('appendCalendar', { displayName: this.displayName, color: getRandomColor() })
.then(() => {
this.displayName = ''
this.showForm = false

4
src/components/AppNavigation/SubscriptionListNew.vue
View File

@ -24,7 +24,7 @@
<script>
import ClickOutside from 'vue-click-outside'
import { randomColor } from '../../services/colorService'
import { getRandomColor } from '../../services/colorService'
export default {
name: 'SubscriptionListNew',
@ -63,7 +63,7 @@ export default {
},
addCalendar() {
this.isCreating = true
this.$store.dispatch('appendSubscription', { displayName: '', color: randomColor(), source: this.link })
this.$store.dispatch('appendSubscription', { displayName: '', color: getRandomColor(), source: this.link })
.then(() => {
this.displayName = ''
this.showForm = false

11
src/fullcalendar/eventSource.js
View File

@ -20,8 +20,7 @@
*
*/
import {
extractRGBFromHexString,
generateTextColorFromRGB
generateTextColorForRGBString
} from '../services/colorService'
import getTimezoneManager from '../services/timezoneDataProviderService'
import { getUnixTimestampFromDate } from '../services/date'
@ -34,18 +33,12 @@ import { eventSourceFunction } from './eventSourceFunction.js'
*/
export default function(store) {
return function(calendar) {
const {
red: colorRed,
green: colorGreen,
blue: colorBlue
} = extractRGBFromHexString(calendar.color)
const source = {
id: calendar.id,
// coloring
backgroundColor: calendar.color,
borderColor: calendar.color,
textColor: generateTextColorFromRGB(colorRed, colorGreen, colorBlue),
textColor: generateTextColorForRGBString(calendar.color),
// html foo
className: calendar.id,
events: ({ start, end, timeZone }, successCallback, failureCallback) => {

6
src/fullcalendar/eventSourceFunction.js
View File

@ -20,8 +20,7 @@
*
*/
import {
generateTextColorFromRGB,
extractRGBFromHexString
generateTextColorForRGBString
} from '../services/colorService'
/**
@ -62,8 +61,7 @@ export function eventSourceFunction(calendarObjects, start, end, timezone) {
if (calendarObject.color) {
fcEvent.backgroundColor = calendarObject.color
const { red, green, blue } = extractRGBFromHexString(calendarObject.color)
fcEvent.textColor = generateTextColorFromRGB(red, green, blue)
fcEvent.textColor = generateTextColorForRGBString(calendarObject.color)
}
fcEvents.push(fcEvent)

6
src/models/calendar.js
View File

@ -19,7 +19,7 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
import defaultColor from '../services/defaultColor'
import { getDefaultColor } from '../services/colorService.js'
import client from '../services/caldavService.js'
/**
@ -34,7 +34,7 @@ export const getDefaultCalendarObject = (props = {}) => Object.assign({}, {
// Visible display name
displayName: '',
// Color of the calendar
color: defaultColor(),
color: getDefaultColor(),
// Whether or not the calendar is visible in the grid
enabled: true,
// Whether or not the calendar is loading events at the moment
@ -78,7 +78,7 @@ export const getDefaultCalendarObject = (props = {}) => Object.assign({}, {
* @returns {Object}
*/
export function mapDavCollectionToCalendar(calendar) {
let color = calendar.color || defaultColor()
let color = calendar.color || getDefaultColor()
if (color.length === 9) {
// Make sure it's #RRGGBB, not #RRGGBBAA
color = color.substr(0, 7)

117
src/services/colorService.js
View File

@ -19,26 +19,16 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/** @type String [] */
const colors = []
import convert from 'color-convert'
/**
* get the appropriate text color to be used on top of an rgb value
* Get a text-color that's readable on a given background color
*
* @param {Number|String} red decimal value for red
* @param {Number} green decimal value for green
* @param {Number} blue decimal value for blue
* @returns {string}
* @param {String} rgbString The hex RGB string to get a text color for
* @returns {String} the matching text color
*/
export function generateTextColorFromRGB(red, green, blue) {
if (typeof red === 'string') {
const { r, g, b } = extractRGBFromHexString(red)
red = r
green = g
blue = b
}
export function generateTextColorForRGBString(rgbString) {
const [red, green, blue] = convert.hex.rgb(rgbString.substr(1))
const brightness = (((red * 299) + (green * 587) + (blue * 114)) / 1000)
return (brightness > 130) ? '#000000' : '#FAFAFA'
}
@ -48,94 +38,25 @@ export function generateTextColorFromRGB(red, green, blue) {
*
* @returns {String}
*/
export function randomColor() {
if (typeof String.prototype.toRgb === 'function') {
const { r, g, b } = Math.random().toString().toRgb()
return rgbToHex(r, g, b)
} else {
return colors[Math.floor(Math.random() * colors.length)]
}
export function getRandomColor() {
const red = Math.floor(Math.random() * 256)
const green = Math.floor(Math.random() * 256)
const blue = Math.floor(Math.random() * 256)
return '#' + convert.rgb.hex(red, green, blue)
}
/**
* extracts decimal rgb values from a hexadecimal string
* Gets the default color of the nextcloud instance
*
* @param {String} colorString the hex rgb string
* @returns {{red: Number, green: Number, blue: Number}}
*/
export function extractRGBFromHexString(colorString) {
const fallbackColor = { red: 255, green: 255, blue: 255 }
let matchedString
if (typeof colorString !== 'string') {
return fallbackColor
}
switch (colorString.length) {
case 4: {
matchedString = colorString.match(/^#([0-9a-f]{3})$/i)
return (Array.isArray(matchedString) && matchedString[1])
? ({
red: parseInt(matchedString[1].charAt(0), 16) * 0x11,
green: parseInt(matchedString[1].charAt(1), 16) * 0x11,
blue: parseInt(matchedString[1].charAt(2), 16) * 0x11
})
: fallbackColor
}
case 7:
case 9: {
const regex = new RegExp('^#([0-9a-f]{' + (colorString.length - 1) + '})$', 'i')
matchedString = colorString.match(regex)
return (Array.isArray(matchedString) && matchedString[1])
? ({
red: parseInt(matchedString[1].substr(0, 2), 16),
green: parseInt(matchedString[1].substr(2, 2), 16),
blue: parseInt(matchedString[1].substr(4, 2), 16)
})
: fallbackColor
}
default:
return fallbackColor
}
}
/**
*
* @param {String[]|String} red Value from 0 to 255
* @param {String} green Value from 0 to 255
* @param {String} blue Value from 0 to 255
* @returns {string}
*/
export function rgbToHex(red, green, blue) {
if (Array.isArray(red)) {
[red, green, blue] = red
export function getDefaultColor() {
const fallback = '#1483C6'
if (!OCA.Theming) {
return fallback
}
return [
'#',
('0' + parseInt(red, 10).toString(16)).slice(-2),
('0' + parseInt(green, 10).toString(16)).slice(-2),
('0' + parseInt(blue, 10).toString(16)).slice(-2)
].join('')
}
// initialize default colors
if (typeof String.prototype.toRgb === 'function') {
['15', '9', '4', 'b', '6', '11', '74', 'f', '57'].forEach((hashValue) => {
const { r, g, b } = hashValue.toRgb()
colors.push(rgbToHex(r, g, b))
})
} else {
colors.push(
'#31CC7C',
'#317CCC',
'#FF7A66',
'#F1DB50',
'#7C31CC',
'#CC317C',
'#3A3B3D',
'#CACBCD'
)
return OCA.Theming.color || fallback
}

36
src/services/defaultColor.js
View File

@ -1,36 +0,0 @@
/**
* @copyright Copyright (c) 2019 Georg Ehrke
*
* @author Georg Ehrke <oc.list@georgehrke.com>
*
* @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 <http://www.gnu.org/licenses/>.
*
*/
/**
* Returns a default color
*
* @returns {string}
*/
export default function defaultColor() {
const fallback = '#000000'
if (!OCA.Theming) {
return fallback
}
return OCA.Theming.color || fallback
}

4
src/store/calendars.js
View File

@ -29,7 +29,7 @@ import CalendarObject from '../models/calendarObject'
import { dateFactory, getUnixTimestampFromDate } from '../services/date'
import { getDefaultCalendarObject, mapDavCollectionToCalendar } from '../models/calendar'
import pLimit from 'p-limit'
import { randomColor } from '../services/colorService'
import { getRandomColor } from '../services/colorService'
const state = {
calendars: [],
@ -728,7 +728,7 @@ const actions = {
const displayName = file.parser.getName() || t('calendar', 'Imported {filename}', {
filename: file.name
})
const color = file.parser.getColor() || randomColor()
const color = file.parser.getColor() || getRandomColor()
const components = []
if (file.parser.containsVEvents()) {
components.push('VEVENT')

4
src/views/Calendar.vue
View File

@ -71,7 +71,7 @@ import allLocales from '@fullcalendar/core/locales-all'
import AppNavigation from '../components/AppNavigation.vue'
import { AppContent, Content } from 'nextcloud-vue'
import { randomColor } from '../services/colorService'
import { getRandomColor } from '../services/colorService'
import client from '../services/caldavService.js'
import debounce from 'debounce'
@ -247,7 +247,7 @@ export default {
this.loadingCalendars = true
this.$store.dispatch('appendCalendar', {
displayName: t('calendars', 'Personal'),
color: randomColor(),
color: getRandomColor(),
order: 0
}).then(() => {
this.loadingCalendars = false

6
src/views/EditSidebar.vue
View File

@ -112,7 +112,7 @@ import Repeat from '../components/Editor/Repeat/Repeat.vue'
import EditorMixin from '../mixins/EditorMixin'
import { getIllustrationForTitle } from '../services/illustrationProviderService.js'
import IllustrationHeader from '../components/Editor/IllustrationHeader.vue'
import defaultColor from '../services/defaultColor.js'
import { getDefaultColor } from '../services/colorService.js'
export default {
name: 'EditSidebar',
@ -151,10 +151,10 @@ export default {
},
selectedCalendarColor() {
if (!this.selectedCalendar) {
return defaultColor()
return getDefaultColor()
}
return this.selectedCalendar.color || defaultColor()
return this.selectedCalendar.color || getDefaultColor()
}
}
}