Skip to content

Commit

Permalink
Add id-pill component
Browse files Browse the repository at this point in the history
Move the id-fnurgel pill seen in the top right corner of cards to its
own component. Use it in item-local as well.

Co-authored-by: Lars Rosenström <[email protected]>
  • Loading branch information
olovy and lrosenstrom committed Aug 19, 2024
1 parent 8819687 commit 81208b0
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 74 deletions.
10 changes: 10 additions & 0 deletions vue-client/src/components/inspector/item-local.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import * as LayoutUtil from '@/utils/layout';
import { translatePhrase, labelByLang, capitalize } from '@/utils/filters';
import PropertyAdder from '@/components/inspector/property-adder.vue';
import EntityAction from '@/components/inspector/entity-action.vue';
import IdPill from '@/components/shared/id-pill.vue';
import SearchWindow from './search-window.vue';
import ItemMixin from '../mixins/item-mixin.vue';
import LensMixin from '../mixins/lens-mixin.vue';
Expand Down Expand Up @@ -149,6 +150,9 @@ export default {
}
return false;
},
hasId() {
return this.item.hasOwnProperty('@id');
},
getPath() {
if (this.inArray) {
return `${this.parentPath}[${this.index}]`;
Expand Down Expand Up @@ -445,6 +449,7 @@ export default {
'property-adder': PropertyAdder,
'search-window': SearchWindow,
'entity-action': EntityAction,
'id-pill': IdPill,
},
};
</script>
Expand Down Expand Up @@ -510,6 +515,11 @@ export default {
<i class="fa fa-plus-circle icon--sm icon-added" />
</div>
</div>
<id-pill
v-if="this.hasId"
:uri="this.recordId"
:isLibrisResource="this.isLibrisResource"
/>

<div class="ItemLocal-actions">
<entity-action
Expand Down
82 changes: 8 additions & 74 deletions vue-client/src/components/shared/entity-summary.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,14 @@ import OverflowMixin from '@/components/mixins/overflow-mixin.vue';
import EncodingLevelIcon from '@/components/shared/encoding-level-icon.vue';
import TypeIcon from '@/components/shared/type-icon.vue';
import SummaryNode from '@/components/shared/summary-node.vue';
import IdPill from '@/components/shared/id-pill.vue';
import LensMixin from '../mixins/lens-mixin.vue';
export default {
mixins: [LensMixin, OverflowMixin],
name: 'entity-summary',
components: {
IdPill,
EncodingLevelIcon,
SummaryNode,
TypeIcon,
Expand Down Expand Up @@ -109,9 +111,6 @@ export default {
},
data() {
return {
idHover: false,
recentlyCopiedId: false,
failedCopyId: false,
defaultSettings: {
show: false,
styling: 'grey',
Expand Down Expand Up @@ -145,24 +144,9 @@ export default {
}
return false;
},
idAsFnurgel() {
if (this.uri) {
const id = this.uri;
const fnurgel = RecordUtil.extractFnurgel(id);
if (fnurgel && this.isLibrisResource) {
return fnurgel;
}
const cleaned = id.replace('https://', '').replace('http://', '');
return cleaned;
}
return null;
},
hiddenDetailsNumber() {
return this.getSummary.info.length - this.keyDisplayLimit;
},
idTooltipText() {
return StringUtil.getUiPhraseByLang('Copy ID', this.user.settings.language, this.resources.i18n);
},
isReplacedBy() {
const info = this.getSummary.info;
const infoObj = {};
Expand Down Expand Up @@ -285,18 +269,6 @@ export default {
labelByLang,
convertResourceLink,
capitalize,
copyFnurgel() {
const self = this;
this.$copyText(this.uri).then(() => {
self.recentlyCopiedId = true;
setTimeout(() => {
self.recentlyCopiedId = false;
}, 1000);
}, (e) => {
self.failedCopyId = true;
console.warn(e);
});
},
importThis() {
this.$emit('import-this');
},
Expand Down Expand Up @@ -332,18 +304,11 @@ export default {
{{ topBarInformation }} {{ isLocal ? '{lokal entitet}' : '' }}
<span class="EntitySummary-sourceLabel" v-if="database">{{ database }}</span>
</div>
<div
v-if="idAsFnurgel && excludeComponents.indexOf('id') < 0"
class="EntitySummary-id"
:class="{ 'recently-copied': recentlyCopiedId }"
@mouseover="idHover = true"
@mouseout="idHover = false">
<i
v-tooltip.top="idTooltipText"
class="fa fa-copy EntitySummary-idCopyIcon"
:class="{ collapsedIcon: !idHover || recentlyCopiedId }"
@click.stop="copyFnurgel" />{{ idAsFnurgel }}
</div>
<id-pill
v-if="!excludeComponents.includes('id')"
:uri="this.recordId"
:isLibrisResource="this.isLibrisResource"
/>
</div>

<div class="EntitySummary-info">
Expand Down Expand Up @@ -442,7 +407,7 @@ export default {
display: flex;
}
&-type, &-id {
&-type {
display: block;
overflow: hidden;
text-overflow: ellipsis;
Expand All @@ -461,37 +426,6 @@ export default {
flex-grow: 2;
flex-basis: 50%;
}
&-id {
flex-grow: 0;
text-align: right;
text-transform: none;
color: @grey-very-dark-transparent;
background-color: @badge-color-transparent;
transition: background-color 0.5s ease;
letter-spacing: 0.5px;
font-size: 1.2rem;
font-weight: 400;
padding: 0 0.75em;
border-radius: 1em;
&.recently-copied {
background-color: @brand-success;
color: @white;
}
}
&-idCopyIcon {
transition: all 0.25s ease;
margin: 0 0.25em 0 -0.25em;
overflow: hidden;
width: 1.2em;
opacity: 1;
cursor: pointer;
&.collapsedIcon {
margin: 0 0 0 0;
width: 0;
opacity: 0;
}
}
&-sourceLabel {
border: 1px solid;
Expand Down
110 changes: 110 additions & 0 deletions vue-client/src/components/shared/id-pill.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<script>
import * as StringUtil from 'lxljs/string';
import * as RecordUtil from '@/utils/record';
import { mapGetters } from 'vuex';
export default {
name: 'id-pill',
props: {
uri: {
type: String,
default: '',
},
isLibrisResource: {
type: Boolean,
default: false,
},
},
data() {
return {
idHover: false,
recentlyCopiedId: false,
failedCopyId: false,
};
},
methods: {
copyFnurgel() {
const self = this;
this.$copyText(this.uri).then(() => {
self.recentlyCopiedId = true;
setTimeout(() => {
self.recentlyCopiedId = false;
}, 1000);
}, (e) => {
self.failedCopyId = true;
console.warn(e);
});
},
},
computed: {
...mapGetters([
'user',
'resources',
]),
idAsFnurgel() {
if (this.uri) {
const id = this.uri;
const fnurgel = RecordUtil.extractFnurgel(id);
if (fnurgel && this.isLibrisResource) {
return fnurgel;
}
const cleaned = id.replace('https://', '').replace('http://', '');
return cleaned;
}
return null;
},
idTooltipText() {
return StringUtil.getUiPhraseByLang('Copy ID', this.user.settings.language, this.resources.i18n);
},
},
};
</script>

<template>
<div
v-if="idAsFnurgel"
class="IdPill"
:class="{ 'recently-copied': recentlyCopiedId }"
@mouseover="idHover = true"
@mouseout="idHover = false">
<i
v-tooltip.top="idTooltipText"
class="fa fa-copy IdPill-idCopyIcon"
:class="{ collapsedIcon: !idHover || recentlyCopiedId }"
@click.stop="copyFnurgel" />{{ idAsFnurgel }}
</div>
</template>

<style lang="less">
.IdPill {
flex-grow: 0;
text-align: right;
text-transform: none;
color: @grey-very-dark-transparent;
background-color: @badge-color-transparent;
transition: background-color 0.5s ease;
letter-spacing: 0.5px;
font-size: 1.2rem;
font-weight: 400;
padding: 0 0.75em;
border-radius: 1em;
&.recently-copied {
background-color: @brand-success;
color: @white;
}
&-idCopyIcon {
transition: all 0.25s ease;
margin: 0 0.25em 0 -0.25em;
overflow: hidden;
width: 1.2em;
opacity: 1;
cursor: pointer;
&.collapsedIcon {
margin: 0 0 0 0;
width: 0;
opacity: 0;
}
}
}
</style>

0 comments on commit 81208b0

Please sign in to comment.