カテゴリ：公開、ログインユーザーのみ、制限付き

貢献 UX
1

ログインユーザーにのみ表示されるカテゴリと、特定のグループにのみ表示されるカテゴリを区別する方法はありますか？

現在、ログインユーザーにのみ表示されるカテゴリの前のロックアイコンを非表示にするために CSS を使用しています。グループに制限されたカテゴリの前にグループアイコンを表示したいと考えています。

「いいね！」 3
3

質問の意図は理解できましたが、ユースケースについて考えています。特に、カテゴリを表示できるユーザーは、グループやログイン状態に関係なくカテゴリを表示できるためです。では、その区別はどのように役立つのでしょうか？おそらく方法はないと思いますが、間違っているかもしれません。

4

このユースケースは、鍵アイコンの場合と同じで、ユーザーに「ここで投稿したり、ここからのリンクを共有したりしても、誰でもアクセスできるわけではない」ということを思い出させるためのものだと思います。

ログイン専用カテゴリについては、そのようなリマインダーは不要だと感じています。私のサイトでは、匿名ユーザーに公開されているカテゴリが非常に少ないからです。（その代わり、公開されているカテゴリには👁アイコンを付けて、「これはインターネット上に公開されている」ということをユーザーに思い出させています。）

「ログイン必須」よりもさらに制限の強いカテゴリの場合、それが「限られたグループ専用のもの」であることがあまり明確でないことがあります。新規ユーザーは、アカウント作成時にグループへのアクセス権を付与されている場合があり、最初から他のユーザーとは異なるカテゴリ一覧を見ていることになります。しかし、カテゴリ名や説明（もしそれを読んだとしても）にヒントが含まれていない限り、そのカテゴリが一部のユーザーにのみ表示されるものであることに気づくことはできません。また、既存のユーザーであっても、かつてアクセス権を付与されたあるカテゴリが、実際には全員に公開されているわけではないことを忘れてしまう可能性があります。

つまり、結論として、ほぼすべてのカテゴリがログイン専用であるサイトにおいて、鍵アイコンをほぼ全てのカテゴリに適用するよりも、制限付きのカテゴリに対して鍵アイコンのような視覚的なリマインダーを素早く表示する方が、より理にかなっていると考えます。

「いいね！」 2
5

最近、特定の信頼レベル以上のユーザーのみがアクセスできるカテゴリを新設しました。その結果、多くのユーザーがそのトピックが「閉鎖」されたものと誤解しています。「閉鎖」と「制限付き」は異なる概念ですが、同じアイコンが使われているため混乱を招いています。一般的に、鍵のアイコンは「自分には完全なアクセス権がない」ことを示すものであり、「他の人から見えない」という意味ではありません。

「いいね！」 1
7

その間、各カテゴリの前にアクセスレベルを示すことにしました。公開カテゴリ（匿名アクセス）には地球儀のアイコンを、ログインユーザーのみがアクセスできるカテゴリには「グループ」アイコンを、その他の制限付きカテゴリには「友達」アイコンを使用しています。

Screen Shot 2020-10-13 at 09.55.39
Screen Shot 2020-10-13 at 09.55.39210×197 3.48 KB

「いいね！」 2
8

これをどのように実現していますか？素晴らしいアイデアだと思います。サイトをいくつかの公開カテゴリを持つように進めていく中で、それらにも同様のことを行いたいと考えています。グローブも気に入りました！

以下を実現したいです。

  1. everyone に設定されたカテゴリの :globe_with_meridians:
  2. trust_level_0 へのアクセスを許可するカテゴリのアイコンなし
  3. その他のすべてのカテゴリの :unlock:
9

これでできるはずです、ネイサン。

10

はい、それを使っています。svg-icons フィールドに users, user-friends と、パブリックアクセスに使用したいシンボルを入力してください（地球儀には、Freepik によるアイコンを使用しており、これは テーマコンポーネントにアップロードしたスプライト経由で Discourse に追加しました）。

テーマコンポーネントに追加したこの CSS でロックアイコンを非表示にしています。

// no lock icon for private categories
.category .badge-category.clear-badge.restricted .d-icon-lock, 
.badge-category.clear-badge.restricted .d-icon-lock,
.category-list .category-text-title .d-icon-lock,
.category-box-heading .d-icon-lock {
    display:none;
}
「いいね！」 1
11

あなたのアイデアのバリエーションを思いつきました。TL_0（手動）からアクセス可能なカテゴリのみでロックアイコンを選択的に非表示にすることができます。

これに便利なCSSクラスがないため、ホバー（title）とリンク（href）のプロパティを対象にする必要があります。また、ロックアイコンを非表示にしたい各カテゴリに対してこれを行う必要があります。

// uxカテゴリのロックアイコンを非表示にする
[title = "ux"], [href = "/c/ux/9"] {
     .d-icon {
         display: none;
     }
}

もちろん、これはCategory Icons Componentのアイコンと競合しますが、カテゴリごとに.d-iconの代わりに.d-icon-lock（または使用しているアイコン）を対象にすることで軽減できます。

アイコンの一部が欠けていることに気づいたため、CSSを編集しました。これでうまく機能しますが、カテゴリ構造を変更すると簡単に壊れてしまいます。

「いいね！」 2
12

サイドバーで使用できるように、これを少し更新しました。

// uxカテゴリのロックアイコンを非表示にする
.sidebar-section-link-ux .prefix-badge {
    display: none;
}
.category-ux .list-controls, [href = "/c/ux/9"] {
    .d-icon-lock,  {
        display: none;
    }
}
「いいね！」 1
13

カテゴリ選択ドロップダウンメニューには、さらに1つのターゲットを追加しました。

.category-ux .list-controls, [href = "/c/ux/9"], [data-value = "9"] {
    .d-icon-lock,  {
        display: none;
    }
}

チャットチャンネルには、[href *= "chat/channel/9/"] を提案します。

「いいね！」 1