thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Add tooltips to icons in saves manager

Browse source
This commit is contained in:
thepaperpilot 2022-05-10 21:42:45 -05:00
parent ce2f9f8ee0
commit 01ade0984c
2 changed files with 21 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/Save.vue
View file

@ -8,36 +8,48 @@
left left
v-if="save.error == undefined && !isConfirming" v-if="save.error == undefined && !isConfirming"
> >
<span class="material-icons">content_paste</span> <Tooltip display="Export" :direction="Direction.Left" class="info">
<span class="material-icons">content_paste</span>
</Tooltip>
</FeedbackButton> </FeedbackButton>
<button <button
@click="emit('duplicate')" @click="emit('duplicate')"
class="button" class="button"
v-if="save.error == undefined && !isConfirming" v-if="save.error == undefined && !isConfirming"
> >
<span class="material-icons">content_copy</span> <Tooltip display="Duplicate" :direction="Direction.Left" class="info">
<span class="material-icons">content_copy</span>
</Tooltip>
</button> </button>
<button <button
@click="isEditing = !isEditing" @click="isEditing = !isEditing"
class="button" class="button"
v-if="save.error == undefined && !isConfirming" v-if="save.error == undefined && !isConfirming"
> >
<span class="material-icons">edit</span> <Tooltip display="Edit Name" :direction="Direction.Left" class="info">
<span class="material-icons">edit</span>
</Tooltip>
</button> </button>
<DangerButton <DangerButton
:disabled="isActive" :disabled="isActive"
@click="emit('delete')" @click="emit('delete')"
@confirmingChanged="value => (isConfirming = value)" @confirmingChanged="value => (isConfirming = value)"
> >
<span class="material-icons" style="margin: -2px">delete</span> <Tooltip display="Delete" :direction="Direction.Left" class="info">
<span class="material-icons" style="margin: -2px">delete</span>
</Tooltip>
</DangerButton> </DangerButton>
</div> </div>
<div class="actions" v-else> <div class="actions" v-else>
<button @click="changeName" class="button"> <button @click="changeName" class="button">
<span class="material-icons">check</span> <Tooltip display="Save" :direction="Direction.Left" class="info">
<span class="material-icons">check</span>
</Tooltip>
</button> </button>
<button @click="isEditing = !isEditing" class="button"> <button @click="isEditing = !isEditing" class="button">
<span class="material-icons">close</span> <Tooltip display="Cancel" :direction="Direction.Left" class="info">
<span class="material-icons">close</span>
</Tooltip>
</button> </button>
</div> </div>
<div class="details" v-if="save.error == undefined && !isEditing"> <div class="details" v-if="save.error == undefined && !isEditing">
@ -58,7 +70,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Tooltip from "features/tooltips/Tooltip.vue";
import player from "game/player"; import player from "game/player";
import { Direction } from "util/common";
import { computed, ref, toRefs, watch } from "vue"; import { computed, ref, toRefs, watch } from "vue";
import DangerButton from "./fields/DangerButton.vue"; import DangerButton from "./fields/DangerButton.vue";
import FeedbackButton from "./fields/FeedbackButton.vue"; import FeedbackButton from "./fields/FeedbackButton.vue";

1
src/features/tooltips/Tooltip.vue
View file

@ -120,6 +120,7 @@ export default defineComponent({
position: relative; position: relative;
--xoffset: 0px; --xoffset: 0px;
--yoffset: 0px; --yoffset: 0px;
text-shadow: none !important;
} }
.tooltip, .tooltip,