github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Re-style file detail preview + replace interaction (#12689)

Browse Source 
* Return BigIntegers as Strings in GraphQL

Fixes #12051

* Redesign fallback image style

* Re-add replace button in new position
This commit is contained in:
Rijk van Zanten
2022-04-11 18:24:12 -04:00
committed by GitHub
parent f92fb0762f
commit f89aa95140
6 changed files with 322 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/register.ts
View File

@@ -29,6 +29,7 @@ import VForm from './v-form';
import VHover from './v-hover/';
import VHighlight from './v-highlight.vue';
import VIcon from './v-icon/';
import VIconFile from './v-icon-file.vue';
import VInfo from './v-info/';
import VInput from './v-input/';
import VItemGroup, { VItem } from './v-item-group';
@@ -77,6 +78,7 @@ export function registerComponents(app: App): void {
app.component('VHover', VHover);
app.component('VHighlight', VHighlight);
app.component('VIcon', VIcon);
app.component('VIconFile', VIconFile);
app.component('VInfo', VInfo);
app.component('VInput', VInput);
app.component('VItemGroup', VItemGroup);

51
app/src/components/v-icon-file.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<div class="icon" :class="{ right: ext.length >= 4 }">
<v-icon name="insert_drive_file" />
<span class="label">{{ ext }}</span>
</div>
</template>
<script lang="ts" setup>
interface Props {
ext: string;
}
defineProps<Props>();
</script>
<style lang="scss" scoped>
:global(body) {
--v-icon-file-color: var(--primary);
--v-icon-file-background-color: var(--background-normal);
}
.icon {
--v-icon-size: 64px;
--v-icon-color: var(--v-icon-file-color);
color: var(--v-icon-file-color);
position: relative;
.label {
position: absolute;
text-transform: uppercase;
left: 50%;
transform: translateX(-50%);
top: 55%;
font-size: 12px;
font-weight: 800;
line-height: 1;
padding: 2px 0;
text-align: center;
}
&.right {
.label {
background-color: var(--v-icon-file-background-color);
left: calc(100% - 12px - 3ch);
text-align: left;
transform: none;
padding-right: 8px;
}
}
}
</style>