장비 편집기 메뉴에 왜 이렇게 많은 옵션이 있나요?

데스크톱에서는 메인 메뉴 바에 충분한 공간이 있는데, 왜 이렇게 많은 옵션들이 기어 메뉴에 숨겨져 있나요? Preformatted text, Bulluted List, Numbered List 옵션들은 이전에 메인 메뉴 바에 있지 않았나요?

4개의 좋아요

스크린샷을 보면 아마 메타(Meta)에서 온 것 같습니다. :slight_smile:

제 노트북(Windows/Firefox)에서는 이렇게 보입니다:

사용하시는 기기에 어떤 차이가 있어서 이렇게 다른 건가요?

저도 @JammyDodger와 같은 문제를 겪고 있습니다. 브라우저 창을 줄여도 마찬가지입니다:

안녕하세요,

이것은 터치스크린 기기인가요?

4개의 좋아요

네, 이건 터치스크린 노트북이 맞습니다. 제 13인치 노트북(크기-wise로 특별히 큰 편은 아닙니다)에서 이 변경으로 인해 경험이 훨씬 나빠졌기 때문에, iPad/태블릿만 위한 다른 해결책이 찾아져서 원래대로 되돌려지기를 바랍니다.

저도 같은 문제를 겪고 있습니다.

레이아웃/에디터 버튼에 대한 더 많은 옵션을 제공할 수 있는 UI가 제공될 때까지(혹은 제공될 경우), @awesomerobot 님이 버튼 위치를 재배치하기 위한 몇 가지 CSS 예시를 제공해 주셨고, 실제로 작동합니다.

Kris 님, 감사합니다!!!

Kris 님은 이것이 현재 테마와 분리되도록 테마 컴포넌트로 추가하는 것이 가장 좋을 것이라고 제안합니다.

방법은 다음과 같습니다:

  1. admin>customize>themes로 이동한 후 new를 클릭합니다.
  2. "Tiles button order"와 같은 이름을 붙이고, 드롭다운에서 "component"를 선택한 후 create를 클릭합니다.
  3. 그런 다음 Edit CSS/HTML을 클릭하고, 위의 CSS를 common > css에 복사하여 붙여넣습니다.

이제 컴포넌트가 생성되었으므로, 현재 테마에 추가해야 합니다.

  1. 이전 페이지로 돌아가서 components 탭에서 themes 탭으로 전환합니다.
  2. 현재 활성 테마를 선택합니다(초록색 체크 표시가 있을 것입니다).
  3. 여기의 테마 설정에서 Theme Components 섹션을 찾아, 드롭다운에서 새로 만든 컴포넌트를 찾은 후 "add"를 클릭합니다.
  4. :tada: 이제 포럼 홈페이지로 돌아와 새로고침하면 활성화되어 있을 것입니다.

및 https://meta.discourse.org/t/tiles-image-gallery/81950/68에서 가져왔습니다.

저도 iPhone 8에서 옵션이 더 적게 표시됩니다. 이 변경 사항과 관련이 있는지 확실하지는 않지만, 메인 메뉴 막대에 분명히 추가 공간이 많이 있습니다.

툴바의 너비와 그 내용을 관찰하고, 사용 가능한 공간에 맞게 조정하는 것은 다소 복잡한 변경 사항으로 취약성을 초래할 가능성이 있어 그동안 이를 피해 왔습니다.

따라서 과제는 대부분의 기기에서 작동하도록, 오버플로우 없이 모든 아이콘이 컴포저에 들어맞게 하는 것입니다(이 변경 사항 이전에는 일부 좁은 터치스크린 기기에서는 톱니바퀴 메뉴에 접근조차 할 수 없었습니다). 불행히도 이로 인해 일부 경우 톱니바퀴 메뉴에 필요한 것보다 더 많은 아이콘이 들어가는 상황이 발생합니다.

관리자가 톱니바퀴 드롭다운에서 어떤 항목을 숨길지 결정할 수 있도록 사이트 설정을 추가하는 방안을 대략적으로 논의해 왔으므로, 향후 이 기능이 구성 가능하도록 변경될 수 있습니다.

13개의 좋아요

이 의견에 강력히 동의합니다.

5개의 좋아요

사용자 설정이 더 좋을 것 같습니다. :slight_smile:

주된 이유는 제가 관리자가 아니기 때문이죠, 하하. 현재로서는 제가 이 메뉴를 주로 스포일러 텍스트와 숨겨진 세부 정보를 표시하는 데 사용하고 있습니다. 이들을 메인 메뉴에 표시할 수 있다면 좋겠습니다. 하지만 이것은 매우 사용자 개인적인 사항인 것 같아서, 사이트 설정으로 해결할 수 있는 범위가 제한적입니다.

3개의 좋아요

저희 사이트에는 사용자가 게시한 코드 스니펫, 스크립트 및 로그 출력이 많이 있습니다. 터치스크린을 사용하는 경우, 사전 서식화된 코드 버튼을 톱니바퀴 메뉴로 이동시킨 것은 저희 관점에서 최선의 아이디어가 아니었습니다. 자바스크립트를 패치하는 것 외에, 이 버튼을 다시 버튼바로 되돌리거나 중요도가 낮다고 생각하는 다른 버튼과 교체할 방법이 있을까요?

2개의 좋아요

안녕하세요,

이렇게 하면 터치 기기에 새로운 사전 포맷된 텍스트(Preformatted text) 버튼을 추가할 수 있습니다.

새로운 컴포넌트 Common/Header 섹션에 다음 내용을 추가하세요.

<script type="text/discourse-plugin" version="0.8">
  const container = Discourse.__container__;
  this.capabilities = container.lookup("capabilities:main");

  if (this.capabilities.touch) {
    api.onToolbarCreate(function(toolbar) {
      toolbar.addButton({
        id: "code",
        group: "insertions",
        preventFocus: true,
        trimLeading: true,
        action: "formatCode",
      });
    });
  }
</script>

Common/CSS 섹션에 이것을 추가하세요. 이렇게 하면 팝업 메뉴에서 사전 포맷된 텍스트 버튼이 숨겨집니다.

.select-kit.dropdown-select-box.toolbar-popup-menu-options {
  li[data-value="applyFormatCode"] {
    display: none;
  }
}

4개의 좋아요

@Don - 정말 감사합니다. 완벽하게 작동합니다.

1개의 좋아요

이것은 매우 도움이 될 것입니다. 제 사이트의 대부분의 사용자들이 휠/코그 메뉴 아래에 옵션이 있다는 사실을 전혀 모르고 있다는 점을 알아차렸습니다.

1개의 좋아요

그리고 대부분의 사용자가 툴바를 전혀 사용하지 않는다는 걸 알게 되었어요. 여기 메타에서도 마찬가지고요.

그래서 대질문(tmall)은 톱니바퀴 메뉴 안에 뭐가 있거나 없는지가 아니라, 모든 걸 톱니바퀴 메뉴로 넣고 더 깔끔한 작성 경험을 제공할 수 있는지가 아닐까요 :smirking_face:

1개의 좋아요

최근 Discourse 업데이트 이후, @Don 님이 제공한 해결책이 더 이상 작동하지 않는 것 같습니다. 그리고 코드 서식 설정 버튼도 톱니바퀴 메뉴에서 사라졌습니다. 수정: 커스텀 구성 요소를 제거하면 버튼이 톱니바퀴 메뉴에 다시 나타납니다. 이제 모바일에서 헤더 메뉴에 버튼을 다시 표시하기 위한 대안적 수정이 필요합니다.

프로그래밍 학습 포럼의 관리자로서, 사용자가 모바일 기기에서도 코드를 올바르게 서식 설정할 수 있는 것은 매우 중요합니다. 이 문제가 우리에게 더 큰 어려움을 주고 있습니다. :confused:

1개의 좋아요

Hey @sableraph :wave:

감사합니다. 이제 이것에 대해 작동하는 테마 컴포넌트를 만들었습니다. GitHub - VaperinaDEV/touch-composer-code-button-to-insertions · GitHub

2개의 좋아요

답변해 주셔서 감사합니다!

테마를 설치하는 방법을 잘 모르겠지만, 님의 원래 컴포넌트를 다음과 같이 패치하는 데는 성공했습니다:

<script type="text/discourse-plugin" version="0.8">
  const container = Discourse.__container__;
  this.capabilities = container.lookup("capabilities:main");

  if (this.capabilities.touch) {
    withPluginApi("0.8", api => {
        api.onToolbarCreate(toolbar => {
          toolbar.addButton({
            id: "code",
            group: "insertions",
            icon: "code",
            preventFocus: true,
            trimLeading: true,
            action: "formatCode",
          });
        });
      });
  }
</script>

CSS는 그대로 유지됩니다.

이 문제는 최신 Discourse 업데이트(v3.3.0-beta2)에서 발생한 것 같습니다. 버튼은 툴바에 표시되지만, 클릭하면 'formatCode’가 함수가 아니라는 오류가 발생합니다. 톱니바퀴 아이콘에 있는 버튼은 정상적으로 작동합니다. 무엇이 변경되었나요?

다음으로 교체하세요:

action: () => toolbar.context.send("formatCode")

이렇게 하면 문제가 해결될 것입니다 :+1:

2개의 좋아요