Skip to content

Commit

Permalink
fix: align the homepage speed dial
Browse files Browse the repository at this point in the history
  • Loading branch information
ci010 committed Nov 14, 2020
1 parent d947b4f commit ff78524
Show file tree
Hide file tree
Showing 2 changed files with 149 additions and 46 deletions.
100 changes: 54 additions & 46 deletions src/renderer/windows/main/pages/HomePage.vue
Original file line number Diff line number Diff line change
@@ -1,27 +1,54 @@
<template>
<v-layout
row
wrap
>
<v-layout class="home-page" row wrap>
<v-icon
v-ripple
style="position: absolute; right: 0; top: 0; z-index: 2; margin: 0; padding: 10px; cursor: pointer; border-radius: 2px; user-select: none;"
style="
position: absolute;
right: 0;
top: 0;
z-index: 2;
margin: 0;
padding: 10px;
cursor: pointer;
border-radius: 2px;
user-select: none;
"
dark
@click="quit"
>
close
</v-icon>
<v-icon
v-ripple
style="position: absolute; right: 44px; top: 0; z-index: 2; margin: 0; padding: 10px; cursor: pointer; border-radius: 2px; user-select: none;"
style="
position: absolute;
right: 44px;
top: 0;
z-index: 2;
margin: 0;
padding: 10px;
cursor: pointer;
border-radius: 2px;
user-select: none;
"
dark
@click="showFeedbackDialog"
>
help_outline
</v-icon>
<v-icon
v-ripple
style="position: absolute; right: 88px; top: 0; z-index: 2; margin: 0; padding: 10px; cursor: pointer; border-radius: 2px; user-select: none;"
style="
position: absolute;
right: 88px;
top: 0;
z-index: 2;
margin: 0;
padding: 10px;
cursor: pointer;
border-radius: 2px;
user-select: none;
"
dark
@click="showInstanceFolder"
>
Expand All @@ -36,40 +63,18 @@
<home-header />
</v-flex>

<v-flex
v-if="isServer"
d-flex
xs12
style="margin: 40px;"
>
<v-flex v-if="isServer" d-flex xs12 style="margin: 40px">
<server-status-bar />
</v-flex>

<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn
style="position: absolute; left: 20px; bottom: 10px; -webkit-user-drag: none"
flat
icon
dark
to="/base-setting"
v-on="on"
>
<v-icon dark>more_vert</v-icon>
</v-btn>
</template>
{{ $t('profile.setting') }}
</v-tooltip>
<more-speed-dial :refreshing="refreshing" />

<export-speed-dial
:refreshing="refreshing"
@show="showExport"
/>
<export-speed-dial :refreshing="refreshing" @show="showExport" />

<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn
style="position: absolute; left: 140px; bottom: 10px; "
style="position: absolute; left: 140px; bottom: 10px"
flat
icon
dark
Expand All @@ -79,7 +84,7 @@
<v-icon dark>subtitles</v-icon>
</v-btn>
</template>
{{ $t('profile.logsCrashes.title') }}
{{ $t("profile.logsCrashes.title") }}
</v-tooltip>

<problems-bar />
Expand Down Expand Up @@ -135,13 +140,8 @@
class="launch-button"
@click="launch"
>
{{ $t('launch.launch') }}
<v-icon
v-if="launchStatus === 'ready'"
right
>
play_arrow
</v-icon>
{{ $t("launch.launch") }}
<v-icon v-if="launchStatus === 'ready'" right> play_arrow </v-icon>
<v-progress-circular
v-else
class="v-icon--right"
Expand All @@ -150,16 +150,16 @@
:width="2"
/>
</v-btn>
<log-dialog
v-model="isLogDialogShown"
:hide="hideLogDialog"
/>
<log-dialog v-model="isLogDialogShown" :hide="hideLogDialog" />
<game-exit-dialog />
<feedback-dialog />
<export-dialog
:value="isExportingCurseforge || isExportingModpack"
:is-curseforge="isExportingCurseforge"
@input="isExportingModpack = false; isExportingCurseforge = false"
@input="
isExportingModpack = false;
isExportingCurseforge = false;
"
/>
</v-layout>
</template>
Expand All @@ -186,6 +186,7 @@ import ProblemsBar from './HomePageProblemsBar.vue';
import ServerStatusBar from './HomePageServerStatusBar.vue';
import ExportDialog from './HomePageExportDialog.vue';
import ExportSpeedDial from './HomePageExportSpeedDial.vue';
import MoreSpeedDial from './HomePageMoreSpeedDial.vue';
function setupLaunch() {
const { launch, status: launchStatus } = useLaunch();
Expand Down Expand Up @@ -228,6 +229,7 @@ export default defineComponent({
FeedbackDialog,
ExportDialog,
ExportSpeedDial,
MoreSpeedDial,
},
setup() {
const { $t } = useI18n();
Expand Down Expand Up @@ -332,4 +334,10 @@ export default defineComponent({
max-width: 159px;
min-width: 159px;
}
.home-page .more-button {
position: absolute;
left: 20px;
bottom: 10px;
-webkit-user-drag: none;
}
</style>
95 changes: 95 additions & 0 deletions src/renderer/windows/main/pages/HomePageMoreSpeedDial.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<template>
<v-tooltip :close-delay="0" right>
<template v-slot:activator="{ on }">
<v-speed-dial
open-on-hover
class="more-button"
direction="top"
transition="slide-y-reverse-transition"
>
<template v-slot:activator>
<v-btn
flat
icon
to="/base-setting"
dark
:loading="refreshing"
v-on="on"
@click="$emit('show', 'normal')"
>
<v-icon dark>more_vert</v-icon>
</v-btn>
</template>
<v-btn
flat
icon
dark
:loading="refreshing"
to="/advanced-setting"
v-on="on"
@mouseenter="enter($t('profile.launchingDetail'))"
>
<v-icon dark>settings_applications</v-icon>
</v-btn>
<v-btn
flat
icon
dark
:loading="refreshing"
to="/mod-setting"
v-on="on"
@mouseenter="enter($tc('mod.name', 2) )"
>
<v-icon dark style="margin-left: 24px">extensions</v-icon>
</v-btn>
<v-btn
flat
icon
dark
:loading="refreshing"
to="/resource-pack-setting"
v-on="on"
@click="$emit('show', 'resourcepacks')"
@mouseenter="enter($tc('resourcepack.name', 2) )"
>
<v-icon dark>palette</v-icon>
</v-btn>
<v-btn
flat
icon
dark
:loading="refreshing"
to="/save"
v-on="on"
@click="$emit('show', 'saves')"
@mouseenter="enter($tc('save.name', 2) )"
>
<v-icon dark>map</v-icon>
</v-btn>
</v-speed-dial>
</template>
{{ text }}
</v-tooltip>
</template>

<script lang=ts>
import { defineComponent, reactive, toRefs } from '@vue/composition-api';
import { useI18n } from '@/hooks';
export default defineComponent({
props: {
refreshing: Boolean,
},
setup() {
const { $t } = useI18n();
const data = reactive({ text: $t('profile.modpack.export') });
const enter = (text: string) => {
setTimeout(() => { data.text = text; }, 100);
};
return {
...toRefs(data),
enter,
};
},
});
</script>

0 comments on commit ff78524

Please sign in to comment.