Fix/change UI setting qall #4192

damin3A3 · 2023-12-09T12:49:08Z

issue：
#2203

設定画面の通話(Qall)のページを改善しました。
デザイン元：
https://www.figma.com/file/6Wme6N24y3GN2jD0vqZWZr/traQ-S-UI?type=design&node-id=1-1355&mode=design

変更内容
・ページの設定項目の順番の変更
・「RTC機能」「メッセージの読み上げ」の項目のトグルの位置を右側に変更
・デザイン元に従った文章、文字の太さなどの細かい変更

◯「マスターボリューム」「ノイズゲート」のスライダーですが、見た目がデザイン元通りになっているか確認できておりません。
（自分のPCはMacのため、違う見た目になっているかもしれないです。）ご確認をお願いいたします。

github-actions · 2023-12-09T12:49:22Z

Preview (prod) → https://4192-prod.traq-preview.trapti.tech/
Preview (dev) → https://4192-dev.traq-preview.trapti.tech/

codecov · 2023-12-09T12:51:07Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (24d955b) 86.35% compared to head (1942bf9) 86.35%.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #4192   +/-   ##
=======================================
  Coverage   86.35%   86.35%           
=======================================
  Files          66       66           
  Lines        4719     4719           
  Branches      564      564           
=======================================
  Hits         4075     4075           
  Misses        638      638           
  Partials        6        6

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

mehm8128 · 2023-12-09T15:40:28Z

PRありがとうございます！
プレビューでエラー出てるのはここ↓で直したのが取り込めてなさそうなので、masterブランチをmergeかrebaseしてみてください:pray:
#4158

また、issueのURL書いてくれるのはありがたいのですが、closehttps://github.com/traPtitech/traQ_S-UI/issues/2203って書いちゃうと他のページが終わってないのに設定画面のissueがcloseされてしまうので、closeは消しておいてほしいです(もしかしたら紐づけは解除されないかもなのでその場合はサイドバーから紐づけも外しておいてほしいです)

damin3A3 · 2023-12-09T17:50:21Z

ご確認いただきありがとうございます！
ご指摘いただいた部分を修正します。

damin3A3 · 2023-12-10T18:02:18Z

連絡が遅れて申し訳ありません、ご指摘いただいたところを修正しました。
お時間ある時にご確認お願いいたします。

mehm8128

大体よさそうですがいくつか書いてみました

mehm8128 · 2023-12-26T14:42:18Z

src/components/Settings/QallTab/NoiseSuppression.vue

+  display: block;
+  font-weight: bold;


NatsukiくんのPRでFormRadioコンポーネント自体を変えてもらってるので、ここらへんはもしかしたらまたちょっと変えてもらうかもです

ありがとうございます！
一旦変えずに今後の指示を待ちます。

mehm8128 · 2023-12-26T14:47:10Z

src/views/Settings/QallTab.vue

 .enable {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
-  h3 {
-    margin: 0;
+  .header_and_content {


class名はcamelCaseにしてほしいです:pray:

ご指摘ありがとうございます。
下でアドバイスをいただいている通り、class名をsectionにしました。

mehm8128 · 2023-12-26T14:48:54Z

src/views/Settings/QallTab.vue

@@ -2,76 +2,35 @@
  <section>
    <div :class="$style.element">
      <div :class="$style.enable">
-        <h3 :class="$style.header">RTC機能を有効にする</h3>
+        <div :class="$style.header_and_content">


多分ここはh3使ってることもあってdivじゃなくてsectionタグで囲う方がいいので、header_and_contentのclassつけてるところはdivじゃなくてsectionにして、class名もsectionにするといいと思います

アドバイスをありがとうございます。
header_and_contentの名前をsectionに変更して、これを使うところはdivでなくsectionタグを使うようにしました。
変更を加えなかった他の部分の見出しは元からdivですが、そこはあまり気にしなくて良いでしょうか？

他のところもできれば変えておいてほしいです！

ありがとうございます。わかりました。

mehm8128 · 2023-12-26T14:50:16Z

src/views/Settings/QallTab.vue

@@ -2,76 +2,35 @@
  <section>
    <div :class="$style.element">
      <div :class="$style.enable">
-        <h3 :class="$style.header">RTC機能を有効にする</h3>
+        <div :class="$style.header_and_content">
+          <h3 :class="$style.header">RTC機能</h3>


元からこうだったので、できればでいいのですが、headerじゃなくてheadingが正しいと思うので余裕あったら直してほしいです(他のh3も同様)

ご指摘ありがとうございます。
修正しました。

mehm8128 · 2023-12-26T14:56:52Z

src/views/Settings/QallTab.vue

+      </div>
+      <div :class="$style.element">
+        <h3 :class="$style.header">マスターボリューム</h3>
+        <form-range-with-value


スライダー、僕のwindows+chromeの環境だとこんな感じなのですが、そちらではどんな表示ですか？(ブラウザも教えてほしいです)

ご確認ありがとうございます。
自分の環境だとこんな感じです。

mac+chrome モバイル表示でも大体同じ感じです。

mac+safari

iphone+iOS PWA(Safari)
確認できなかったのですが、変更なし（開発環境でないtraQ）の場合こんな感じで、今回の変更で色などは変更していないので、これと同じ感じだと思います。

Figma上のものはchromeを想定してデザインしてくださっているのかなと思うのですが、PCやブラウザに関わらず同じデザインになるようにした方がいいのでしょうか。
よろしくお願いいたします。

なるほどです
ブラウザによって結構変わっちゃうのでこのままでもいい気がしますが、一応周りの灰色部分消すことができるかどうかくらいでいいので、調べてみてできそうだったらやってみてほしいです！

ありがとうございます。わかりました。

お疲れ様です。スライダーなのですが、FormRangeWithValue.vueを変更してしまってもいいですか？

リポジトリ全体に対して<form-range-with-valueで検索をかけてみると、このコンポーネントが今のところQallの設定画面でしか使われていないことが分かるので、OKです

ありがとうございます。確かにQallの設定画面以外では文字列がヒットしませんでした。
では、スライダーの設定のコードを変更してみます。

mehm8128 · 2023-12-26T15:02:42Z

src/views/Settings/QallTab.vue

      </div>
      <div v-if="state.isTtsEnabled" :class="$style.element">
-        <h3 :class="$style.header">メッセージ読み上げの声</h3>
-        <div :class="$style.content">
+        <div>


このdivなくてよさそうです？

ご指摘ありがとうございます。
確かに要らなそうだったので、消去しました。

mehm8128 · 2023-12-26T15:03:59Z

src/views/Settings/QallTab.vue

          <form-selector
            v-if="voiceOptions.length > 0"
            v-model="state.voiceName"
+            label="読み上げボイスの種類"
            :options="voiceOptions"
          />
-          <p v-else>読み上げ音声の声の種類が取得できませんでした</p>
+          <p v-else>読み上げ音声の声の種類が取得できませんでした。</p>
          <form-input
            v-model.number="state.voicePitch"
            label="ピッチ"


ラベルと上のフィールドの隙間がないのが気になるので、それぞれの間にmarginつけるようにしてほしいです

ご指摘ありがとうございます。
cssのstyleにoptionクラスを追加し、空白をつけました。
項目（「読み上げボイスの種類」など）の文字がFigmaでは少し小さくなっているので、そこも調整しました。
また、ノイズゲートの見出しとスライダの間も隙間が少し小さく感じたので、修正しました。必要なければ元に戻します。

新規クラス

.option：読み上げボイスの詳細設定のクラスです。上下にmarginがあり、font-sizeを小さめにしています。

.content：ノイズゲートのクラスです。上下にmarginがあります。

入力デバイスなど margin修正前

入力デバイスなど margin修正後

よろしくお願いいたします。

mehm8128 · 2023-12-28T11:35:04Z

src/views/Settings/QallTab.vue

+          v-model="state.voiceName"
+          label="読み上げボイスの種類"
+          :options="voiceOptions"
+          :class="$style.option"


Figmaで要素を選択した状態でalt押すと、他の要素との距離が見れるので、それを参考にしてちょっと値変えてほしいです:eyes:
1つ目の画像のは多分form-input自体を変えることになるのですが、変えてokだと思います

mehm8128 · 2023-12-28T11:36:20Z

src/views/Settings/QallTab.vue

+  margin: 12px 0;
+  font-size: 12px;
+}
+.content {


ここもFigmaだと上にだけ4pxあるので、上下に12pxから変えてほしいです！

わかりました、ありがとうございます！
Figmaの方を参考に微調整します。

mehm8128 · 2023-12-28T11:37:35Z

src/views/Settings/QallTab.vue

+      </div>
+      <div :class="$style.element">
+        <h3 :class="$style.header">マスターボリューム</h3>
+        <form-range-with-value


なるほどです
ブラウザによって結構変わっちゃうのでこのままでもいい気がしますが、一応周りの灰色部分消すことができるかどうかくらいでいいので、調べてみてできそうだったらやってみてほしいです！

damin3A3 · 2023-12-31T11:32:47Z

お疲れ様です。
要素間の空白の調整は終わったのですが、スライダの見た目の調整は少し時間がかかってしまいそうです。
締め切りが年内だったと思うので、もし一旦変更を締め切る場合はここで一区切りとさせてください。
1月も作業を続けてよさそうでしたら、引き続きスライダの調整に取り組みます。

mehm8128 · 2023-12-31T11:35:16Z

まだ自分含めて他の人も終わってないので大丈夫です！引き続きお願いします:pray:

damin3A3 · 2023-12-31T12:35:27Z

わかりました！ありがとうございます。

mehm8128

すみません最後に1つだけ:pray:

mehm8128 · 2024-01-22T12:47:41Z

src/components/UI/FormSelector.vue

@@ -51,7 +51,7 @@ const id = randomString()
 <style lang="scss" module>
 .label {
  @include color-ui-secondary;


ここと、FormInputのラベルの色が変わってたっぽいので直してほしいです:pray:

Suggested change

@include color-ui-secondary;

@include color-ui-primary;

ご指摘ありがとうございます。
修正しました。

damin3A3 · 2024-01-22T15:54:16Z

スライダーの見た目を変えるところに少し着手したのですが、擬似要素を使う方法があまりうまくいかず（擬似要素を使っても思ったように設定できないところがあった＋できればwebkit-sliderを使わず書きたいが、擬似要素を使う場所を指定するためにwebkit-sliderが必要）、vue-slider-componentを使う方法を試してみようかと思っています。
vue-slider-componentを使う場合、設定画面のスライダについての新しい.vueファイルを書くという形になるのでしょうか？

mehm8128 · 2024-01-23T02:55:53Z

一応::-webkit-slider-thumbにtransform: translateY(-4px);とかつければ表示はいい感じになりそうですが、firefoxとかだと崩れるのでwebkit-sliderは使わない方がよさそうですねー
vue-slider-componentに関しては既にASlider.vueがあるので、↓のどっちかになりそうです

これのCSSやpropsを変えて使う
設定画面用にこれを使ったコンポーネントを新しく作る

ASliderはhttps://github.com/traPtitech/traQ_S-UI/blob/24d955b6ac3b917a950fd357634787c4fb77cc17/src/components/Main/NavigationBar/EphemeralNavigationContent/QallController/QallDetailsPanelUser.vue とかで使われているので参考になるかもです

damin3A3 · 2024-01-23T16:00:55Z

ありがとうございます。FormRangeWithValue.vueを書き換えて、form-inputを使っていたところをa-sliderを使用するようにしたいと思います。
ASlider.vueのデフォルト値などはなるべく変えないようにしたいと思っていますが、設定画面のスライダで新しく必要になる項目（intervalなど）は必要に応じて指定できるようにpropsに追加しました。

damin3A3 · 2024-01-27T14:19:04Z

スライダーの色味を変更しました。
FormRangeWithValue.vueで、スライダの棒部分の背景色の透過度を50%にするという設定で、opacityを棒だけ変更するということが出来なさそうだったため、そこだけCSS変数の参照を使わずにrgbaで設定しました。

おそらく必要な変更は一通り行ったと思います。
お時間のある時にご確認をよろしくお願いいたします。

mehm8128

大体よさそうですが、あとちょっとお願いします🙏

mehm8128 · 2024-01-29T04:31:22Z

src/components/UI/FormRangeWithValue.vue

      :max="max"
+      :disabled="disabled"
+      :tooltip="'none'"


Suggested change

:tooltip="'none'"

tooltip="none"

mehm8128 · 2024-01-29T04:35:59Z

src/components/UI/FormRangeWithValue.vue

+    <a-slider
      v-model.number="value"
      :class="$style.range"
-      type="range"
      :min="min"
-      :step="step"
      :max="max"
+      :disabled="disabled"
+      :tooltip="'none'"
+      :interval="interval"


今ちょっと縦のクリック可能範囲が狭くてクリックしづらいので、↓を入れるとかして(もっといい方法あればstyle属性入れる以外の方法がいいけど、ライブラリ側のstyle属性に上書きされちゃって難しそうかも？)クリック可能範囲を増やしてほしいかもです(デザインとちょっと余白とか変わっちゃってもOKです)
:style="{padding: '24px 0'}"

分かりづらいけど赤矢印で示した幅↓

mehm8128

よさそうです、ありがとうございます！(ラジオボタンの保留してたところはあとで別で対応するので一旦このままマージでOKだと思います)

damin3A3 · 2024-01-29T06:44:02Z

ありがとうございます！
マージはこちらでやってしまっていいのでしょうか？

mehm8128 · 2024-01-29T06:45:42Z

大丈夫です！お願いします

damin3A3 added 2 commits December 9, 2023 19:00

設定画面（通話）の項目の順番変更、文章の一部修正、ラジオボタンのレイアウト変更

084ea2b

設定画面（通話）のレイアウト、見た目微調整

00a4c44

damin3A3 added 4 commits December 9, 2023 21:58

設定画面（通話）のレイアウト変更

cd8048e

文字関連の変更を一度消した

267ee07

変更を戻した

77a781f

コードの細かい修正

0a6646c

damin3A3 linked an issue Dec 9, 2023 that may be closed by this pull request

設定画面のUI改善 #2203

Closed

damin3A3 removed a link to an issue Dec 9, 2023

設定画面のUI改善 #2203

Closed

Merge branch 'master' into fix/change_UI_Setting_Qall

fce2b7c

mehm8128 reviewed Dec 26, 2023

View reviewed changes

damin3A3 added 3 commits December 28, 2023 16:59

Merge branch 'master' into fix/change_UI_Setting_Qall

424b9c6

指摘をいただいたところの修正

b42c4f0

prettierでのフォーマット修正

6227ea4

mehm8128 reviewed Dec 28, 2023

View reviewed changes

damin3A3 added 4 commits December 29, 2023 21:44

タグの修正

fd7e59d

行間調整

2d0d30a

コードのフォーマットの修正

4f77a77

ラジオボタンの変更を元に戻した

56f7f20

damin3A3 added 2 commits January 12, 2024 17:13

スライダの背景色を消去した

394a67b

Merge branch 'master' into fix/change_UI_Setting_Qall

1846ee5

mehm8128 reviewed Jan 22, 2024

View reviewed changes

ラベルの色の修正

3f0aa29

damin3A3 added 2 commits January 24, 2024 00:55

vue-slider-componentを使用した（色未修正）

70cf5ff

フォーマット修正

b473e77

damin3A3 added 4 commits January 24, 2024 01:07

データ型の統一

2fa1e4a

フォーマット再修正

3c61a3a

データ型の修正を試みた

5c9b05c

スライダの色を調整した

4689e71

mehm8128 reviewed Jan 29, 2024

View reviewed changes

スライダーのクリック範囲を広くした

1942bf9

mehm8128 approved these changes Jan 29, 2024

View reviewed changes

damin3A3 merged commit b7a8def into master Jan 29, 2024
11 checks passed

damin3A3 deleted the fix/change_UI_Setting_Qall branch January 29, 2024 12:40

Fix/change UI setting qall #4192

Fix/change UI setting qall #4192

Conversation

damin3A3 commented Dec 9, 2023 • edited Loading

github-actions bot commented Dec 9, 2023

codecov bot commented Dec 9, 2023 • edited Loading

Codecov Report

mehm8128 commented Dec 9, 2023

damin3A3 commented Dec 9, 2023

damin3A3 commented Dec 10, 2023

mehm8128 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

damin3A3 Dec 28, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

damin3A3 Dec 28, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

damin3A3 Dec 28, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

damin3A3 Dec 28, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

damin3A3 Dec 28, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

damin3A3 Dec 28, 2023 • edited Loading

Choose a reason for hiding this comment

新規クラス

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

damin3A3 commented Dec 31, 2023

mehm8128 commented Dec 31, 2023

damin3A3 commented Dec 31, 2023

mehm8128 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

damin3A3 commented Jan 22, 2024

mehm8128 commented Jan 23, 2024

damin3A3 commented Jan 23, 2024 • edited Loading

damin3A3 commented Jan 27, 2024 • edited Loading

mehm8128 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mehm8128 left a comment

Choose a reason for hiding this comment

damin3A3 commented Jan 29, 2024

mehm8128 commented Jan 29, 2024

damin3A3 commented Dec 9, 2023 •

edited

Loading

codecov bot commented Dec 9, 2023 •

edited

Loading

damin3A3 Dec 28, 2023 •

edited

Loading

damin3A3 Dec 28, 2023 •

edited

Loading

damin3A3 Dec 28, 2023 •

edited

Loading

damin3A3 Dec 28, 2023 •

edited

Loading

damin3A3 Dec 28, 2023 •

edited

Loading

damin3A3 Dec 28, 2023 •

edited

Loading

damin3A3 commented Jan 23, 2024 •

edited

Loading

damin3A3 commented Jan 27, 2024 •

edited

Loading