HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Replace classic view widgets w/ the one from default view

Browse source
This commit is contained in:
Freeplay 2023-05-11 18:34:44 -04:00
parent 619250a51d
commit 91345ceed1
2 changed files with 2 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/client/src/ui/classic.vue
View file

@ -72,7 +72,7 @@ import {
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
const XHeaderMenu = defineAsyncComponent(() => import("./classic.header.vue")); const XHeaderMenu = defineAsyncComponent(() => import("./classic.header.vue"));
const XWidgets = defineAsyncComponent(() => import("./classic.widgets.vue")); const XWidgets = defineAsyncComponent(() => import("./universal.widgets.vue"));
const DESKTOP_THRESHOLD = 1100; const DESKTOP_THRESHOLD = 1100;
@ -101,7 +101,7 @@ provide("shouldSpacerMin", true);
function attachSticky(el) { function attachSticky(el) {
const sticky = new StickySidebar( const sticky = new StickySidebar(
el, el,
defaultStore.state.menuDisplay === "top" ? 0 : 16, defaultStore.state.menuDisplay === 0,
defaultStore.state.menuDisplay === "top" ? 60 : 0 defaultStore.state.menuDisplay === "top" ? 60 : 0
); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す ); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
window.addEventListener( window.addEventListener(
@ -282,7 +282,6 @@ onMounted(() => {
> .widgets { > .widgets {
//--panelBorder: none; //--panelBorder: none;
width: 300px; width: 300px;
margin-top: 16px;
@media (max-width: $widgets-hide-threshold) { @media (max-width: $widgets-hide-threshold) {
display: none; display: none;

127
packages/client/src/ui/classic.widgets.vue
View file

@ -1,127 +0,0 @@
<template>
<div class="ddiqwdnk">
<MkAd class="a" :prefer="['widget']" />
<XWidgets
class="widgets"
:edit="editMode"
:widgets="
$store.reactiveState.widgets.value.filter(
(w) => w.place === place
)
"
@add-widget="addWidget"
@remove-widget="removeWidget"
@update-widget="updateWidget"
@update-widgets="updateWidgets"
@exit="editMode = false"
/>
<button
v-if="editMode"
class="_textButton edit"
style="font-size: 0.9em"
@click="editMode = false"
>
<i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.editWidgetsExit }}
</button>
<button
v-else
class="_textButton edit"
style="font-size: 0.9em"
@click="editMode = true"
>
<i class="ph-pencil ph-bold ph-lg"></i> {{ i18n.ts.editWidgets }}
</button>
</div>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent } from "vue";
import XWidgets from "@/components/MkWidgets.vue";
import { i18n } from "@/i18n";
export default defineComponent({
components: {
XWidgets,
},
props: {
place: {
type: String,
},
},
emits: ["mounted"],
data() {
return {
editMode: false,
i18n,
};
},
mounted() {
this.$emit("mounted", this.$el);
},
methods: {
addWidget(widget) {
this.$store.set("widgets", [
{
...widget,
place: this.place,
},
...this.$store.state.widgets,
]);
},
removeWidget(widget) {
this.$store.set(
"widgets",
this.$store.state.widgets.filter((w) => w.id !== widget.id)
);
},
updateWidget({ id, data }) {
this.$store.set(
"widgets",
this.$store.state.widgets.map((w) =>
w.id === id
? {
...w,
data,
}
: w
)
);
},
updateWidgets(widgets) {
this.$store.set("widgets", [
...this.$store.state.widgets.filter(
(w) => w.place !== this.place
),
...widgets,
]);
},
},
});
</script>
<style lang="scss" scoped>
.ddiqwdnk {
position: sticky;
height: min-content;
box-sizing: border-box;
padding-bottom: 8px;
> .widgets,
> .a {
width: 300px;
}
> .edit {
display: block;
margin: 16px auto;
}
}
</style>