New flags

This commit is contained in:
Natsumi
2022-07-30 23:14:20 +12:00
parent 1564b39b0d
commit 163b2a8f27
13 changed files with 256 additions and 206 deletions

View File

@@ -812,7 +812,7 @@ speechSynthesis.getVoices();
template:
"<span @click=\"showWorldDialog\" :class=\"{ 'x-link': link && this.location !== 'private' && this.location !== 'offline'}\">" +
'<i v-if="isTraveling" class="el-icon el-icon-loading" style="display:inline-block;margin-right:5px"></i>' +
'{{ text }}<slot></slot><span class="famfamfam-flags" :class="region" style="display:inline-block;margin-left:5px"></span>' +
'{{ text }}<slot></slot><span class="flags" :class="region" style="display:inline-block;margin-left:5px"></span>' +
'<i v-if="strict" class="el-icon el-icon-lock" style="display:inline-block;margin-left:5px"></i></span>',
props: {
location: String,
@@ -882,14 +882,9 @@ speechSynthesis.getVoices();
}
this.region = '';
if ($app.isRealInstance(instanceId)) {
if (L.region === 'eu') {
this.region = 'europeanunion';
} else if (L.region === 'jp') {
this.region = 'jp';
} else if (L.region === 'use') {
this.region = 'flag-icon-use';
} else {
this.region = 'flag-icon-usw';
this.region = L.region;
if (!L.region) {
this.region = 'us';
}
}
this.strict = L.strict;

View File

@@ -12,7 +12,6 @@
@import '~animate.css/animate.min.css';
@import '~noty/lib/noty.css';
@import '~element-ui/lib/theme-chalk/index.css';
@import '~famfamfam-flags/dist/sprite/famfamfam-flags.min.css';
.color-palettes {
background: #409eff;
@@ -651,20 +650,6 @@ i.x-user-status.busy {
border-radius: 2px;
}
.flag-icon-use {
background-image: url('/images/flag_use.png');
background-size: 16px 11px;
width: 16px;
height: 11px;
}
.flag-icon-usw {
background-image: url('/images/flag_usw.png');
background-size: 16px 11px;
width: 16px;
height: 11px;
}
.el-pagination .el-select .el-input .el-input__inner,
.el-input--mini .el-input__icon {
height: 22px;

100
html/src/flags.scss Normal file
View File

@@ -0,0 +1,100 @@
:root {
--offx: 20px; /* flag size */
--offy: calc(var(--offx) / 70 * 46);
}
.flags {
background: url('/images/flags.png') no-repeat;
background-size: calc(var(--offx) * 6);
width: var(--offx);
height: var(--offy);
transform: translateY(calc(var(--offx) / 16));
background-position: calc(var(--offx) * -5) calc(var(--offy) * -4);
}
span[class='flags'] {
background-position: calc(var(--offx) * 1) 0;
}
.flags.us {
background-position: 0 0;
}
.flags.kr {
background-position: calc(var(--offx) * -1) 0;
}
.flags.ru {
background-position: calc(var(--offx) * -2) 0;
}
.flags.es {
background-position: calc(var(--offx) * -3) 0;
}
.flags.pt {
background-position: calc(var(--offx) * -4) 0;
}
.flags.cn {
background-position: calc(var(--offx) * -5) 0;
}
.flags.de {
background-position: 0 calc(var(--offy) * -1);
}
.flags.jp {
background-position: calc(var(--offx) * -1) calc(var(--offy) * -1);
}
.flags.fr {
background-position: calc(var(--offx) * -2) calc(var(--offy) * -1);
}
.flags.se {
background-position: calc(var(--offx) * -3) calc(var(--offy) * -1);
}
.flags.nl {
background-position: calc(var(--offx) * -4) calc(var(--offy) * -1);
}
.flags.pl {
background-position: calc(var(--offx) * -5) calc(var(--offy) * -1);
}
.flags.dk {
background-position: 0 calc(var(--offy) * -2);
}
.flags.no {
background-position: calc(var(--offx) * -1) calc(var(--offy) * -2);
}
.flags.it {
background-position: calc(var(--offx) * -2) calc(var(--offy) * -2);
}
.flags.th {
background-position: calc(var(--offx) * -3) calc(var(--offy) * -2);
}
.flags.fi {
background-position: calc(var(--offx) * -4) calc(var(--offy) * -2);
}
.flags.hu {
background-position: calc(var(--offx) * -5) calc(var(--offy) * -2);
}
.flags.cz {
background-position: 0 calc(var(--offy) * -3);
}
.flags.tr {
background-position: calc(var(--offx) * -1) calc(var(--offy) * -3);
}
.flags.ae {
background-position: calc(var(--offx) * -2) calc(var(--offy) * -3);
}
.flags.ro {
background-position: calc(var(--offx) * -3) calc(var(--offy) * -3);
}
.flags.vn {
background-position: calc(var(--offx) * -4) calc(var(--offy) * -3);
}
.flags.ua {
background-position: calc(var(--offx) * -5) calc(var(--offy) * -3);
}
.flags.gb {
background-position: 0 calc(var(--offy) * -4);
}
.flags.use {
background-position: calc(var(--offx) * -1) calc(var(--offy) * -4);
}
.flags.eu {
background-position: calc(var(--offx) * -2) calc(var(--offy) * -4);
}
.flags.tw {
background-position: calc(var(--offx) * -3) calc(var(--offy) * -4);
}

View File

@@ -9,6 +9,7 @@ html
link(rel="preconnect" href="https://api.vrchat.cloud")
link(rel="preconnect" href="https://d348imysud55la.cloudfront.net")
link(rel="stylesheet" href="app.css")
link(rel="stylesheet" href="flags.css")
body
.x-app#x-app(style="display:none")
//- login
@@ -97,10 +98,8 @@ html
br
span.x-link(v-if="currentInstanceLocation.instanceName" @click="showLaunchDialog(lastLocation.location)")
span \#{{ currentInstanceLocation.instanceName }} {{ currentInstanceLocation.accessType }}
span.famfamfam-flags(v-if="currentInstanceLocation.region === 'eu'" class="europeanunion" style="display:inline-block;margin-left:5px")
span.famfamfam-flags(v-else-if="currentInstanceLocation.region === 'jp'" class="jp" style="display:inline-block;margin-left:5px")
span.flag-icon-use(v-else-if="currentInstanceLocation.region === 'use'" style="display:inline-block;margin-left:5px")
span.flag-icon-usw(v-else style="display:inline-block;margin-left:5px")
span.flags(v-if="currentInstanceLocation.region" :class="currentInstanceLocation.region" style="display:inline-block;margin-left:5px")
span.flags(v-else class="us" style="display:inline-block;margin-left:5px")
i.el-icon-lock(v-if="currentInstanceLocation.strict" style="display:inline-block;margin-left:5px")
span(v-if="lastLocation.playerList.size > 0" style="margin-left:5px")
| {{ lastLocation.playerList.size }}
@@ -178,7 +177,7 @@ html
el-tooltip(v-for="item in scope.row.ref.$languages" :key="item.key" placement="top")
template(#content)
span {{ item.value }} ({{ item.key }})
span.famfamfam-flags(:class="languageClass(item.key)" style="display:inline-block;margin-left:5px")
span.flags(:class="languageClass(item.key)" style="display:inline-block;margin-left:5px")
el-table-column(label="Bio Links" width="100" prop="ref.bioLinks")
template(v-once #default="scope")
el-tooltip(v-if="link" v-for="(link, index) in scope.row.ref.bioLinks" :key="index")
@@ -907,7 +906,7 @@ html
el-tooltip(v-for="item in scope.row.$languages" :key="item.key" placement="top")
template(#content)
span {{ item.value }} ({{ item.key }})
span.famfamfam-flags(:class="languageClass(item.key)" style="display:inline-block;margin-left:5px")
span.flags(:class="languageClass(item.key)" style="display:inline-block;margin-left:5px")
el-table-column(label="Bio Links" width="100" prop="bioLinks")
template(v-once #default="scope")
el-tooltip(v-if="link" v-for="(link, index) in scope.row.bioLinks" :key="index")
@@ -1446,7 +1445,7 @@ html
el-tooltip(v-for="item in userDialog.ref.$languages" :key="item.key" placement="top")
template(#content)
span {{ item.value }} ({{ item.key }})
span.famfamfam-flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px")
span.flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px")
div
el-tag.name(type="info" effect="plain" size="mini" :class="userDialog.ref.$trustClass" v-text="userDialog.ref.$trustLevel" style="margin-right:5px;margin-top:5px")
el-tag.x-tag-friend(v-if="userDialog.isFriend && userDialog.friend" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") Friend No.{{userDialog.friend.no}}
@@ -1750,10 +1749,8 @@ html
div(style="margin:5px 0")
span.x-link(@click="showLaunchDialog(room.$location.tag)")
span \#{{ room.$location.instanceName }} {{ room.$location.accessType }}
span.famfamfam-flags(v-if="room.$location.region === 'eu'" class="europeanunion" style="display:inline-block;margin-left:5px")
span.famfamfam-flags(v-else-if="room.$location.region === 'jp'" class="jp" style="display:inline-block;margin-left:5px")
span.flag-icon-use(v-else-if="room.$location.region === 'use'" style="display:inline-block;margin-left:5px")
span.flag-icon-usw(v-else style="display:inline-block;margin-left:5px")
span.flags(v-if="room.$location.region" :class="room.$location.region" style="display:inline-block;margin-left:5px")
span.flags(v-else class="us" style="display:inline-block;margin-left:5px")
i.el-icon-lock(v-if="room.$location.strict" style="display:inline-block;margin-left:5px")
el-tooltip(placement="top" content="Invite yourself" :disabled="hideTooltips")
invite-yourself(:location="room.$location.tag" style="margin-left:5px")
@@ -2012,12 +2009,12 @@ html
div(v-loading="languageDialog.loading")
div(style="margin:5px 0")
el-tag(v-for="item in API.currentUser.$languages" :key="item.key" size="small" type="info" effect="plain" closable @close="removeUserLanguage(item.key)" style="margin-right:5px")
span.famfamfam-flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px")
span.flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px")
| {{ item.value }} ({{ item.key }})
div(v-if="languageDialog.languageChoice === true")
el-select(v-model="languageDialog.languageValue" size="mini")
el-option(v-for="item in languageDialog.languages" :key="item.key" :value="item.key" :label="item.value")
span.famfamfam-flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px")
span.flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px")
| {{ item.value }} ({{ item.key }})
el-button(@click="languageDialog.languageChoice=false; addUserLanguage(languageDialog.languageValue)" size="mini") Ok
el-button(@click="languageDialog.languageChoice=false" size="mini" style="margin-left:0") Cancel
@@ -2882,10 +2879,8 @@ html
template(v-once #default="scope")
span.x-link(@click="showLaunchDialog(scope.row.location)")
span \#{{ scope.row.$location.instanceName }} {{ scope.row.$location.accessType }}
span.famfamfam-flags(v-if="scope.row.$location.region === 'eu'" class="europeanunion" style="display:inline-block;margin-left:5px")
span.famfamfam-flags(v-else-if="scope.row.$location.region === 'jp'" class="jp" style="display:inline-block;margin-left:5px")
span.flag-icon-use(v-else-if="scope.row.$location.region === 'use'" style="display:inline-block;margin-left:5px")
span.flag-icon-usw(v-else style="display:inline-block;margin-left:5px")
span.flags(v-if="scope.row.$location.region" :class="scope.row.$location.region" style="display:inline-block;margin-left:5px")
span.flags(v-else class="us" style="display:inline-block;margin-left:5px")
i.el-icon-lock(v-if="scope.row.$location.strict" style="display:inline-block;margin-left:5px")
el-table-column(label="Instance Creator" prop="location")
template(v-once #default="scope")
@@ -3130,6 +3125,13 @@ html
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
div(style="margin-top:15px")
p(style="font-weight:bold") osu!resources
pre(style="font-size:12px;white-space:pre-line").
https://github.com/ppy/osu-resources
CC-BY-NC 4.0
https://github.com/ppy/osu-resources/blob/master/LICENCE.md
div(style="margin-top:15px")
p(style="font-weight:bold") SharpDX
pre(style="font-size:12px;white-space:pre-line").

View File

@@ -79,7 +79,7 @@ Vue.component('marquee-text', MarqueeText);
Vue.component('location', {
template:
'<span>{{ text }}<slot></slot><span class="famfamfam-flags" :class="region" style="display:inline-block;margin-left:5px"></span><i v-if="strict" class="el-icon el-icon-lock" style="display:inline-block;margin-left:5px"></i></span>',
'<span>{{ text }}<slot></slot><span class="flags" :class="region" style="display:inline-block;margin-left:5px"></span><i v-if="strict" class="el-icon el-icon-lock" style="display:inline-block;margin-left:5px"></i></span>',
props: {
location: String,
hint: {
@@ -122,14 +122,9 @@ Vue.component('marquee-text', MarqueeText);
!L.isOffline &&
!L.isPrivate
) {
if (L.region === 'eu') {
this.region = 'europeanunion';
} else if (L.region === 'jp') {
this.region = 'jp';
} else if (L.region === 'use') {
this.region = 'flag-icon-use';
} else {
this.region = 'flag-icon-usw';
this.region = L.region;
if (!L.region) {
this.region = 'us';
}
}
this.strict = L.strict;

View File

@@ -7,6 +7,7 @@ html
meta(http-equiv="viewport" content="width=device-width,initial-scale=1,user-scalable=no")
title VRCXVR
link(rel="stylesheet" href="vr.css")
link(rel="stylesheet" href="flags.css")
body
.x-app#x-app(class="x-app-type" :class="{ background: appType === '1' && config && config.backgroundEnabled }")
template(v-if="appType === '1'")

View File

@@ -12,7 +12,6 @@
@import '~animate.css/animate.min.css';
@import '~noty/lib/noty.css';
@import '~element-ui/lib/theme-chalk/index.css';
@import '~famfamfam-flags/dist/sprite/famfamfam-flags.min.css';
/*
마지노선인듯
@@ -397,17 +396,3 @@ i.x-user-status.busy {
right: -160px;
bottom: 0;
}
.flag-icon-use {
background-image: url('/images/flag_use.png');
background-size: 16px 11px;
width: 16px;
height: 11px;
}
.flag-icon-usw {
background-image: url('/images/flag_usw.png');
background-size: 16px 11px;
width: 16px;
height: 11px;
}