電子冒険:エピソード25:正統なファイルマネージャスタイリング

14624 ワード
electron javascript テキストリンク
我々は、線の線に沿って何かを造りたいですOrthodox File Manager "
ファイルマネージャは、ちょうどキーボードで動作する必要がありますが、ブラウザーのデフォルトは、マウスのインターフェイスには、デフォルトのUIのパターンは、どのような典型的なウェブサイトやウェブアプリに一致しない.
そこで、この機能を実装する必要があります.

ファイルマネージャ


以下の機能を備えたシンプルなインターフェースを行いましょう.
  • つのパネルは、タブとの間の切り替え
  • 各パネルは、ファイルのリスト、上下の矢印の間に移動する
  • 任意の数のファイルをスペースで選択することができます
  • 様々なfnキーは、指定されたパネルで選択されていないファイルか、現在選択されているファイルに対して共通のアクションを実行するために様々なmodalsをポップアップする
  • 各パネルは、どのファイルがフォーカスされているかを覚えていますが、ファイルを非アクティブにします
    • しかし、私たちもそこに着く前に、完全に静的なデータを使用してスタイリングを行うには、どのように端末のアプリを作成したように!

    データ


    静的データをCat Ipsum .
    ヘッダーとフッターはプレースホルダです.
    こちらですindex.html :
    <!DOCTYPE html>
<html>
  <head>
    <link href="app.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="ui">
      <header>
        File Manager
      </header>
      <div class="panel panel-left active">
        <div class="file selected">Cat.js</div>
        <div class="file selected">ipsum.js</div>
        <div class="file">dolor.js</div>
        <div class="file selected">sit.js</div>
        <div class="file selected">amet.js</div>
        <div class="file focused">walk.js</div>
        <div class="file">on.js</div>
        <div class="file">keyboard.js</div>
        <div class="file">hide.js</div>
        <div class="file">when.js</div>
        <div class="file">guests.js</div>
        <div class="file">come.js</div>
        <div class="file">over.js</div>
        <div class="file">play.js</div>
        <div class="file">with.js</div>
        <div class="file">twist.js</div>
        <div class="file">ties.js</div>
      </div>
      <div class="panel panel-right">
        <div class="file">Ask.png</div>
        <div class="file">to.png</div>
        <div class="file focused">be.png</div>
        <div class="file">pet.png</div>
        <div class="file selected">then.png</div>
        <div class="file selected">attack.png</div>
        <div class="file selected">owners.png</div>
        <div class="file selected">hand.png</div>
        <div class="file">need.png</div>
        <div class="file">to.png</div>
        <div class="file">chase.png</div>
        <div class="file">tail.png</div>
      </div>
      <footer>
        <button>F1 Help</button>
        <button>F2 Menu</button>
        <button>F3 View</button>
        <button>F4 Edit</button>
        <button>F5 Copy</button>
        <button>F6 Move</button>
        <button>F7 Mkdir</button>
        <button>F8 Delete</button>
        <button>F10 Quit</button>
      </footer>
    </div>
  </body>
</html>
    それはかなり自明です.
  • 4地域があります.header , panel-left , panel-right , footer
  • 各パネルには多くのfile アイテム
  • いくつかfile アイテム缶selected or focused または
  • つだけのパネルはactive 一度に

    • 基本的なスタイルの設定


    端末は伝統的に黒の上にある.ファイルマネージャは伝統的に青に白です.私は規則を作らなかった.
    body {
  background-color: #226;
  color: #fff;
  font-family: monospace;
  margin: 0;
  font-size: 16px;
}

    グリッドの設定


    これを行うには非常に簡単ですdisplay: grid :
    .ui {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-areas:
    "header header"
    "panel-left panel-right"
    "footer footer";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}
.ui header {
  grid-area: header;
}
.ui .panel-left {
  grid-area: panel-left;
}
.ui .panel-right {
  grid-area: panel-right;
}
.ui footer {
  grid-area: footer;
}

    アイテムスタイリングの設定


    これらはいくつかの合理的な色を示すselected and focused 州さらに選択されたファイルは、端末ベースのファイルマネージャは、通常行われませんボルトです.
    .ui .panel {
  background: #338;
  margin: 4px;
}
.panel .file.selected {
  color: #ff2;
  font-weight: bold;
}
.panel.active .file.focused {
  background-color: #66b;
}

    スタイリングヘッダーとフッター


    これまでのところ、このシリーズではCSSのリセットを使用していませんbutton 束が必要inherit 規則ほとんどの場合、起動前にCSS全体をヌークするだけです.
    header {
  font-size: 24px;
  margin: 4px;
}
.ui footer {
  text-align: center;
}
button {
  font-family: inherit;
  font-size: inherit;
  background-color: #66b;
  color: inherit;
}

    どのように我々は伝統に従う必要がありますか？


    正統のファイルマネージャはターミナル時代から来ます.私は、キーボード制御された2つのパネルUIの基本的な概念がまだ大きいと思います、しかし、彼らのデザイン決定のいくつかはターミナルUISの制限に基づきます.
    質問する最も明白な質問は、私たちがモノスペースフォントを使いたいかどうかです.ほとんど非ターミナルプログラムはそれをしません.VSCodeのようなテキストエディタでも、ファイル管理のために正規のsansフォントを使用します.
    我々が持つことができるような質問の長いリストがあります.
    我々は将来的にそれらのいくつかを探索する可能性があります.

    結果


    結果を以下に示します.

    いつものように.all the code for the episode is here .
    springboot 2.xredis実装メッセージキュー
    AppleStruct/Classを選択する条件