CSSとJavaScript

カスタムCSSおよびJavaScriptファイルは、以下のいずれかの場所に置くことで自動的に読み込まれます。

SWARM_ROOT/public/custom/*.(css|js)

SWARM_ROOT/public/custom/sub-folder/*.(css|js)

注意
  • Swarmでは、SWARM_ROOT/public/customフォルダに保管されているカスタマイズ内容、またはそれよりも1つ下の階層のサブフォルダ内に保管されているカスタマイズ内容だけがサポートされます。カスタマイズは、すべての標準CSSおよびJavaScriptの後に追加されます。複数のカスタムファイルが存在する場合は、アルファベット順に追加されます。
  • カスタマイズを行う前に、SWARM_ROOT/public/customフォルダが存在するかどうかを確認してください。このフォルダは、Swarmには付属していません。また、このフォルダが自動的に作成されることもありません。

JavaScript拡張のサンプル

以下に、JavaScriptのカスタマイズ例を示します。このカスタマイズ内容をSwarmのインストール環境に適用することをお勧めします。それぞれの例は個別に適用することができます。必要なWebリクエストの数を減らすため、JavaScriptのカスタマイズは1つのファイルに対して適用することをお勧めします。

警告

カスタムのJavaScriptファイルにコーディングエラーが含まれている場合、SwarmのUIが動作しなくなることがあります。この問題が発生した場合、ブラウザの開発ツールを使用して問題のあるファイルを特定し、そのファイルをSWARM_ROOT/public/customフォルダから移動してください。問題が解決したら、ファイルをフォルダに戻すことができます。

レビューページの [作成済み] 列をクリック可能な列にする

$(document).on( 'click', '.reviews-table td.created', function() {
    var change = $(this).closest('tr').data('id');
    window.location = '/reviews/' + change;
});

上記のコード行を、SWARM_ROOT/public/customフォルダ内のファイル(reviews-created-clickable.jsなど)に保存します。SwarmによってJavaScriptファイルが自動的に取得され、後続のすべてのレビューページビューについて、[作成済み]列内のエントリが即時にクリック可能なエントリに変換されます。

レビュー状態オプションのテキストをカスタマイズする

var original = swarm.review.buildStateMenu;
swarm.review.buildStateMenu = function(){
    original();
    var needsReview = $('.icon-review-needsReview').parent();
    needsReview.html(needsReview.html().replace(
        'Needs Review', 'You need to review'
    ));
}

「You need to review」の部分は、「Needs Review」の代わりに表示するテキストに置き換えてください。

上記のコード行を、SWARM_ROOT/public/customフォルダ内のファイル(customize-review-states.jsなど)に保存します。SwarmによってJavaScriptファイルが自動的に取得され、後続のページビューについて、レビュー状態を示すテキストが即時に修正されます。

ログインダイアログにテキストを追加する

// Custom js to put text into the login box
$(function() {
    setTimeout(function () {
            if ($('.login-form')) {
                $('.form-body') 
                    .prepend("<b style='padding-bottom: 20px; display: inline-block'>Please use your Helix Perforce login credentials.</b>");
            }
        },
        500);
});

「Please use your Helix Perforce login credentials」の部分を、Swarmのログインダイアログの最上部に表示するテキストに置き換えます。

このテキストをSWARM_ROOT/public/customフォルダ内のファイル(customize-login-text.jsなど)に保存すると、Swarmによって自動的にJavaScriptファイルが取り込まれ、次回のログインからは、ログインダイアログの先頭に新しいテキストが表示されるようになります。

CSSカスタマイズのサンプル

以下に、CSSのカスタマイズ例を示します。このカスタマイズ内容をSwarmのインストール環境に適用することをお勧めします。それぞれの例は個別に適用することができます。必要なWebリクエストの数を減らすため、CSSのカスタマイズは1つのファイルに対して適用することが理想的です。

ヒント

Swarmの管理者が、Swarmを1つ以上のHelixサーバインスタンスに接続するように設定した場合、接続されている各サーバインスタンスのSwarmをカスタマイズできます。個々のHelixサーバインスタンスに対してSwarmをカスタマイズする方法については、「Swarmが複数のHelixサーバインスタンスに接続されている場合のCSSのカスタマイズ」を参照してください。

デフォルトのタブのサイズを調節する

body {
   tab-size: 4;
}

「4」を、任意のタブサイズに置き換えます。

上記のコード行を、SWARM_ROOT/public/customフォルダ内のファイル(tab-size.cssなど)に保存します。SwarmによってCSSファイルが自動的に取得され、後続のページビューについて、タブのサイズが即時に調整されます。

ログイン画面にカスタム背景を適用する

.session-container .modal-overlay.login::after {
    background-image: url('/custom/login_background.jpg');
    background-position: top center;
    background-size: 100%;
}

URLフラグメントの/custom/login_background.jpgを、任意の画像と置き換えます。完全なURLを指定しない場合は、指定する画像がSWARM_ROOT/publicフォルダ内に存在している必要があります。可能であれば、SWARM_ROOT/public/custom内に置くことをおすすめします。

上記のコード行を、SWARM_ROOT/public/customフォルダ内のファイル(login-background.cssなど)に保存します。SwarmによってCSSファイルが自動的に取得され、後続のページビューについて、ログイン画面の背景が即時に置き換えられます。

メインナビゲーションバーのSwarmのロゴを置き換える

#react-swarm-app-container .menu-container .logo a {
    background-repeat: no-repeat;
    background-image: url('/custom/navbar_logo.jpg');
    background-size: 116px 25px;
    background-position: 15px center;
    background-clip: content-box;
}

URLフラグメントの/custom/navbar_logo.jpgを、任意の画像と置き換えます。完全なURLを指定しない場合は、指定する画像がthe SWARM_ROOT/publicフォルダ内に存在している必要があります(SWARM_ROOT/public/customフォルダ内に保管することをお勧めします)。

上記のコード行を、SWARM_ROOT/public/customフォルダ内のファイル(navbar-logo.cssなど)に保存します。SwarmによってCSSファイルが自動的に取得され、後続のページビューについて、Swarmのロゴが即時に置き換えられます。

注意

Swarmのナビゲーションバーは、最大で24ピクセルの高さのロゴをサポートしています。ロゴの高さが基準を満たしていても、ロゴの幅、高さ、マージンおよびパディングを調整する必要がある場合があります。

ナビゲーションバーにカスタムの背景色を適用する

#react-swarm-app-container .swarm-navigation {
    background-color: #000000;
}

#000000をナビゲーションバーに使用する任意の色の16進数と置き換えます。

上記のコード行を、SWARM_ROOT/public/customフォルダ内のファイル(navbar-color.cssなど)に保存します。SwarmによってCSSファイルが自動的に取得され、後続のページビューについて、ナビゲーションバーの背景色が即時に置き換えられます。

アバターの外観を調整する

SwarmのUIは、Reactを使用する方向にシフトしています。現在は、Reactと従来のPHPを併用してUIを制御しています。現在は、2つの方法でアバターをレンダリングしているため、両方の方法をカスタマイズする必要があります。

カスタムアバターを追加する方法については、「カスタムアバターを追加する」を参照してください。

PHPでレンダリングされたアバターの外観を調整する

img.avatar {
    border: 2px dashed red;
    border-radius: 10%;
}

上記の例のように、枠線の追加や枠線の半径の調整など、さまざまな方法で、PHPを使用したSwarmによるアバターの表示を調整することができます。Swarmではアバターの表示位置に応じて異なるサイズが使用されるため、固定のサイズは設定しないでください。

上記のコード行を、SWARM_ROOT/public/customフォルダ内のファイル(avatars.cssなど)に保存します。SwarmによってCSSファイルが自動的に取得され、後続のページビューについて、アバターの外観が即時に修正されます。

Reactでレンダリングされたアバターの外観を調整する

#react-swarm-app-container .userAvatar img{
    border: 2px dashed red;
    border-radius: 10%;
}

上記の例のように、枠線の追加や枠線の半径の調整など、さまざまな方法で、Reactを使用したSwarmによるアバターの表示を調整することができます。Swarmではアバターの表示位置に応じて異なるサイズが使用されるため、固定のサイズは設定しないでください。

上記のコード行を、SWARM_ROOT/public/customフォルダ内のファイル(avatars-react.cssなど)に保存します。SwarmによってCSSファイルが自動的に取得され、後続のページビューについて、アバターの外観が即時に修正されます。

カスタムアバターを追加する

個々のユーザやグループのカスタムアバターをSwarmに追加する場合は、カスタムCSSを使用します。カスタムアバターは、システム上のユーザとグループで使用します。

ユーザのカスタムアバターを追加する: 

img.avatar[data-user="<userid>"], .userAvatar img[alt="<user name>"]{
    content: url(<path to avatar>);
}

グループのカスタムアバターを追加する: 

img.avatar[data-user="<groupid>"], .userAvatar img[alt="<group name>"]{
    content: url(<path to avatar>);
}

上記のコード行を、SWARM_ROOT/public/customフォルダ内のファイル(avatars-custom.cssなど)に保存します。SwarmによってCSSファイルが自動的に取得され、後続のページビューで即時にカスタムアバターが使用されるようになります。

カスタムアイコンをメニュー項目に追加する

menu_helpers構成ブロック内でカスタムのメニュー項目を作成する際に、Swarm CSSで使用するメニューアイコンを指定することができます。

カスタムのCSSをSwarmに追加して、メニュー項目のデフォルトアイコンをカスタムアイコンに置き換えることができます。例えば、以下のCSSを使用して、svg.svgIcon.custom01MenuIconクラスと.menuItem-custom01クラスを変更することにより、custom01メニュー項目のデフォルトアイコンをdouble-speech-bubbles.svgアイコンに置き換えることができます。 

svg.svgIcon.custom01MenuIcon{
    display:none;
}
.menuItem-custom01 span.MuiTypography-root.smaller.innerContent.MuiTypography-body2::before{
    content: '';
    background-image: url('/swarm/img/icons/line/double-speech-bubbles.svg');
    background-size: 16px;
    background-repeat: no-repeat;
    margin-left: 20px;
    padding-right: 25px;
}

SWARM_ROOT/public/customディレクトリ内にフォルダを作成し(custom_menusフォルダなど)、このフォルダに上記のコード行をファイルとして保存します(menu_custom01.cssファイルなど)。SwarmによってCSSファイルが自動的に取得され、それ以降は、カスタムメニューがページに表示されるようになります。独自のカスタム画像を使用する場合は、カスタムCSSと同じフォルダにそれらの画像を保存することをお勧めします。

Swarmが複数のHelixサーバインスタンスに接続されている場合のCSSのカスタマイズ

Swarmが複数のHelixサーバインスタンスに接続するように設定されている場合、Swarmは接続されている各Helixサーバインスタンスに対してカスタマイズすることができます。これにより、現在Swarmで表示しているHelixサーバインスタンスに対して、簡単な視覚的プロンプトが表示されます。前のセクションで説明したカスタマイズはすべて、複数のHelixサーバインスタンスで利用可能です。

注意
  • Swarmグローバルダッシュボードはカスタマイズできません。
  • Swarmを複数のHelixサーバインスタンスに接続する設定方法については、「複数のHelixサーバインスタンス」を参照してください。

Helixサーバインスタンス用にSwarmをカスタマイズするには、カスタマイズ中のCSSセレクタに[data-server-id="<server-name>"]データ属性を含めます。<server-name>をカスタマイズするHelixサーバの名前と置き換えます。

ヒント

すべてのSwarm Helixサーバインスタンスにカスタマイズを適用するには、カスタマイズ中のCSSセレクタにデータ属性を含まないでください。

Helixサーバの各インスタンス用のSwarmのカスタマイズに、どのようにデータ属性が使用されるかについては、以下の例を参照してください。Swarmが単一のHelixサーバに接続されている場合のカスタマイズと同様に、CSSのカスタマイズを1つのファイルで適用することで、必要なWebリクエストの数を減らすことができます。

Helixサーバの各インスタンスのナビゲーションバーにカスタムの背景色を適用する

body[data-server-id="serverA"] #react-swarm-app-container .swarm-navigation {
    background-color: #d21544;
}
body[data-server-id="serverB"] #react-swarm-app-container .swarm-navigation {
    background-color: pink;
}

ナビゲーションバーの色をカスタマイズする方法については、「ナビゲーションバーにカスタムの背景色を適用する」を参照してください。

Helixサーバの各インスタンスのログイン画面にカスタムの背景画像を適用する

body.route-login[data-server-id="serverA"] .session-container .modal-overlay.login::after {
    background-position: top center;
    background-size: 100%;
    background-image: url(/custom/login_background_A.jpg);
}
body.route-login[data-server-id="serverB"] .session-container .modal-overlay.login::after {
    background-position: top center;
    background-size: 100%;
    background-image: url(/custom/login_background_B.jpg);
}

ログイン画面の背景画像をカスタマイズする方法については、「ナビゲーションバーにカスタムの背景色を適用する」を参照してください。