EC-CUBE 管理画面スタイルガイド
License: Other
最新の開発情報はこちら(後Readmeに移行)
https://chatboxinc.backlog.jp/alias/wiki/220525
moc
$ npm i
$ npm run dev
スタイルガイド
$ gulp styleguide:server
フィードバックメッセージのアラートのcodingってどこかにありますか？
添付画像の「html/install.php は、インストール完了後にファイルを削除してください」の黄色い部分です。
EC-CUBEの管理画面のアラートは以下の5種類あります。
dangerとerrorは同じデザインの様です。
に変更お願いします。
受注一覧はこちらの表記間違いでした。ごめんなさい。
ダッシュボード（管理画面トップページ）の右下の「お知らせ」の内容の表示にiframeを使用しています。
<iframe name="information" class="link_list_wrap" src="https://www.ec-cube.net/info/3/"></iframe>
いただいたコードに上記のタグをそのまま埋め込んでみたところ左寄せに表示が崩れてしまいました。
こちらはどのように埋め込めば崩れず表示されるでしょうか？
→今回の更新分で実装追加予定
ドキュメント上で指示が不明確であったり、実装してみるとよくなかったなと思うところをまとめました。
【コンバージョン】
【デリート】
【レギュラー】
【サブ】キャンセルボタンに使用
【アイコン】テーブル右のアイコンボタン
メインナビにおいて、現在いるページが所属するカテゴリは開いているようにお願いします。
https://projects.invisionapp.com/d/main#/console/11807544/257857839/preview
http://eccube3-admin-styleguide.herokuapp.com/setting/basis/shop/
返信受付メールアドレス(ReplyTo) -> 送信エラー受付メールアドレス(ReturnPath)送料無料条件（金額） -> 送料無料条件(数量)すみません、デザイン時に意図したところを伝えていない箇所がありました。
トグルボタンのラベルはON / OFFの切替により変化するようにしていただきたいと思っています。
つまり
といった具合です。
ラベルのためのスペースの問題が生じますが、多くても4文字くらいに収めるのがよいと思いますので、4em程度取ってあればよいかと思います。
電話番号は部分一致で検索ができるようになっております。
会員マスターの検索画面では電話番号のフォームを3個に分けていただいておりますが、上記の特性上1個のフォームの方が分かりやすいかと思います。
https://projects.invisionapp.com/d/main#/console/11807544/255018141/preview
受注マスターの電話番号のフォームは1個となっておりました。
かつ、メインナビにおいて、現在いるページが所属するカテゴリは開いているようにお願いします。
以下二つの app を構築しています。
以下お願いします。
@witchdoktor
ログイン画面にあるロゴ画像のinvisionの書出し設定をお願いします。
よろしくお願いします。
ファイル管理画面の右配置されている「フォルダ構成」について、文字の部分は開閉判定ではなく（その階層ページへの）リンクにしていただけますか？
対応状況ラベルはボタンではありませんので、CSS上で扱いを分けてください。
BootstrapのコンポーネントでいえばBadgeにあたります。
https://v4-alpha.getbootstrap.com/components/badge/
設定 の 基本情報設定 等が閉じられない
ドラック＆ドロップで並び替えが可能なテーブルコンポーネントの実装において
移動時のアニメーションや動作、実装方法など悩んでいます。
想定されているjQueryプラグインなどはありますか？
https://projects.invisionapp.com/d/main#/console/11807544/261198667/preview
http://eccube3-admin-styleguide.herokuapp.com/shipment/register/
出荷データは運用上「未出荷」から「出荷済」の状態へと変化することになります。
現在のデザインではラベルが「未出荷」となっており、オンの状態からオフの状態に切り替える運用となるのは違和感があります。
ラベルを「出荷済」として、出荷時にオンにする運用のほうが自然なように思いますがいかがでしょうか？
こちらは1カラムのグリッドに載せるカタチで。
画面幅1023px以下の場合は段組みを消してcol-12にする
以上
ダッシュボードの売り上げ状況のグラフのデザインについて相談させてください。
グラフの表示に利用を想定しているライブラリはありますか？
3.0系の売上集計プラグインではchart.jsというライブラリを使用していたようです。
http://www.chartjs.org/
エンドユーザ（顧客）は user ではなく customer で統一したい
userManagement -> customerManagement
代わりに、各ボタンサイズにmin-widthを設定し、ある程度長さの文言まではサイズを統一し、それ以上になる場合は、長くなる文言のボタン幅のみ伸ばすという実装にしようと思うのですが良いでしょうか？
下の画像は実装イメージです。
アセット書き出しなのですが、アイコンについては画像（pngかsvg）にして書き出したほうがいいでしょうか、それともアイコンフォントのままで扱うほうがいいでしょうか？ たまにhoverなどによる色変化があるのですが。
/index.html の87行目で発見
他にもあれば修正をお願いします。
タグ管理ページについてなのですが、
「3.n_管理画面UI進行管理＋機能一覧」スプレッドシート上のどの項目に当たりますか？
▼inVision
https://projects.invisionapp.com/d/main#/console/11807544/258987314/preview
▼3.n_管理画面UI進行管理＋機能一覧
https://docs.google.com/spreadsheets/d/1lI_-FS81WN2I5hmgiGEPH-VblCPCrmdc0ulRZSMrK7I/edit#gid=445175967
@witchdoktor
可能であればグリッドが適用できる箇所をinvisionで表示して頂けると嬉しいです。
下記、ブロックテーブルに共通でお願いしたいことです。
ページネーションナビの形状はBootstrapに合わせていただいてOKです。
InVisionでは再現できなかったのですが、モーダルウィンドウ内でスクロールが必要な場合の挙動を説明します。
有効無効ボタンの横の「有効/無効」の文字はボタンで切り替えた際に表示も切り替わる想定ですか？
それとも現在の登録されている状態を表しているのでしょうか？
https://projects.invisionapp.com/d/main#/console/11807544/255018142/preview
http://eccube3-admin-styleguide.herokuapp.com/customer/register/
会員の状態ですが、3.nのバージョンではデフォルトで以下の3種類のステータスを用意しております。
カスタマイズによってはさらに会員ステータスが増えるようなカスタマイズも想定されます。
会員編集画面のフッタで「本会員」かどうかのオンオフができるようデザインをしていただいておりますが、こちらは複数の選択肢から選択できるようなデザインがいいのではないでしょうか？
タグに階層構造は無いので、タグ名のリンクは不要です。
http://eccube3-admin-styleguide.herokuapp.com/product/tags/
ブレイクポイントの1024pxを1280pxに変更。
====================
1280px以上の時：サイドバーの折りたたみ機能をOFF。サイドバーは出しっぱなし。
1280px以下の時：サイドバーの折りたたみ、サイドバーはかぶさる感じ(fixed)で表示。サイドバー表示の時の右領域はオーバレイ。
ロゴ画像などの画像の共有方法はどのようになりますか？
会員マスター等の検索画面では検索すると以下のようなメッセージが表示されるようになっています。
こちらのメッセージもテイストが合うようにデザインをしていただけないでしょうか？
よろしくお願いいたします。
【inVisionスクリーンショット】
コンテンツエリアの上部のページタイトルの左側が微かにあいてるように見えるのですが3pxほどマージンが空いてますか？
http://eccube3-admin-styleguide.herokuapp.com/product/register/
以下のボタン押下時の開閉動作についてもコーディングしていただけますか？
画面上部のすべてのカテゴリ / カテゴリA の背景が周りと微妙に違う
http://eccube3-admin-styleguide.herokuapp.com/product/category/
背景のopacityを80%にしていただけますか？（固定フッタ・ヘッダの透過はInVisionでは表現できずで…すみません）
moc「ホーム」の修正していただきたい点をまとめます。
すみません、おもなthead (.table-active) の背景色をrgba(0, 0, 0, 0.05)で指定していただいていますが、#F2F2F2で指定しなおしていただけますでしょうか。
.table-secondaryも#cfd5daとなっていますが、同様に背景色を**#F2F2F2**としてください。
以下で確認
ブロックテーブル（ブロック全体がテーブルになっている、マスター系画面に使われるコンポーネント）の左右paddingはおおよそ15px程度に設定してください。今は少し狭く感じます。
テーブルを構成するのセルそれぞれの左右paddingを15px程度にするのがよいかなと思います。
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.