새 주제 버튼을 서브 메뉴가 있는 버튼으로 변경

개발
1

여러분, 안녕하세요.

특정 카테고리에 대해 ‘새 주제’ 버튼에 하위 메뉴를 추가하는 방법이 있는지 아시는 분 계신가요?

현재 이 상태입니다.

image
image1152×254 25.6 KB

하지만 ‘새 주제’ 버튼을 클릭했을 때 이런 식으로 나오기를 희망합니다.

image
image321×444 30.6 KB

몇 가지 방법을 생각해 봤지만, 제가 너무 복잡하게 생각하고 있는 건지 모르겠습니다. 기존 버튼을 숨기고 드롭다운이 있는 완전히 새로운 버튼을 추가하는 것이 제가 생각한 아이디어 중 하나였습니다.

위에서 말한 방식으로 진행하기 전에, 현재 가지고 있는 코드는 다음과 같습니다. 메뉴 항목을 쉽게 추가할 수 있는 방법이 있을까요?

<script type="text/x-handlebars" data-template-name="/connectors/before-create-topic-button/syncbutton"> 
  <button onclick="window.location.href='/w/issue-with-sync3'" class="btn-default btn btn-icon-text ember-view customnewtopicbtn" title="Create a new topic using the SYNC 3 Issue template">
    <svg class="fa d-icon d-icon-plus svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#plus"></use></svg>
    <span class="d-button-label">New Sync Issue</span>
  </button>
</script>

또한, ‘주제 만들기’ 버튼을 숨기는 경우, ‘새 주제’ 버튼의 링크를 가져올 수 있는 변수나 함수가 있을까요?

수정: 혹은 ‘새 주제’ 섹션이 어떻게 열리는지 궁금합니다. ID나 클래스가 일치하는 버튼을 클릭해서 열리는 줄 알았는데, 그런 것 같지는 않네요?

감사합니다.

2

이 테마 컴포넌트를 확인해 보세요:

헤더에 드롭다운 버튼을 추가하는 기능이며, 몇 가지 수정이 더 있을 수 있습니다. 하지만 기본 버튼을 대체하는 방법과 컴포저를 열고 미리 채우는 방식에 대한 아이디어를 얻을 수 있을 것입니다.

3

감사합니다. 이게 효과가 있을 것 같네요. 한번 살펴볼게요.

4

지금은 그걸 주제 목록 버튼에 어떻게 넣어야 할지가 문제인 것 같습니다. 플러그인 아울렛에는 DecorateWidget을 사용할 수 없는 것 같거든요.

5

아, 맞다. 그래서 게시하지 않았던 거였군. 더 유연하게 만들고 버튼이 여러 위치에 삽입될 수 있도록 하려고 했는데, 플러그인 아웃렛만 있는 경우 위젯을 추가하는 방법을 찾지 못했어. 이 문제에 대해 좋은 접근법을 아는 사람이 있을까?

6

히히 :slight_smile: 이것을 찾았지만, 제 스킬은 자바스크립트에는 있지 않아요 :laughing: 그래서 도움이 될지 모르겠네요

지금까지 잘하고 계시네요 :slight_smile:

7

아니, 나도 지난주에 비슷한 걸 해봤는데…

Screen Shot 2021-12-16 at 11.01.16 AM
Screen Shot 2021-12-16 at 11.01.16 AM242×155 14.5 KB

테마(theme)에서 javascripts/discourse/components/new-topic-dropdown.js 파일에 아래 코드를 추가할 수 있습니다.

import { action } from "@ember/object";
import { getOwner } from "discourse-common/lib/get-owner";
import Composer from "discourse/models/composer";
import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
import { computed } from "@ember/object";

export default DropdownSelectBoxComponent.extend({
  classNames: ["new-topic-dropdown"],

  selectKitOptions: {
    icons: ["plus"],
    showFullTitle: true,
    autoFilterable: false,
    filterable: false,
    showCaret: true,
    none: "topic.create",
  },

  content: computed(function () {
    const items = [
      {
        id: "new_discussion",
        name: "New Topic",
        description: "Start a new discussion",
        icon: "comment",
      },
    ];

    items.push({
      id: "new_ticket",
      name: "Support ticket",
      description: "Start a support request",
      icon: "tag",
    });

    return items;
  }),

  @action
  onChange(selectedAction) {
    const composerController = getOwner(this).lookup("controller:composer");

    let tags = null;
    let categoryId = this.category ? this.category.id : null;

    if (selectedAction === "new_ticket") {
      tags = "ticket";
    }

    composerController.open({
      action: Composer.CREATE_TOPIC,
      draftKey: Composer.DRAFT,
      categoryId: categoryId,
      tags: tags,
    });
  },
});

이 코드는 드롭다운 버튼에 “새 주제”(new topic)와 “지원 티켓”(support ticket) 옵션을 추가합니다. "새 주제"를 선택하면 평소처럼 컴포저(composer)가 열리고, "지원 티켓"을 선택하면 “ticket” 태그가 이미 추가된 상태로 컴포저가 열립니다.

…그리고 javascripts/discourse/connectors/after-create-topic-button/new-topic-dropdown.hbs 파일에는 다음과 같이 추가합니다.

{{#if currentUser}}
  {{new-topic-dropdown category=category}}
{{/if}}

…그 다음 CSS를 사용하여 기본 버튼을 숨기고 싶을 것입니다:

.navigation-controls {
  #create-topic {
    display: none;
  }
}
8

정말 전설적인 분이세요 :slight_smile: 감사합니다

image
image232×166 8.48 KB