shibafu
GitHub
commit
dabae9f251
@ -11,7 +11,7 @@
|
||||
</div>
|
||||
<div v-else-if="state === MetadataLoadState.Success" class="row no-gutters">
|
||||
<div v-if="hasImage" class="col-4 justify-content-center align-items-center">
|
||||
<img :src="metadata.image" alt="Thumbnail" class="card-img-top-to-left bg-secondary">
|
||||
<img :src="metadata.image" alt="Thumbnail" class="w-100 bg-secondary">
|
||||
</div>
|
||||
<div :class="descClasses">
|
||||
<div class="card-body">
|
||||
@ -20,8 +20,8 @@
|
||||
<p class="card-text mb-2" style="font-size: small;">タグ候補<br><span class="text-secondary">(クリックするとタグ入力欄にコピーできます)</span></p>
|
||||
<ul class="list-inline d-inline">
|
||||
<li v-for="tag in suggestions"
|
||||
class="list-inline-item badge badge-primary metadata-tag-item"
|
||||
@click="addTag(tag)"><span class="oi oi-tag"></span> {{ tag }}</li>
|
||||
:class="tagClasses(tag)"
|
||||
@click="addTag(tag.name)"><span class="oi oi-tag"></span> {{ tag.name }}</li>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
@ -54,6 +54,11 @@
|
||||
}[],
|
||||
};
|
||||
|
||||
type Suggestion = {
|
||||
name: string,
|
||||
used: boolean,
|
||||
}
|
||||
|
||||
@Component
|
||||
export default class MetadataPreview extends Vue {
|
||||
@Prop() readonly state!: MetadataLoadState;
|
||||
@ -62,16 +67,38 @@
|
||||
// for use in v-if
|
||||
private readonly MetadataLoadState = MetadataLoadState;
|
||||
|
||||
tags: string[] = [];
|
||||
|
||||
created() {
|
||||
bus.$on("change-tag", (tags: string[]) => this.tags = tags);
|
||||
bus.$emit("resend-tag");
|
||||
}
|
||||
|
||||
addTag(tag: string) {
|
||||
bus.$emit("add-tag", tag);
|
||||
}
|
||||
|
||||
get suggestions() {
|
||||
tagClasses(s: Suggestion) {
|
||||
return {
|
||||
"list-inline-item": true,
|
||||
"badge": true,
|
||||
"badge-primary": !s.used,
|
||||
"badge-secondary": s.used,
|
||||
"metadata-tag-item": true,
|
||||
};
|
||||
}
|
||||
|
||||
get suggestions(): Suggestion[] {
|
||||
if (this.metadata === null) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return this.metadata.tags.map(t => t.name);
|
||||
return this.metadata.tags.map(t => {
|
||||
return {
|
||||
name: t.name,
|
||||
used: this.tags.indexOf(t.name) !== -1
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
get hasImage() {
|
||||
@ -90,10 +117,7 @@
|
||||
<style lang="scss" scoped>
|
||||
.link-card-mini {
|
||||
$height: 150px;
|
||||
|
||||
.row > div {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.row > div:first-child {
|
||||
display: flex;
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {Vue, Component, Prop} from "vue-property-decorator";
|
||||
import {Vue, Component, Prop, Watch} from "vue-property-decorator";
|
||||
import {bus} from "../checkin";
|
||||
|
||||
@Component
|
||||
@ -31,6 +31,7 @@
|
||||
|
||||
created() {
|
||||
bus.$on("add-tag", (tag: string) => this.tags.indexOf(tag) === -1 && this.tags.push(tag));
|
||||
bus.$on("resend-tag", () => bus.$emit("change-tag", this.tags));
|
||||
}
|
||||
|
||||
onKeyDown(event: KeyboardEvent) {
|
||||
@ -56,6 +57,11 @@
|
||||
this.tags.splice(index, 1);
|
||||
}
|
||||
|
||||
@Watch("tags")
|
||||
onTagsChanged() {
|
||||
bus.$emit("change-tag", this.tags);
|
||||
}
|
||||
|
||||
get containerClass(): object {
|
||||
return {
|
||||
"form-control": true,
|
||||
|
||||
19
resources/assets/sass/_bootstrap-custom.scss
vendored
19
resources/assets/sass/_bootstrap-custom.scss
vendored
@ -1,19 +0,0 @@
|
||||
.card-img-left {
|
||||
width: 100%;
|
||||
@include border-left-radius($card-inner-border-radius);
|
||||
}
|
||||
|
||||
.card-img-right {
|
||||
width: 100%;
|
||||
@include border-right-radius($card-inner-border-radius);
|
||||
}
|
||||
|
||||
.card-img-top-to-left {
|
||||
width: 100%;
|
||||
@include media-breakpoint-down(md) {
|
||||
@include border-top-radius($card-inner-border-radius);
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include border-left-radius($card-inner-border-radius);
|
||||
}
|
||||
}
|
||||
1
resources/assets/sass/app.scss
vendored
1
resources/assets/sass/app.scss
vendored
@ -3,7 +3,6 @@ $primary: #e53fb1;
|
||||
|
||||
// Bootstrap
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
@import "bootstrap-custom";
|
||||
|
||||
// Open Iconic
|
||||
@import "~open-iconic/font/css/open-iconic-bootstrap";
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
.link-card {
|
||||
overflow: hidden;
|
||||
|
||||
.row > div {
|
||||
max-height: 400px;
|
||||
overflow: hidden;
|
||||
|
||||
1
resources/assets/sass/tissue.css
vendored
1
resources/assets/sass/tissue.css
vendored
@ -77,3 +77,4 @@
|
||||
#navbarAccountDropdownSp {
|
||||
max-width: calc(100vw - 5em);
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<a class="text-dark card-link" href="{{ $link }}" target="_blank" rel="noopener">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-12 col-md-6 justify-content-center align-items-center">
|
||||
<img src="" alt="Thumbnail" class="card-img-top-to-left bg-secondary">
|
||||
<img src="" alt="Thumbnail" class="w-100 bg-secondary">
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="card-body">
|
||||
|
||||
@ -4607,9 +4607,9 @@ lodash.uniq@^4.5.0:
|
||||
integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
|
||||
|
||||
lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5:
|
||||
version "4.17.11"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
|
||||
integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
|
||||
version "4.17.15"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
|
||||
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
|
||||
|
||||
log-symbols@^1.0.2:
|
||||
version "1.0.2"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user