-
-
-
- {{ item.text }}
+
+
+
+
+
+ {{ item.text }}
+
+
+
+
+
+
+
+ {{ item.text }}
+
+
+
+
+ {{ item.text }}
+
+
+
+
+ {{ item.text }}
+
+
+
+
+
+ {{ $ts.none }}
-
-
-
-
-
-
- {{ item.text }}
-
-
-
-
- {{ item.text }}
-
-
-
-
- {{ item.text }}
-
-
-
-
- {{ $ts.none }}
-
+
+
+
+
diff --git a/packages/client/src/pages/registry.value.vue b/packages/client/src/pages/registry.value.vue
index 34253cc93..9deb31e4a 100644
--- a/packages/client/src/pages/registry.value.vue
+++ b/packages/client/src/pages/registry.value.vue
@@ -74,7 +74,7 @@ function fetchValue() {
async function save() {
try {
JSON5.parse(valueForEditor);
- } catch (e) {
+ } catch (err) {
os.alert({
type: 'error',
text: i18n.ts.invalidValue,
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index f970660a4..8b1cc6c12 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -330,13 +330,11 @@ definePageMetadata(INFO);
width: 34%;
padding-right: 32px;
box-sizing: border-box;
- overflow: auto;
}
> .main {
flex: 1;
min-width: 0;
- overflow: auto;
}
}
}
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index f30b0ccbd..5bb3273b3 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -1,11 +1,11 @@
diff --git a/packages/client/src/scripts/popup-position.ts b/packages/client/src/scripts/popup-position.ts
new file mode 100644
index 000000000..e84eebf10
--- /dev/null
+++ b/packages/client/src/scripts/popup-position.ts
@@ -0,0 +1,158 @@
+import { Ref } from 'vue';
+
+export function calcPopupPosition(el: HTMLElement, props: {
+ anchorElement: HTMLElement | null;
+ innerMargin: number;
+ direction: 'top' | 'bottom' | 'left' | 'right';
+ align: 'top' | 'bottom' | 'left' | 'right' | 'center';
+ alignOffset?: number;
+ x?: number;
+ y?: number;
+}): { top: number; left: number; transformOrigin: string; } {
+ const contentWidth = el.offsetWidth;
+ const contentHeight = el.offsetHeight;
+
+ let rect: DOMRect;
+
+ if (props.anchorElement) {
+ rect = props.anchorElement.getBoundingClientRect();
+ }
+
+ const calcPosWhenTop = () => {
+ let left: number;
+ let top: number;
+
+ if (props.anchorElement) {
+ left = rect.left + window.pageXOffset + (props.anchorElement.offsetWidth / 2);
+ top = (rect.top + window.pageYOffset - contentHeight) - props.innerMargin;
+ } else {
+ left = props.x;
+ top = (props.y - contentHeight) - props.innerMargin;
+ }
+
+ left -= (el.offsetWidth / 2);
+
+ if (left + contentWidth - window.pageXOffset > window.innerWidth) {
+ left = window.innerWidth - contentWidth + window.pageXOffset - 1;
+ }
+
+ return [left, top];
+ };
+
+ const calcPosWhenBottom = () => {
+ let left: number;
+ let top: number;
+
+ if (props.anchorElement) {
+ left = rect.left + window.pageXOffset + (props.anchorElement.offsetWidth / 2);
+ top = (rect.top + window.pageYOffset + props.anchorElement.offsetHeight) + props.innerMargin;
+ } else {
+ left = props.x;
+ top = (props.y) + props.innerMargin;
+ }
+
+ left -= (el.offsetWidth / 2);
+
+ if (left + contentWidth - window.pageXOffset > window.innerWidth) {
+ left = window.innerWidth - contentWidth + window.pageXOffset - 1;
+ }
+
+ return [left, top];
+ };
+
+ const calcPosWhenLeft = () => {
+ let left: number;
+ let top: number;
+
+ if (props.anchorElement) {
+ left = (rect.left + window.pageXOffset - contentWidth) - props.innerMargin;
+ top = rect.top + window.pageYOffset + (props.anchorElement.offsetHeight / 2);
+ } else {
+ left = (props.x - contentWidth) - props.innerMargin;
+ top = props.y;
+ }
+
+ top -= (el.offsetHeight / 2);
+
+ if (top + contentHeight - window.pageYOffset > window.innerHeight) {
+ top = window.innerHeight - contentHeight + window.pageYOffset - 1;
+ }
+
+ return [left, top];
+ };
+
+ const calcPosWhenRight = () => {
+ let left: number;
+ let top: number;
+
+ if (props.anchorElement) {
+ left = (rect.left + props.anchorElement.offsetWidth + window.pageXOffset) + props.innerMargin;
+
+ if (props.align === 'top') {
+ top = rect.top + window.pageYOffset;
+ if (props.alignOffset != null) top += props.alignOffset;
+ } else if (props.align === 'bottom') {
+ // TODO
+ } else { // center
+ top = rect.top + window.pageYOffset + (props.anchorElement.offsetHeight / 2);
+ top -= (el.offsetHeight / 2);
+ }
+ } else {
+ left = props.x + props.innerMargin;
+ top = props.y;
+ top -= (el.offsetHeight / 2);
+ }
+
+ if (top + contentHeight - window.pageYOffset > window.innerHeight) {
+ top = window.innerHeight - contentHeight + window.pageYOffset - 1;
+ }
+
+ return [left, top];
+ };
+
+ const calc = (): {
+ left: number;
+ top: number;
+ transformOrigin: string;
+ } => {
+ switch (props.direction) {
+ case 'top': {
+ const [left, top] = calcPosWhenTop();
+
+ // ツールチップを上に向かって表示するスペースがなければ下に向かって出す
+ if (top - window.pageYOffset < 0) {
+ const [left, top] = calcPosWhenBottom();
+ return { left, top, transformOrigin: 'center top' };
+ }
+
+ return { left, top, transformOrigin: 'center bottom' };
+ }
+
+ case 'bottom': {
+ const [left, top] = calcPosWhenBottom();
+ // TODO: ツールチップを下に向かって表示するスペースがなければ上に向かって出す
+ return { left, top, transformOrigin: 'center top' };
+ }
+
+ case 'left': {
+ const [left, top] = calcPosWhenLeft();
+
+ // ツールチップを左に向かって表示するスペースがなければ右に向かって出す
+ if (left - window.pageXOffset < 0) {
+ const [left, top] = calcPosWhenRight();
+ return { left, top, transformOrigin: 'left center' };
+ }
+
+ return { left, top, transformOrigin: 'right center' };
+ }
+
+ case 'right': {
+ const [left, top] = calcPosWhenRight();
+ // TODO: ツールチップを右に向かって表示するスペースがなければ左に向かって出す
+ return { left, top, transformOrigin: 'left center' };
+ }
+ }
+ };
+
+ return calc();
+}
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index 503333331..3971214af 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -270,7 +270,7 @@ type Plugin = {
* 常にメモリにロードしておく必要がないような設定情報を保管するストレージ(非リアクティブ)
*/
import lightTheme from '@/themes/l-light.json5';
-import darkTheme from '@/themes/d-dark.json5';
+import darkTheme from '@/themes/d-green-lime.json5';
export class ColdDeviceStorage {
public static default = {
diff --git a/packages/client/src/types/menu.ts b/packages/client/src/types/menu.ts
index ed67e6ab8..972f6db21 100644
--- a/packages/client/src/types/menu.ts
+++ b/packages/client/src/types/menu.ts
@@ -11,10 +11,11 @@ export type MenuA = { type: 'a', href: string, target?: string, download?: strin
export type MenuUser = { type: 'user', user: Misskey.entities.User, active?: boolean, indicate?: boolean, action: MenuAction };
export type MenuSwitch = { type: 'switch', ref: Ref, text: string, disabled?: boolean };
export type MenuButton = { type?: 'button', text: string, icon?: string, indicate?: boolean, danger?: boolean, active?: boolean, avatar?: Misskey.entities.User; action: MenuAction };
+export type MenuParent = { type: 'parent', text: string, icon?: string, children: OuterMenuItem[] };
export type MenuPending = { type: 'pending' };
-type OuterMenuItem = MenuDivider | MenuNull | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton;
-type OuterPromiseMenuItem = Promise;
+type OuterMenuItem = MenuDivider | MenuNull | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent;
+type OuterPromiseMenuItem = Promise;
export type MenuItem = OuterMenuItem | OuterPromiseMenuItem;
-export type InnerMenuItem = MenuDivider | MenuPending | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton;
+export type InnerMenuItem = MenuDivider | MenuPending | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent;
diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue
index 9f7388db5..f32cd3fe0 100644
--- a/packages/client/src/ui/_common_/common.vue
+++ b/packages/client/src/ui/_common_/common.vue
@@ -1,5 +1,6 @@
-DEV BUILD