Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/yamaha/320 improvement help page #328

Open
wants to merge 7 commits into
base: develop
Choose a base branch
from
Open

Fix/yamaha/320 improvement help page #328

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
792afba
[fix]ヘルプカルーセル削除
AKIYAMA-HAYATE Dec 4, 2024
0b6b4c3
[fix]ヘルプカルーセル削除
AKIYAMA-HAYATE Dec 4, 2024
3bb9012
[feat]intro.jsの実装
AKIYAMA-HAYATE Dec 4, 2024
ca7dd87
[fix]各ボタンにidプロップスを追加
AKIYAMA-HAYATE Dec 4, 2024
e579972
[feat]tooltipに表示する説明文の追加
AKIYAMA-HAYATE Dec 4, 2024
b232e0a
[feat]introjsの導入
AKIYAMA-HAYATE Dec 4, 2024
a22417e
[fix]コードを整えた
AKIYAMA-HAYATE Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions view-user/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions view-user/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"fs": "^0.0.1-security",
"graphql": "^16.7.1",
"graphql-codegen": "^0.4.0",
"intro.js": "^7.2.0",
"matter-js": "^0.19.0",
"minio": "^7.1.1",
"next": "^14.2.3",
Expand Down
179 changes: 41 additions & 138 deletions view-user/src/components/Layout/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { useLazyQuery, useMutation } from "@apollo/client";
import { useState, useRef, useLayoutEffect, useEffect } from "react";
import { useState, useEffect, useRef, useLayoutEffect } from "react";
import { useRouter } from "next/router";
import styles from "./Layout.module.css";
import "intro.js/minified/introjs.min.css";
import {
ReachIcon,
PrizesIcon,
Expand All @@ -28,7 +29,6 @@ import type {
GetOneLatestReachLogQuery,
} from "@/types/graphql";
import { ja, en } from "@/locales";
import { TwitterPicker } from "react-color";

const images = [
{ name: "crap", src: "/ReactionIcon/crap.png", alt: "crap icon" },
Expand All @@ -41,35 +41,6 @@ const images = [
{ name: "sad", src: "/ReactionIcon/sad.png", alt: "sad icon" },
];

const COLOR_PRESETS = {
MAIN_COLORS: [
"#FF6900",
"#FCB900",
"#7BDCB5",
"#00D084",
"#8ED1FC",
"#0693E3",
"#333333",
"#EB144C",
"#F78DA7",
"#9900EF",
],
SUB_COLORS: [
"#FFD9BE",
"#FDECBD",
"#C2EFDD",
"#C3F5E3",
"#DBF0FE",
"#C0E4F8",
"#B1B1B1",
"#FDECF0",
"#FCDBE3",
"#E4BBFA",
],
DEFAULT_MAIN_COLOR: "#20A0D8",
DEFAULT_SUB_COLOR: "#C4DEED",
};

interface LayoutProps {
children: React.ReactNode;
pageName: string;
Expand All @@ -82,28 +53,20 @@ interface LayoutProps {
const Layout = (props: LayoutProps) => {
const router = useRouter();
const t = props.language === "ja" ? ja : en;

const [isReactionModalOpen, setIsReactionModalOpen] = useState(false);
const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);

const [isSortOrderActive, setIsSortOrderActive] = useState(false);
const { setIsSortedAscending } = props;

const [isReachModalOpen, setIsReachModalOpen] = useState(false);
const [isReachIconVisible, setReachIconVisible] = useState(true);

const [mainColor, setMainColor] = useState(COLOR_PRESETS.DEFAULT_MAIN_COLOR);
const [subColor, setSubColor] = useState(COLOR_PRESETS.DEFAULT_SUB_COLOR);

const [isReactionModalOpen, setIsReactionModalOpen] =
useState<boolean>(false);
const [isSettingsModalOpen, setIsSettingsModalOpen] =
useState<boolean>(false);
const [isSortOrderActive, setIsSortOrderActive] = useState<boolean>(false);
const [isReachModalOpen, setIsReachModalOpen] = useState<boolean>(false);
const [isReachIconVisible, setReachIconVisible] = useState<boolean>(true);
const [navBarHeight, setNavBarHeight] = useState<string>();
const navRef = useRef<HTMLDivElement>(null);
const position = isReachIconVisible ? "29%" : "50%";

const position: string = isReachIconVisible ? "29%" : "50%";
const [createStampRecord] = useMutation<
CreateOneStampTriggerMutation,
CreateOneStampTriggerMutationVariables
>(CreateOneStampTriggerDocument);

const [getLatestReachLog] = useLazyQuery<GetOneLatestReachLogQuery>(
GetOneLatestReachLogDocument,
);
Expand All @@ -112,48 +75,36 @@ const Layout = (props: LayoutProps) => {
CreateOneReachRecordMutation,
CreateOneReachRecordMutationVariables
>(CreateOneReachRecordDocument);

// ナビゲーションバーの高さを設定
5;
// navBarの高さをstring型で渡す
useLayoutEffect(() => {
if (navRef.current) {
const navHeight = navRef.current.getBoundingClientRect().height;
setNavBarHeight(navHeight.toString());
}
}, []);

// ローカルストレージから設定を読み込む
// localStorageから状態を読み込む
useEffect(() => {
const storedSortOrder = localStorage.getItem("isSortedAscending");
const storedVisibility = localStorage.getItem("isReachIconVisible");
const storedMainColor = localStorage.getItem("mainColor");
const storedSubColor = localStorage.getItem("subColor");
if (storedVisibility !== null) {
setReachIconVisible(storedVisibility === "true");
}

setIsSortOrderActive(
storedSortOrder !== null ? storedSortOrder === "true" : false,
);
setReachIconVisible(
storedVisibility !== null ? storedVisibility === "true" : true,
);
setMainColor(storedMainColor || COLOR_PRESETS.DEFAULT_MAIN_COLOR);
setSubColor(storedSubColor || COLOR_PRESETS.DEFAULT_SUB_COLOR);
const storedSortOrder = localStorage.getItem("isSortedAscending");
if (storedSortOrder !== null) {
const isSortedAscending = storedSortOrder === "true";
props.setIsSortedAscending?.(isSortedAscending);
setIsSortOrderActive(isSortedAscending);
} else {
localStorage.setItem("isSortedAscending", "false");
}
}, []);

// 初期設定を適用
useEffect(() => {
// ソート順を親コンポーネントに伝える
setIsSortedAscending?.(isSortOrderActive);

// カラーを適用
document.documentElement.style.setProperty("--main-color", mainColor);
document.documentElement.style.setProperty("--sub-color", subColor);
}, [isSortOrderActive, mainColor, subColor, setIsSortedAscending]);

// リアクションアイコンがクリックされたときの処理
const handleReactionClick = (name: string) => {
createStampRecord({ variables: { name } });
};

// リーチアイコンがクリックされたときの処理
const handleReachIconClick = async () => {
try {
const { data } = await getLatestReachLog();
Expand All @@ -173,86 +124,59 @@ const Layout = (props: LayoutProps) => {
}
};

// ソート順を切り替える
const toggleSortOrder = () => {
const newSortOrder = !isSortOrderActive;
localStorage.setItem("isSortedAscending", newSortOrder.toString());
setIsSortedAscending?.(newSortOrder);
setIsSortOrderActive(newSortOrder);
if (props.setIsSortedAscending) {
const newSortOrder = !props.isSortedAscending;
localStorage.setItem("isSortedAscending", newSortOrder.toString());
props.setIsSortedAscending(newSortOrder);
setIsSortOrderActive(newSortOrder);
}
};

// 言語を切り替える
const toggleLanguage = () => {
const newLocale = props.language === "ja" ? "en" : "ja";
router.push(router.pathname, router.asPath, { locale: newLocale });
};

// メインカラーを変更する
const handleMainColorChange = (color: { hex: string }) => {
const newColor = color.hex;
setMainColor(newColor);
localStorage.setItem("mainColor", newColor);
document.documentElement.style.setProperty("--main-color", newColor);
};

// サブカラーを変更する
const handleSubColorChange = (color: { hex: string }) => {
const newColor = color.hex;
setSubColor(newColor);
localStorage.setItem("subColor", newColor);
document.documentElement.style.setProperty("--sub-color", newColor);
};

// カラーをリセットする
const resetColors = () => {
setMainColor(COLOR_PRESETS.DEFAULT_MAIN_COLOR);
setSubColor(COLOR_PRESETS.DEFAULT_SUB_COLOR);
localStorage.removeItem("mainColor");
localStorage.removeItem("subColor");
document.documentElement.style.setProperty(
"--main-color",
COLOR_PRESETS.DEFAULT_MAIN_COLOR,
);
document.documentElement.style.setProperty(
"--sub-color",
COLOR_PRESETS.DEFAULT_SUB_COLOR,
);
};

// ページごとのアイコンを設定する
const icons = (pageName: string) => {
let icons = [];
const commonIcons = [
<ReactionsIcon
isOpen={isReactionModalOpen}
setIsReactionModalOpen={setIsReactionModalOpen}
key="reaction"
id="ReactionsIcon"
/>,
isReachIconVisible && (
<ReachIcon
key="reach"
isOpen={isReachModalOpen}
setIsReachModalOpen={setIsReachModalOpen}
onClick={handleReachIconClick}
id="ReachIcon"
/>
),
<SettingsIcon
key="settings"
isOpen={isSettingsModalOpen}
setIsSettingsModalOpen={setIsSettingsModalOpen}
id="SettingsIcon"
/>,
];

switch (pageName) {
case "/":
return [<PrizesIcon key="prize" />, ...commonIcons];
icons = [<PrizesIcon key="prize" id="PrizesIcon" />, commonIcons];
break;
case "/prizes":
return [<BackIcon key="back" />, ...commonIcons];
icons = [<BackIcon key="back" />, commonIcons];
break;
default:
return [<PrizesIcon key="prize" />, ...commonIcons];
icons = [<PrizesIcon key="prize" />, commonIcons];
}
return icons.filter(Boolean);
};

const iconElements = icons(props.pageName).filter(Boolean);
const iconElements = icons(props.pageName);

return (
<div>
Expand Down Expand Up @@ -300,27 +224,6 @@ const Layout = (props: LayoutProps) => {
<span>{t.settingsModal.ascending}</span>
</ToggleButton>
</div>
<div>
<p>メインカラー</p>
<TwitterPicker
color={mainColor}
colors={COLOR_PRESETS.MAIN_COLORS}
triangle="hide"
onChange={handleMainColorChange}
/>
</div>
<div>
<p>サブカラー</p>
<TwitterPicker
color={subColor}
colors={COLOR_PRESETS.SUB_COLORS}
triangle="hide"
onChange={handleSubColorChange}
/>
</div>
<div className={styles.resetButton}>
<Button onClick={resetColors}>カラーを初期値に戻す</Button>
</div>
</div>
</Modal>
<Header />
Expand Down
13 changes: 13 additions & 0 deletions view-user/src/components/common/Header/Header.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,16 @@
.logo path:nth-child(2) {
fill: var(--main-color);
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

一応コメントつけますか。
// note introjsのcssをカスタムで指定できないためimportantを使う

.customTooltip {
border: 2vw solid var(--main-color) !important;
min-width: 50vw !important;
max-width: 100vw !important;
}

.customTooltip * {
border-color: var(--main-color) !important;
text-shadow: none !important;
color: var(--main-color) !important;
background-color: var(--sub-color) !important;
}
Loading
Loading