スクロールを有効にするには、PageWrapperから高さとオーバーフローの制約を削除します
- 高さを取除いて下さい:100%の制約 - オーバーフローを削除: 隠し制約 - minHeight の変更: 拡張を許可する 100% - ページが正しくスクロールできるようになりました
メインコンテンツ div から flex-1 を削除し、自然な拡張を可能にします
- メインコンテンツのdivからflex-1制約を削除します。 - コンテンツを自然に拡大して、親コンテナでスクロールをトリガーできるようになりました
スクロールを有効にするためにページから高さとオーバーフローの制約を削除します
- h-screenをmin-h-screenに変更して、ページを拡張できるようにします - スクロールを許可するために、メインコンテンツdivからオーバーフローヒデンを削除 - ページはすべてのレコードを見るためにスクロールすることができます
親コンテナからオーバーフロー制約を削除し、ページスクロールを有効にします
- オーバーフローを削除:メインコンテナボックスから隠される - 高さを取除いて下さい:主要な容器箱からの100% - オーバーフローの削除:非表示とフレックス:タブコンテンツボックスから1 - 流出を取除いて下さい:隠されておよび屈曲:カード容器からの1 - フレックスを取り除きます:1とminHeight:カードコ...
グリッドを自動に移動するレイアウトを変更して、スクロールバーなしですべてのレコードを表示する
- domLayout を autoHeight に設定するので、グリッドはすべての行に合わせて拡大します - オーバーフローを削除:グリッドコンテナボックスから隠される - 高さを取除いて下さい:格子ラッパー箱からの100%の制約 - Gridは現在、縦スクロールバーなしで現在のページのすべてのレコードを示しています
40pxによるベンダー、製品、およびソース列幅の減少
- ベンダーの列幅を80pxから40pxに変更する - 80pxから40pxへの製品列幅の変更 - ソース列幅を60pxから20pxに変更する - 対応するフィルタフィールドコンテナ幅を列に合わせる更新
クイック検索フィールドとコンポーネントの下の10pxパディングを追加
- pb:'10px'をクイック検索ボックスコンテナに追加 - 作業しなかった高さとアライメントを解除
縦に整列 クイック検索フィールドとコンポーネントを中央に
- タブの高さにマッチする親ボックスに minHeight を追加 - コンテナボックスにディスプレイフレックスとアライメントセンターを追加 - 適切な縦の直線のための速い検索箱に高さ100%およびalignSelfの中心を加えて下さい
ベンダー、製品、およびソースの列幅を別の25pxで減少
- ベンダーの列幅を105pxから80pxに変更する - 製品の列幅を105pxから80pxに変更する - ソース列の幅を85pxから60pxに変更する - 対応するフィルタフィールドコンテナ幅を列に合わせる更新
25pxによるベンダー、製品、およびソース列幅の減少
- ベンダーの列幅を130pxから105pxに変更する - 130pxから105pxに製品列幅を変更 - 110pxから85pxへのソース列幅の変更 - 対応するフィルタフィールドコンテナ幅を列に合わせる更新
20pxによるベンダー、製品、ソース、およびエージェントの列幅の減少
- ベンダーの列幅を150pxから130pxに変更する - 150pxから130pxに製品列幅を変更 - ソース列の幅を130pxから110pxに変更する - 120pxから100pxにエージェントの列幅を変更 - 対応するフィルタフィールドコンテナ幅を列に合わせる更新
ステートとストリートの列の幅とストリートの表示を更新する
- ステート列幅を100pxから60pxに変更する - 200pxから130pxへのストリート列幅の変更 - ストリート列を更新して、セルのストリートアドレスのみを表示する - 'street, city' フォーマットを表示するストリート列にツールチップを追加する - 対応するフィルターフィールドコンテナ幅を更新する
未使用の場所のインポートを削除します
- 住所Rendererが削除されたので、 LocationOn アイコンのインポートを削除します
接触の後で正しい位置に州および街灯を移動して下さい
- コンタクトフィルタの直後にステートフィルターフィールドを移動 - エージェントフィルタの後にあった重複した状態とストリートフィルタを削除します - フィルター順序は列の順序に今一致します: 鉛ID、接触、州、通り、状態、サブステータス...
ステートとストリートの列の実装を完了
- アドレスを参照していた古いアドレスフィルタフィールドを削除FilterValue - 接触フィルターの後で州および街灯の分野を加えて下さい - stateFilterValue および streetFilterValue を使用するようにフィルタリングロジックを更新する - ステートフィルタは、すべての米国の状態(...
ステートとストリートの列でアドレスの列を置換する
- アドレス欄とアドレスフォルダを削除します。 - 連絡先の後にステートカラムを追加(サブディビジョン/ステートコードを表示) - ステートの後にストリートカラムを追加('street, city'フォーマットを表示) - アドレスを置き換えるFilterValueをstateFilterValueと通りFilterV...
リードID、ステータス、サブステータスの列幅を更新
- リードID列幅を245pxから230pxに変更する - 90px から 115px へのステータスの列幅を変更する - 150pxから170pxにサブステータス列幅を変更 - 対応するフィルタフィールドコンテナ幅を列に合わせる更新 - 明示的なminWidthとmaxWidth制約を追加
ステータスとサブステータスの列幅を更新
- 65pxから90pxへのステータス列幅の変更 - 120pxから150pxにサブステータス列幅を変更 - 対応するフィルタフィールドコンテナ幅を列に合わせる更新 - 明示的なminWidthとmaxWidth制約を追加
カラムの幅に合わせてフィルタフィールドコンテナ幅を更新
- リードIDフィルタコンテナを300pxから245pxに更新 - 200pxから65pxにステータスフィルタコンテナを更新する - 200pxから120pxにサブステータスフィルタコンテナを更新する - 150pxから120pxにエージェントフィルタコンテナを更新する - フィルタフィールドが対応する列幅に一致するこ...
カラムの幅を指定した値に更新
- リードID列幅を300pxから245pxに変更する - 連絡先の列はフレックスのまま: 1 残りの幅を取る - 200pxから65pxへのステータス列幅の変更 - サブステータスの列幅を200pxから120pxに変更する - エージェントの列幅を150pxから120pxに変更 - 対応するフィルタフィールドコンテナ...
Mock リード ID をランダム alphanumeric に更新し、アドレス カラムを 170px に設定します
- createRandomLeadId 関数を追加して、長さ13のランダムな英数字文字列を作成する - 連続番号からランダムな英数字('34FDK69HWGPPK'など)へのモックリードIDの変更 - アドレス欄の幅を250pxから170pxに更新し、明示的な min/max - アドレス フィルター容器の幅を170...
日付の列幅を更新し、アクションボタンを置き換える
- 155pxから170pxに日付列幅を変更(作成および割り当て) - 日付フィルタフィールドコンテナを170pxの幅に合わせて更新 - 'Export Selected'、'Share'、および'Delete Selected'ボタンを以下のように置き換えます。 - 'Reassign Selected ({amou...
薄い灰色のボーダーの底を二次タブに加えて下さい
- ステータスタブコンテナに「1px固体rgba(0,0,0,0.12)」を追加 - /leads/view/ページにあるスタイリングにマッチする - 下のタブとコンテンツ間で視覚的な分離を作成します
日付の列幅を155pxに変更する
- 220px から 155px まで作成および割り当てられた列幅を更新する - explicitの幅、minWidth、maxWidth を 155px に設定します。 - 155px幅に一致する日付フィルタフィールドコンテナを更新する - 列とフィルタフィールド間の一貫したサイジングを確保
フィルターフィールドを残し、下部に整列するグレーの背景を追加します
- センターからフレックスエンド(ボトムアライメント)にフィルター行アライメントを変更 - すべての残りのフィルター フィールド コンテナに灰色の背景 (#f8fafc) を追加 - 日付フィルタスタイリングに一致するように境界半径とパディングを追加します - 規則的なフィルタ フィールドは、下部の日付フィールドの高さ...
隔離された灰色の背景と縦に積み重ねの日付フィルター フィールド
- 日付フィルタフィールドを水平から垂直レイアウトに変更(flexDirection:カラム) - グレーの背景(#f8fafc)を日付フィルターボックスにのみ追加し、フィルター行全体ではなく - 日付フィルタフィールドの220pxの明示幅を設定する - メインフィルタ列コンテナからグレーの背景を削除します - より良...
クイック検索をステータスタブラインに移動し、右揃え
- クイック検索は、ステータスタブと同じ行で表示されます。 - 重複検索バーセクションを削除することにより、シンプルなレイアウト - ステータスタブとクイック検索は、スペースベットのフレックスコンテナにあります
UIレイアウトを改善し、モックデータを増加
- 日付フィルタフィールド(fontSize:0.75rem、ラベルの0.7rem)のためにテキストを小さくする - クイック検索をステータスタブと同じ行に移動し、右側に整列 - 50から250までのモックリードを増やす - グリッドからアクション列を削除します - 重複検索バーセクションを削除することによってレイアウ...
作成および割り当てられたコラムのための日付範囲のフィルター コンポーネントを加えて下さい
- 作成および割り当てられた日付範囲フィルター(開始/終了日)のstate変数を加えて下さい - 開始日と終了日フィールドで日付範囲フィルターコンポーネントを作成します - 作成および割り当てられたコラムのための注文のフィルタ・ラインに日付範囲のフィルター コンポーネントを加えて下さい - 日付範囲でフィルタリングする...
コンタクト名をクリック可能なリンクを作成し、ダブルクリックしてリードを開く
- ContactRenderer を更新して、最初の名前と最後の名前を下線クリック可能なリンクとして表示する - onViewLead を介してリードを開くか、/leads/view/:id に移動する名前に onClick ハンドラを追加する - onRowDoubleClickedハンドラをAgGridReact...
アイコンをサブスタタスドロップダウンフィルタに追加し、コントラクトの送信を更新
- 'Contracts Signed' を 'Contracts Sent' に更新し、Java enum と一致 - 契約のアイコンを変更 割り当てから送信 アイコン - アイコンをサブスタタスドロップダウンフィルタメニュー項目に追加する - インポート 送信 アイコンから 素材-UI - ドロップダウンフィルタの...
ピン留めされた行の鉛IDの細胞のためのパッドを17pxにパッドを入れることを調節して下さい
- PaddingLeftを12pxから17pxに変更し、より良いアライメントを実現
親ステータスカラーで各サブスタタスに固有のアイコンを追加
- 各サブ・スタタスに一意で関連性の高いアイコンを追加(例えば、新しいリードのための追加、左メッセージのメッセージ) - Iconsは親の状態色を維持します(新しいのための緑、Reckoningのための青、農場のためのオレンジ、Grimのための赤い、Voidのための灰色) - サブスタッズ用の追加のMaterial-U...
ピン留めされた行でパディングを削減 リード ID 列で値を左に移動
- ピン留めされた列の鉛IDの細胞のための45pxから12pxへのパッドを入れることを減らして下さい - IdRenderer箱sxの支柱で欠落したコンマを修正 - これにより、リード ID はピン留めされた行の左に値する
親ステータスカラーに合ったサブスタタスカラムにアイコンを追加
- 親ステータスに基づいてアイコンを決定するためにgetSubStatusIconヘルパー関数を追加 - サブスタタスアイコンは、親ステータスと同じアイコンと色を使用して - 新鮮なサブスタッズ:グリーンニューリリースアイコン - サブ・スタタスのレコン:ブルー・ガベル・アイコン - ファームサブ統計:オレンジ農業アイ...
ヘッダーとデータの間の代わりに、グリッドヘッダーの上にフィルターバーを移動する
- AGの格子容器の外のフィルター バーを、格子の上に置かれる移動して下さい - 重複の問題を引き起こしていた絶対的な位置決めを削除します - フィールドヘッダ上にフィールドヘッダを別の行としてフィルタバーが現れます - 不要になったパディングトップを削除 - これは、ヘッダーが常に表示され、フィルターバーが重複しない...
ID 列をリードし、連絡先からメールを削除するために緊急バッジを移動する
- 連絡先の列からリードIDの列に緊急バッジを移動する - リードIDのアカウントアイコンの左にバッジを置く - 「緊急」ラベルテキストを削除し、アイコンバッジだけを保持 - 連絡先の列からメールアドレスを削除 - コンタクトカラムは名前のみ表示されます
データを重複する行からフィルターバーを防止するために、グリッドコンテナにパディングを追加
- PaddingTopを追加: グリッドコンテナボックスに48px - これは、ヘッダを所定の位置に保ちながらデータ行を下に押します - フィルタバーは、上に配置されています: 48px (下のヘッダー) - データ列が96px(48pxヘッダー+ 48pxフィルタバー)で起動