Migrate to bulma-css-variables and introduce dark mode #954
|
@ -202,6 +202,7 @@ steps:
|
|||
YARN_CACHE_FOLDER: .cache/yarn/
|
||||
commands:
|
||||
- yarn --frozen-lockfile --network-timeout 100000
|
||||
- npx browserslist@latest --update-db
|
||||
- yarn run lint
|
||||
- "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
|
||||
- yarn run build
|
||||
|
|
46
package.json
46
package.json
|
@ -19,15 +19,15 @@
|
|||
"dependencies": {
|
||||
"@github/hotkey": "1.6.0",
|
||||
"@kyvg/vue3-notification": "2.3.4",
|
||||
"@sentry/tracing": "6.14.3",
|
||||
"@sentry/vue": "6.14.3",
|
||||
"@vue/compat": "3.2.21",
|
||||
"@sentry/tracing": "6.15.0",
|
||||
"@sentry/vue": "6.15.0",
|
||||
"@vue/compat": "3.2.22",
|
||||
"@vueuse/core": "^6.8.0",
|
||||
"bulma-css-variables": "^0.9.33",
|
||||
"camel-case": "4.1.2",
|
||||
"codemirror": "5.63.3",
|
||||
"codemirror": "5.64.0",
|
||||
"copy-to-clipboard": "3.3.1",
|
||||
"date-fns": "2.25.0",
|
||||
"date-fns": "2.26.0",
|
||||
"dompurify": "2.3.3",
|
||||
"easymde": "2.15.0",
|
||||
"flatpickr": "4.6.9",
|
||||
|
@ -36,7 +36,7 @@
|
|||
"is-touch-device": "1.0.1",
|
||||
"lodash.clonedeep": "4.5.0",
|
||||
"lodash.debounce": "4.0.8",
|
||||
"marked": "4.0.3",
|
||||
"marked": "4.0.4",
|
||||
"register-service-worker": "1.7.2",
|
||||
"snake-case": "3.0.4",
|
||||
"ufo": "0.7.9",
|
||||
|
@ -44,11 +44,11 @@
|
|||
"vue-advanced-cropper": "2.7.0",
|
||||
"vue-drag-resize": "2.0.3",
|
||||
"vue-flatpickr-component": "9.0.5",
|
||||
"vue-i18n": "9.2.0-beta.18",
|
||||
"vue-i18n": "9.2.0-beta.20",
|
||||
"vue-router": "4.0.12",
|
||||
"vuedraggable": "4.1.0",
|
||||
"vuex": "4.0.2",
|
||||
"workbox-precaching": "6.3.0"
|
||||
"workbox-precaching": "6.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@4tw/cypress-drag-drop": "2.0.0",
|
||||
|
@ -57,37 +57,37 @@
|
|||
"@fortawesome/free-solid-svg-icons": "5.15.4",
|
||||
"@fortawesome/vue-fontawesome": "3.0.0-5",
|
||||
"@types/flexsearch": "0.7.2",
|
||||
"@types/jest": "27.0.2",
|
||||
"@types/jest": "27.0.3",
|
||||
"@typescript-eslint/eslint-plugin": "5.4.0",
|
||||
"@typescript-eslint/parser": "5.4.0",
|
||||
"@vitejs/plugin-legacy": "1.6.2",
|
||||
"@vitejs/plugin-vue": "1.9.4",
|
||||
"@vue/eslint-config-typescript": "9.0.1",
|
||||
"autoprefixer": "10.4.0",
|
||||
"@vitejs/plugin-legacy": "1.6.3",
|
||||
"@vitejs/plugin-vue": "1.10.0",
|
||||
"@vue/eslint-config-typescript": "9.1.0",
|
||||
"axios": "0.24.0",
|
||||
"browserslist": "4.18.1",
|
||||
"cypress": "9.0.0",
|
||||
"cypress-file-upload": "5.0.8",
|
||||
"esbuild": "0.13.13",
|
||||
"eslint": "8.2.0",
|
||||
"eslint-plugin-vue": "8.0.3",
|
||||
"esbuild": "0.13.15",
|
||||
"eslint": "8.3.0",
|
||||
"eslint-plugin-vue": "8.1.1",
|
||||
"express": "4.17.1",
|
||||
"faker": "5.5.3",
|
||||
"jest": "27.3.1",
|
||||
"netlify-cli": "6.14.25",
|
||||
"netlify-cli": "7.0.4",
|
||||
"postcss": "8.3.11",
|
||||
"rollup": "2.60.0",
|
||||
"postcss-preset-env": "7.0.1",
|
||||
"rollup": "2.60.1",
|
||||
"rollup-plugin-visualizer": "5.5.2",
|
||||
"sass": "1.43.4",
|
||||
"slugify": "1.6.2",
|
||||
"slugify": "1.6.3",
|
||||
"ts-jest": "27.0.7",
|
||||
"typescript": "4.4.4",
|
||||
"typescript": "4.5.2",
|
||||
"vite": "2.6.14",
|
||||
"vite-plugin-pwa": "0.11.5",
|
||||
"vite-plugin-pwa": "0.11.6",
|
||||
"vite-svg-loader": "3.1.0",
|
||||
"vue-tsc": "0.29.5",
|
||||
"vue-tsc": "0.29.6",
|
||||
"wait-on": "6.0.0",
|
||||
"workbox-cli": "6.3.0"
|
||||
"workbox-cli": "6.4.1"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
|
|
|
@ -38,6 +38,7 @@ const motd = computed(() => store.state.config.motd)
|
|||
}
|
||||
|
||||
.logo {
|
||||
max-width: 100%;
|
||||
dpschen marked this conversation as resolved
Outdated
|
||||
color: var(--logo-text-color);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -500,7 +500,6 @@ $gantt-vertical-border-color: var(--grey-100);
|
|||
|
||||
.tasks {
|
||||
max-width: unset !important;
|
||||
margin: 0;
|
||||
border-top: $gantt-border;
|
||||
|
||||
.row {
|
||||
|
|
|
@ -306,24 +306,16 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.media.comment {
|
||||
align-items: center;
|
||||
.media-left {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.media-left {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.comment-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
* {
|
||||
padding-right: .5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
display: none;
|
||||
.comment-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
|
||||
img {
|
||||
@media screen and (max-width: $tablet) {
|
||||
display: block;
|
||||
width: 20px;
|
||||
|
@ -331,22 +323,20 @@ export default {
|
|||
padding-right: 0;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
span {
|
||||
font-size: .75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.editor {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: .75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.media-content {
|
||||
width: calc(100% - 48px - 2rem);
|
||||
width: calc(100% - 48px - 2rem);
|
||||
}
|
||||
</style>
|
|
@ -7,7 +7,7 @@
|
|||
:class="{'disabled': !canWrite}"
|
||||
@blur="save($event.target.textContent)"
|
||||
@keydown.enter.prevent.stop="$event.target.blur()"
|
||||
:contenteditable="canWrite ? 'true' : 'false'"
|
||||
:contenteditable="canWrite ? true : undefined"
|
||||
:spellcheck="false"
|
||||
>
|
||||
{{ task.title.trim() }}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div
|
||||
class="task loader-container draggable"
|
||||
:class="{
|
||||
'is-loading': loadingInternal || loading,
|
||||
'draggable': !(loadingInternal || loading),
|
||||
|
@ -9,7 +10,6 @@
|
|||
@click.ctrl="() => toggleTaskDone(task)"
|
||||
@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
|
||||
@click.meta="() => toggleTaskDone(task)"
|
||||
class="task loader-container draggable"
|
||||
>
|
||||
<span class="task-id">
|
||||
<Done class="kanban-card__done" :is-done="task.done" variant="small" />
|
||||
|
|
|
@ -319,6 +319,10 @@ export default {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.tasks {
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.task {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
@ -7,6 +7,10 @@ export const ERROR_NO_API_URL = 'noApiUrlProvided'
|
|||
const updateConfig = () => store.dispatch('config/update')
|
||||
|
||||
export const checkAndSetApiUrl = (url: string): Promise<string> => {
|
||||
if(url.startsWith('/')) {
|
||||
url = window.location.host + url
|
||||
}
|
||||
|
||||
// Check if the url has an http prefix
|
||||
if (
|
||||
!url.startsWith('http://') &&
|
||||
|
|
|
@ -7,6 +7,8 @@ import {REPEAT_MODE_DEFAULT} from './constants/taskRepeatModes'
|
|||
import SubscriptionModel from '@/models/subscription'
|
||||
import {parseDateOrNull} from '@/helpers/parseDateOrNull'
|
||||
|
||||
const SUPPORTS_TRIGGERED_NOTIFICATION = 'Notification' in window && 'showTrigger' in Notification.prototype
|
||||
|
||||
export default class TaskModel extends AbstractModel {
|
||||
|
||||
defaultColor = '198CFF'
|
||||
|
@ -161,7 +163,7 @@ export default class TaskModel extends AbstractModel {
|
|||
}
|
||||
|
||||
async cancelScheduledNotifications() {
|
||||
if (!(Notification && 'showTrigger' in Notification.prototype)) {
|
||||
if (!SUPPORTS_TRIGGERED_NOTIFICATION) {
|
||||
console.debug('This browser does not support triggered notifications')
|
||||
return
|
||||
}
|
||||
|
@ -196,7 +198,7 @@ export default class TaskModel extends AbstractModel {
|
|||
return
|
||||
}
|
||||
|
||||
if (!(Notification && 'showTrigger' in Notification.prototype)) {
|
||||
if (!SUPPORTS_TRIGGERED_NOTIFICATION) {
|
||||
console.debug('This browser does not support triggered notifications')
|
||||
return
|
||||
}
|
||||
|
|
|
@ -37,8 +37,8 @@ export default {
|
|||
update(label)
|
||||
},
|
||||
removeLabelById(state, label) {
|
||||
delete state.labels[label.id]
|
||||
remove(label)
|
||||
delete state.labels[label.id]
|
||||
},
|
||||
setLoaded(state, loaded) {
|
||||
state.loaded = loaded
|
||||
|
|
|
@ -23,8 +23,8 @@ export default {
|
|||
})
|
||||
},
|
||||
removeListById(state, list) {
|
||||
delete state[list.id]
|
||||
remove(list)
|
||||
delete state[list.id]
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
|
|
|
@ -55,8 +55,8 @@ export default {
|
|||
removeNamespaceById(state, namespaceId) {
|
||||
for (const n in state.namespaces) {
|
||||
if (state.namespaces[n].id === namespaceId) {
|
||||
state.namespaces.splice(n, 1)
|
||||
remove(state.namespaces[n])
|
||||
state.namespaces.splice(n, 1)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,8 +2,6 @@
|
|||
// very hard to untangle
|
||||
// they have many overwrites at different positions
|
||||
.tasks {
|
||||
margin-top: 1rem;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
|
||||
|
||||
|
@ -26,19 +24,6 @@
|
|||
margin: 1rem -0.5rem;
|
||||
}
|
||||
|
||||
.task {
|
||||
margin: 0 .5rem;
|
||||
|
||||
&:first-child {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: .5rem;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.checklist-summary {
|
||||
padding-left: .5rem;
|
||||
font-size: .9rem;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
/* eslint-disable no-console */
|
||||
/* eslint-disable no-undef */
|
||||
|
||||
const workboxVersion = 'v6.3.0'
|
||||
const workboxVersion = 'v6.4.1'
|
||||
importScripts( `/workbox-${workboxVersion}/workbox-sw.js`)
|
||||
workbox.setConfig({
|
||||
modulePathPrefix: `/workbox-${workboxVersion}`,
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
@blur="saveBucketTitle(bucket.id, $event.target.textContent)"
|
||||
@click="focusBucketTitle"
|
||||
class="title input"
|
||||
:contenteditable="(bucketTitleEditable && canWrite && !collapsedBuckets[bucket.id]) ? 'true' : 'false'"
|
||||
:contenteditable="(bucketTitleEditable && canWrite && !collapsedBuckets[bucket.id]) ? true : undefined"
|
||||
:spellcheck="false">{{ bucket.title }}</h2>
|
||||
<span
|
||||
:class="{'is-max': bucket.tasks.length >= bucket.limit}"
|
||||
|
@ -635,7 +635,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
.tasks {
|
||||
max-height: calc(#{$crazy-height-calculation-tasks});
|
||||
overflow: auto;
|
||||
margin-top: 0;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
adrinux marked this conversation as resolved
Outdated
dpschen
commented
This seems like a mistake: This seems like a mistake: `$bucket-background` is still defined as SASS variable.
I think it makes sense to keep it that way: Compiled it will resolve in `var(--grey-100)` which seems fine
adrinux
commented
Yep, reverted Though declaring it to be the same color as what's behind it seems pointless - hangover from previous kanban design? Yep, reverted https://kolaente.dev/adrinux/frontend/commit/0191f12db76bf93bee91ea0e58dd7d52c2f423e4
Though declaring it to be the same color as what's behind it seems pointless - hangover from previous kanban design?
dpschen
commented
@konrad: any idea? @konrad: any idea?
konrad
commented
It kind of comes from the kanban redesign, but is still required: When the list has a background, the buckets need to have a colored background. It kind of comes from the kanban redesign, but is still required: When the list has a background, the buckets need to have a colored background.
konrad
commented
I think we could remove the variable and swap its uses to use the same variable that's used for the overall site background. I think we could remove the variable and swap its uses to use the same variable that's used for the overall site background.
dpschen
commented
You mean the variable that was set for You mean the variable that was set for `$bucket-background` aka `var(--grey-100)`?
adrinux
commented
Removed $bucket-background Removed $bucket-background https://kolaente.dev/adrinux/frontend/commit/54f1271ab935a5b0c93168378395c4093ac4f01b
|
||||
max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height});
|
||||
|
|
|
@ -323,6 +323,7 @@ export default {
|
|||
|
||||
.tasks {
|
||||
width: 100%;
|
||||
padding: .5rem;
|
||||
|
||||
.ghost {
|
||||
border-radius: $radius;
|
||||
|
|
|
@ -31,12 +31,12 @@
|
|||
<color-picker v-model="namespace.hexColor" />
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
class="is-small has-text-centered"
|
||||
v-tooltip.bottom="$t('namespace.create.explanation')"
|
||||
>
|
||||
{{ $t('namespace.create.tooltip') }}
|
||||
</p>
|
||||
|
||||
<div class="notification is-info mt-4">
|
||||
<h4 class="title">{{ $t('namespace.create.tooltip') }}</h4>
|
||||
|
||||
{{ $t('namespace.create.explanation') }}
|
||||
</div>
|
||||
</create-edit>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -271,6 +271,10 @@ h3 {
|
|||
}
|
||||
}
|
||||
|
||||
.tasks {
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.llama-cool {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
|
Reference in New Issue
Block a user
Move to logo.vue
Done!