Local only indicator (#6291)
* Add Local only & public indicator
* Add local only & public indicator on renotes
remove visibility conditional
* Cleaner Style
* ✌️
* Update note-header.vue
* Update note.vue
Co-authored-by: DW <chocological00@gitlab.com>
Co-authored-by: syuilo <syuilotan@yahoo.co.jp>
This commit is contained in:
parent
51cf0970b3
commit
ea80d5eac2
2 changed files with 17 additions and 11 deletions
|
@ -12,18 +12,19 @@
|
||||||
<router-link class="created-at" :to="note | notePage">
|
<router-link class="created-at" :to="note | notePage">
|
||||||
<mk-time :time="note.createdAt"/>
|
<mk-time :time="note.createdAt"/>
|
||||||
</router-link>
|
</router-link>
|
||||||
<span class="visibility" v-if="note.visibility != 'public'">
|
<span class="visibility" v-if="note.visibility !== 'public'">
|
||||||
<fa v-if="note.visibility == 'home'" :icon="faHome"/>
|
<fa v-if="note.visibility === 'home'" :icon="faHome"/>
|
||||||
<fa v-if="note.visibility == 'followers'" :icon="faUnlock"/>
|
<fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
|
||||||
<fa v-if="note.visibility == 'specified'" :icon="faEnvelope"/>
|
<fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
|
||||||
</span>
|
</span>
|
||||||
|
<span class="localOnly" v-if="note.localOnly"><fa :icon="faBiohazard"/></span>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import { faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark } from '@fortawesome/free-solid-svg-icons';
|
import { faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, faBiohazard } from '@fortawesome/free-solid-svg-icons';
|
||||||
import { faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
|
import { faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
|
@ -36,7 +37,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, farBookmark
|
faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, farBookmark, faBiohazard
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -97,6 +98,10 @@ export default Vue.extend({
|
||||||
> .visibility {
|
> .visibility {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> .localOnly {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -30,6 +30,7 @@
|
||||||
<fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
|
<fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
|
||||||
<fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
|
<fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
|
||||||
</span>
|
</span>
|
||||||
|
<span class="localOnly" v-if="note.localOnly"><fa :icon="faBiohazard"/></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<article class="article">
|
<article class="article">
|
||||||
|
@ -88,7 +89,7 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import { faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
|
import { faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
|
||||||
import { faCopy, faTrashAlt, faEdit, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
|
import { faCopy, faTrashAlt, faEdit, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
|
||||||
import { parse } from '../../mfm/parse';
|
import { parse } from '../../mfm/parse';
|
||||||
import { sum, unique } from '../../prelude/array';
|
import { sum, unique } from '../../prelude/array';
|
||||||
|
@ -146,7 +147,7 @@ export default Vue.extend({
|
||||||
showContent: false,
|
showContent: false,
|
||||||
hideThisNote: false,
|
hideThisNote: false,
|
||||||
noteBody: this.$refs.noteBody,
|
noteBody: this.$refs.noteBody,
|
||||||
faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faEllipsisH
|
faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faEllipsisH
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -872,10 +873,10 @@ export default Vue.extend({
|
||||||
|
|
||||||
> .visibility {
|
> .visibility {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
|
|
||||||
[data-icon] {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> .localOnly {
|
||||||
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue