이벤트 UI에서 달력에 추가 버튼을 더 눈에 띄게 만들기

기여 UX
1

해당 컨텍스트 메뉴를 만져보다 보니, 일정에 추가 기능이 카드에 직접 배치되는 것이 더 나은 것 같다는 생각이 듭니다.

image
image340×517 17.4 KB

해당 메뉴의 다른 항목들은 대부분 관리자용 성격이 강하지만, 일정에 추가는 모든 사용자를 위한 기능이라 UI에서 더 눈에 띄게 배치되는 것이 좋을 것 같습니다.

2개의 좋아요
Include date and time (and maybe location and description) in Oneboxes for Events
2

image
image1249×288 23.3 KB

이벤트 게시물에서는 ‘캘린더에 추가’ 옵션을 눈에 잘 띄는 위치에 배치합니다. 관리자 외관 메뉴에서 접근할 수 있는 테마 JavaScript 헤더에 아래 코드를 추가할 수 있습니다:

<script>
(() => {
    const eventInfoSelector = ".event-header .event-info";
    const submenuButtonSelector = "button.fk-d-menu__trigger.discourse-post-event-more-menu-trigger";
    const menuContentSelector = ".fk-d-menu__inner-content";
    const addToCalendarSelector = "li.add-to-calendar > button";

    // 호버 시 텍스트와 아이콘이 검은색으로 유지되도록 인라인 CSS 추가
    const style = document.createElement("style");
    style.innerHTML = `
    .btn.btn-icon-text.custom-add-to-calendar-btn,
    .btn.btn-icon-text.custom-add-to-calendar-btn:hover {
        color: black !important;
    }
    .btn.btn-icon-text.custom-add-to-calendar-btn svg,
    .btn.btn-icon-text.custom-add-to-calendar-btn:hover svg {
        fill: black !important;
    }
    `;
    document.head.appendChild(style);

    // DOM에서 요소를 기다리는 헬퍼 함수
    const waitForElement = (selector, timeout = 3000) => {
        return new Promise((resolve, reject) => {
            const el = document.querySelector(selector);
            if (el) return resolve(el);

            const observer = new MutationObserver(() => {
                const found = document.querySelector(selector);
                if (found) {
                    observer.disconnect();
                    resolve(found);
                }
            });
            observer.observe(document.body, { childList: true, subtree: true });
            setTimeout(() => {
                observer.disconnect();
                reject();
            }, timeout);
        });
    };

    const createAddToCalendarButton = async () => {
        const eventInfo = document.querySelector(eventInfoSelector);
        if (!eventInfo || eventInfo.querySelector(".custom-add-to-calendar-btn")) return;

        const button = document.createElement("button");
        button.className = "btn btn-icon-text custom-add-to-calendar-btn";
        button.title = "캘린더에 추가";
        button.innerHTML = `
            <svg class="fa d-icon d-icon-file svg-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                <use href="#file"></use>
            </svg>
            <span class="d-button-label">캘린더에 추가</span>
        `;

        // 왼쪽 정렬을 위한 인라인 스타일
        button.style.display = "inline-flex";
        button.style.justifyContent = "flex-start";
        button.style.marginLeft = "0";
        button.style.marginBottom = "4px";
        button.style.backgroundColor = "#f0f0f0";
        button.style.borderRadius = "6px";
        button.style.transition = "transform 0.2s";
        button.style.cursor = "pointer";

        // 클릭 로직: 메뉴를 열고 원래의 '캘린더에 추가' 버튼 트리거
        button.addEventListener("click", async () => {
            const submenuButton = document.querySelector(submenuButtonSelector);
            if (!submenuButton) return;
            submenuButton.click(); // 메뉴 열기

            let menuContent;
            try {
                menuContent = await waitForElement(menuContentSelector, 2000);
            } catch {
                return;
            }

            const originalButton = menuContent.querySelector(addToCalendarSelector);
            originalButton?.click();
        });

        // event-info에 삽입
        if (eventInfo.firstElementChild) {
            eventInfo.insertBefore(button, eventInfo.firstElementChild.nextSibling);
        } else {
            eventInfo.appendChild(button);
        }
    };

    // DOM 변경 사항 관찰 (Ember 안전)
    const observer = new MutationObserver(() => createAddToCalendarButton());
    observer.observe(document.body, { childList: true, subtree: true });

    // 초기 시도
    createAddToCalendarButton();
})();
</script>
1개의 좋아요
3

스크립트를 시도해 봤는데, 캘린더에 추가 기능이 실행되는 대신 컨텍스트 메뉴가 열립니다. 적어도 제 환경에서는 그렇습니다.

4

당신 말이 맞는 것 같아. 불필요한 클릭을 피하려면 사용법을 단순화하고 핵심 기능에 집중해야 해.

1개의 좋아요