Skip to content

Commit

Permalink
refactor: remove inkline
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulpestov
paulpestov committed Nov 30, 2023
1 parent c1831e9 commit 364c2d6
Show file tree
Hide file tree
Showing 25 changed files with 182 additions and 434 deletions.
14 changes: 7 additions & 7 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"postcss": "^8.4.31",
"postcss-preset-env": "^7.8.3",
"primeicons": "^6.0.1",
"primevue": "^3.37.0",
"primevue": "^3.42.0",
"sass": "^1.54.9",
"tailwindcss": "^3.3.3",
"typescript": "~5.2.0",
Expand Down
119 changes: 20 additions & 99 deletions src/assets/app.scss
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,18 @@
@import "./base.scss";

@import '@inkline/inkline/css/variables';
@import '@inkline/inkline/css/mixins';

:root {
--color--primary--h: 195deg;
--color--primary--s: 77%;
--color--primary--l: 39%;
--contrast-color-for-light-background: var(--color--gray-75);
--contrast-color-for-dark-background: var(--color--gray-10);
--body--color: var(--color--gray-75);
--h3--font-size: 1.4rem;
--color--negative-background: var(--color--red-20);
--color--negative-text: var(--color--red-65);
--color--negative-text-dark: var(--color--red-25);
--color--negative-background-dark: hsl(var(--color--red-70-h), 40%, var(--color--red-60-l));
--color--medium-background: var(--color--yellow-20);
--color--medium-text: var(--color--yellow-70);
--color--medium-text-dark: var(--color--yellow-50);
--color--medium-background-dark: hsl(var(--color--yellow-70-h), 60%, var(--color--yellow-70-l));
--color--positive-background: var(--color--green-20);
--color--positive-text: var(--color--green-50);
--color--positive-text-dark: var(--color--green-50);
--color--positive-background-dark: hsl(var(--color--green-70-h), 50%, var(--color--green-60-l));
--color--negative-background: theme('colors.red.200');
--color--negative-text: theme('colors.red.500');
--color--negative-text-dark: var(--color--red-25);
--color--negative-background-dark: hsl(var(--color--red-70-h), 40%, var(--color--red-60-l));
--color--neutral-background: theme('colors.amber.100');
--color--neutral-text: theme('colors.amber.500');
--color--neutral-text-dark: var(--color--yellow-50);
--color--neutral-background-dark: hsl(var(--color--yellow-70-h), 60%, var(--color--yellow-70-l));
--color--positive-background: theme('colors.green.200');
--color--positive-text: theme('colors.green.500');
--color--positive-text-dark: var(--color--green-50);
--color--positive-background-dark: hsl(var(--color--green-70-h), 50%, var(--color--green-60-l));
}

h3 {
Expand All @@ -40,10 +30,10 @@ h3 {
}
}

.eval-medium {
background-color: var(--color--medium-background);
.eval-neutral {
background-color: var(--color--neutral-background);
.-dark & {
background-color: var(--color--medium-background-dark);
background-color: var(--color--neutral-background-dark);
}
}

Expand All @@ -61,10 +51,10 @@ h3 {
}
}

.text-medium {
color: var(--color--medium-text);
.text-neutral {
color: var(--color--neutral-text);
.-dark & {
color: var(--color--medium-text-dark);
color: var(--color--neutral-text-dark);
}
}

Expand All @@ -79,75 +69,6 @@ h3 {
white-space: nowrap;
}

.badge {
----border-width: 0;
----font-weight: var(--font-weight--normal);
&.-lg {
----font-size: var(--font-size--sm);
----padding-top: 0.3rem;
----padding-bottom: 0.3rem;
----padding-left: 0.5rem;
----padding-right: 0.5rem;
}
}

.button {
&.-lg {
font-size: var(--font-size--md);
----padding-top: 0.5rem;
----padding-bottom: 0.5rem;
----padding-left: 1rem;
----padding-right: 1rem;
}
.p-badge {
background: theme('colors.gray.300');
}

.checkbox .checkbox-label {
----label--font-size: 1rem;
margin-bottom: 0.2rem;
&:before {
----border-radius: 4px;
----margin-right: 0.5rem;
}
}

.collapsible {
.collapsible-item {
display: flex;
flex-direction: column;
}
.collapsible-header {
font-size: var(--font-size--md);
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 32px !important;
display: inline !important;
overflow: hidden;

.icon {
position: absolute !important;
right: 10px;
top: 12px;
}
}
}

.popover-wrapper {
----footer--background: var(----body--background) !important;
.popover-body, .popover-footer, .popover-header {
padding-left: 12px;
padding-right: 12px;
}
}

.card {
.card-header {
padding-left: 16px;
padding-right: 0px;
}
.card-body {
padding-left: 16px;
padding-right: 16px;
min-height: 120px;
}
}

84 changes: 0 additions & 84 deletions src/assets/base.scss
View file
Original file line number Diff line number Diff line change
@@ -1,84 +0,0 @@
///* color palette from <https://github.com/vuejs/theme> */
//:root {
// --border-radius: 6px;
// --vt-c-white: #ffffff;
// --vt-c-white-soft: #f8f8f8;
// --vt-c-white-mute: #f2f2f2;
//
// --vt-c-black: #181818;
// --vt-c-black-soft: #222222;
// --vt-c-black-mute: #282828;
//
// --vt-c-indigo: #2c3e50;
//
// --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
// --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
// --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
// --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
//
// --vt-c-text-light-1: var(--vt-c-indigo);
// --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
// --vt-c-text-dark-1: var(--vt-c-white);
// --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
//}
//
///* semantic color variables for this project */
//:root {
// --color-background: var(--vt-c-white);
// --color-background-soft: var(--vt-c-white-soft);
// --color-background-mute: var(--vt-c-white-mute);
//
// --color-border: var(--vt-c-divider-light-2);
// --color-border-hover: var(--vt-c-divider-light-1);
//
// --color-heading: var(--vt-c-text-light-1);
// --color-text: var(--vt-c-text-light-1);
//
// --section-gap: 160px;
//}
//
//@media (prefers-color-scheme: dark) {
// :root {
// --color-background: var(--vt-c-black);
// --color-background-soft: var(--vt-c-black-soft);
// --color-background-mute: var(--vt-c-black-mute);
//
// --color-border: var(--vt-c-divider-dark-2);
// --color-border-hover: var(--vt-c-divider-dark-1);
//
// --color-heading: var(--vt-c-text-dark-1);
// --color-text: var(--vt-c-text-dark-2);
// }
//}

:root {
--spacing: 0.5rem;
--gutter: 16px;
--border-top-left-radius: 6px;
--border-top-right-radius: 6px;
--border-bottom-left-radius: 6px;
--border-bottom-right-radius: 6px;
}

*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
position: relative;
font-weight: normal;
}

body {
min-height: 100vh;
//color: var(--color-text);
//background: var(--color-background);
transition: color 0.5s, background-color 0.5s;
line-height: 1.6;
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
2 changes: 1 addition & 1 deletion src/components/Projects.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
:key="tag"
class="border-l border-gray-400 pb-8"
>
<div class="timeline-item pl-5 flex">
<div class="timeline-item relative pl-5 flex">
<div class="bg-gray-300 rounded-md px-2 font-bold">ocrd_all {{tag}}</div>
</div>
<div class="projects-container ml-6 mt-3 flex flex-wrap gap-4">
Expand Down
67 changes: 19 additions & 48 deletions src/components/Workflows.vue
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,47 @@
<script setup>
import { computed, onMounted, ref, watch } from "vue"
import { onMounted, ref, watch } from "vue"
import api from '@/helpers/api'
import { useRouter, useRoute } from "vue-router"
import WorkflowsList from "@/components/workflows/WorkflowsList.vue"
import WorkflowsTable from "@/components/workflows/WorkflowsTable.vue"
import { useI18n } from "vue-i18n"
import { mapGtId, setEvalColors } from "@/helpers/utils"
import { store } from "@/helpers/store"
import MultiFilter from "@/components/workflows/MultiFilter.vue"
import Filters from "@/components/workflows/filters/Filters.vue"
import SelectButton from "primevue/selectbutton"
import WorkflowsTimeline from "@/components/workflows/WorkflowsTimeline.vue"
import filtersStore from "@/store/filters-store"
const { t } = useI18n()
const data = ref([])
const filteredData = ref([])
const defs = ref({})
const router = useRouter()
const route = useRoute()
const options = ref([
{ name: t('list'), value: 'list' },
{ name: t('timeline'), value: 'timeline' },
{ name: t('table'), value: 'table' }
])
const selectedOption = ref(options.value[1])
const datasetsFilterOptions = ref([])
const selectedOption = ref(options.value[0])
const onChangeDatasetFilter = (value) => {
value = value.filter(({ selected }) => !!(selected))
filteredData.value = data.value
.filter(item => value.find(({ id }) => mapGtId(item.metadata.gt_workspace['id']) === id))
}
watch(() => filtersStore.gt, () => {
filteredData.value = data.value.filter(({ metadata }) => filtersStore.gt.findIndex(({ value }) => value === mapGtId(metadata.gt_workspace['id']) ) > -1)
})
watch(selectedOption, ({ value }) => {
router.push({ query: { view: value } })
})
const isList = computed(() => selectedOption.value?.value === options.value[0].value)
const isTable = computed(() => selectedOption.value?.value === options.value[1].value)
onMounted(async () => {
await router.isReady()
const filtered = options.value.filter((option) => {
return route.query.view && route.query.view === option.value
})
selectedOption.value = filtered.length > 0 ? filtered[0] : options.value[0]
let gtList = store.gtList
if (!gtList.length) {
Expand Down Expand Up @@ -71,47 +73,16 @@
filteredData.value = data.value
const datasetsMap = data.value
.filter(item => !!(item?.metadata.gt_workspace))
.reduce((acc, cur) => {
let gtWorkspaceId = mapGtId(cur.metadata.gt_workspace['id'])
acc[gtWorkspaceId] = cur.metadata.gt_workspace.label
return acc
}, {})
datasetsFilterOptions.value = Object.keys(datasetsMap).map(id => ({
id,
label: datasetsMap[id],
selected: true
}))
setEvalColors(data.value)
const filtered = options.value.filter((option) => {
return route.query.view && route.query.view === option.value
})
// selectedOption.value = filtered.length > 0 ? filtered[0] : options.value[0]
})
</script>
<template>
<div class="flex mb-3">
<!-- <SelectButton v-model="selectedOption" :options="options" optionLabel="name"></SelectButton>-->
<!-- <i-button-group>-->
<!-- <i-button color="primary" size="lg" :outline="!isList" @click="selectedOption = options[0]">{{options[0].name}}</i-button>-->
<!-- <i-button color="primary" size="lg" :outline="!isTable" @click="selectedOption = options[1]">{{options[1].name}}</i-button>-->
<!-- </i-button-group>-->
<MultiFilter
class="ml-auto"
:amount-label="$t('datasets_selected')"
v-model="datasetsFilterOptions"
@update:model-value="onChangeDatasetFilter"
/>
<SelectButton v-model="selectedOption" :options="options" optionLabel="name"></SelectButton>
</div>
<div><Filters /></div>
<div v-if="selectedOption">
<WorkflowsList v-if="selectedOption.value === 'list'" :data="filteredData" :defs="defs" />
<WorkflowsTimeline v-if="selectedOption.value === 'timeline'" />
<WorkflowsTable v-else :data="filteredData" :defs="defs" />
</div>
</template>
Expand Down
Loading

0 comments on commit 364c2d6

Please sign in to comment.