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:
DW 2020-05-16 09:06:39 -04:00 committed by GitHub
parent 51cf0970b3
commit ea80d5eac2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 11 deletions

View file

@ -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>

View file

@ -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] { > .localOnly {
margin-right: 0; margin-left: 8px;
}
} }
} }
} }