ツール

印刷

Top/Redmine/Redmine 2.6にプラグイン「View customize plugin」を導入しサイドバーを非表示にする

Redmine/Redmine 2.6にプラグイン「View customize plugin」を導入しサイドバーを非表示にする の変更点

//Redmine/Redmine 2.6にプラグイン「View customize plugin」を導入しサイドバーを非表示にする
画面デザインを一部更新するためのRedmine用プラグイン「View customize plugin」を導入します。今回はサイドバーを非表示にするために導入しました。
(作業日：2015/03/26)
※便宜上、すべてrootユーザーで作業しているように書いてありますが、基本的に作業は一般ユーザーで行い、管理者権限が必要なコマンドはsudoを用いて実行してください。

-View customize plugin公式サイト
--[[onozaty/redmine-view-customize>https://github.com/onozaty/redmine-view-customize]]
--[[画面をJavaScript/CSSで簡単にカスタマイズできるRedmineプラグインを作成しました>http://blog.enjoyxstudy.com/entry/2014/06/30/003443]]
--[[Redmine view customize plugin を改善しました(バージョン1.1.0)>http://blog.enjoyxstudy.com/entry/2014/09/08/000000]]
--[[Redmineでサイドバーを非表示にする(View customize plugin)>http://blog.enjoyxstudy.com/entry/2014/08/08/000000]]
--[[Redmineでサイドバーを開閉可能とし、かつ縦スクロールでも隠れないようにする(View customize plugin)>http://blog.enjoyxstudy.com/entry/2015/03/23/000000]]

*目次
#contents

*作業環境
|Redmine view customize plugin|1.1.2|
|Redmine|Redmine 2.6|
|OS|CentOS 5.11|

*インストール手順
Redmineのインストールディレクトリを「/var/lib/redmine」とします。

以下のコマンドを入力します。
 # cd /var/lib/redmine/plugins
 # git clone https://github.com/onozaty/redmine-view-customize.git view_customize

リストア用に、ダウンロードしたファイルのバックアップを行います。
 # tar -cvzf view_customize.tgz ./view_customize
 # mv view_customize.tgz /usr/local/src

Redmineのデータベースをマイグレートします。(環境変数「RAILS_ENV」指定必須)
 # rake redmine:plugins RAILS_ENV=production

Apacheを再起動します。
 # service httpd graceful

*サイドバーを非表示にする
+インストールが完了すると、管理者メニューに「View customize」が追加されます。
+「View customize」画面から「New view customize」をクリックします。
+「Path pattern」に「/issues」と入力。
+「Type」は「JavaScript」を選択。
+「Code」に以下を入力。

 $(function() {
  
   $('#content')
     .css({
       'width': 'auto',
       'padding-right': '20px'
     });
  
   var sidebar = $('#sidebar');
   var baseHeight = sidebar.height();
   var baseWidth  = sidebar.width();
   var baseOffsetTop = sidebar.offset().top;
  
   var toggleFlag = true;
  
   sidebar
     .css({
       'background-color': '#EEEEEE',
       'border': '1px solid #DDDDDD',
       'padding': '5px',
       'position': 'absolute',
       'right': '0',
       'width': '12px',
       'height': '12px',
       'overflow': 'hidden'
     })
     .prepend(
       $('<a href="#">&nbsp;↓&nbsp;</a>')
         .css({
           'position': 'absolute',
           'font-weight': 'bold',
           'font-size': '12px',
           'text-decoration': 'none',
           'top': '2px',
           'right': '0',
           'border-bottom': '2px solid'
         })
         .click(function(event) {
           if (toggleFlag) {
             sidebar.stop().animate({
               'padding': '5px 5px 15px 15px',
               'width': baseWidth,
               'height': baseHeight
             }, 0);
             $(this)
               .css({
                 'border-top': '2px solid',
                 'border-bottom': ''
               })
               .html('&nbsp;↑&nbsp;');
           } else {
             sidebar.stop().animate({
               'padding': '5px',
               'width': '12px',
               'height': '12px'
             }, 0);
             $(this)
               .css({
                 'border-top': '',
                 'border-bottom': '2px solid'
               })
               .html('&nbsp;↓&nbsp;');
           }
  
           toggleFlag = !toggleFlag;
           event.preventDefault();
         })
     );
  
   var onScroll = function() {
     var windowScrollTop = $(window).scrollTop();
  
     if (windowScrollTop > baseOffsetTop) {
       sidebar.css('margin-top', (windowScrollTop - baseOffsetTop) + 'px');
     } else {
       sidebar.css('margin-top', '');
     }
   }
  
   $(window).scroll(onScroll);
   onScroll();
 });

以上で、チケット一覧画面からサイドバーが消え、画面右に「↓」アイコンが表示されるようになります。このアイコンをクリックすることでサイドバーが現れます。

ページ新規作成

新しいページはこちらから投稿できます。

TOP