Redmine : view customize plugin を使ってみた

お疲れ様です！Redmine のプラグイン「view customize plugin」を使ったカスタマイズです。

ヘッダーメニューにリンクメニューを追加してみる（JavaScript）

• パスのパターン : /
• プロジェクトのパターン : 空
• 挿入位置 : 全ページのヘッダ
  
• 種別 : JavaScript
  
• コメント : ヘッダーメニューにリンクメニューを追加してみる（JavaScript）
• 有効 : ✔
• プライベート : □
• コード :

$(document).ready(function(){
    var style = '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">';
    $('head link:last').after(style);

  // メニューの準備
  const menus = 
<li>
<ul id="hoge-menu">
<li><a href="javascript:return false;">リンク</a><br/>
<ul>
<li><a href="https://drive.google.com" target="_blank"><i class="fab fa-google-drive fa-lg"></i>GoogleDrive</a></li>
<li><a href="https://github.com" target="_blank"><i class="fab fa-github fa-lg"></i>GitHub</a></li>
</ul>
</ul>
</li>
;

  // 追加する
  $('#top-menu>ul').append(menus);
  $('#hoge-menu').menu(
        {
            position: {
                my: "center bottom",
                at: "right-1 top+1"
            }
        }
  );
});

ヘッダーメニューにリンクメニューを追加してみる（CSS）

• パスのパターン : /
• プロジェクトのパターン :
• 挿入位置 : 全ページのヘッダ
  
• 種別 : CSS
  
• コメント : ヘッダーメニューにリンクメニューを追加してみる（CSS）
• 有効 : ✔
• プライベート : □
• コード :

.ui-widget {
  font-size: inherit;
}
.ui-state-hover,
.ui-state-active,
.ui-menu .ui-state-focus,
.ui-widget-content {
  background: none;
  background-color: transparent;
  border: 0;
}
.ui-state-active, 
.ui-widget-content .ui-state-active, 
.ui-widget-header .ui-state-active {
  background: none;
  background-color: transparent;
  border: 0;
}

• 結果 :

随時、追記してゆきます。