Add support for readonly and locked modes in kanban

7 years ago · 07502775f5
parent f0512bbb1d
commit 07502775f5
3 changed files with 116 additions and 66 deletions
--- a/www/kanban/app-kanban.less
+++ b/www/kanban/app-kanban.less
@ -34,6 +34,8 @@
            flex: 1;
            display: flex;
            align-items: center;
+            min-height: -webkit-min-content;
+            min-height: min-content;
            .kanban-container {
                flex: 1;
                display: flex;
@ -42,6 +44,12 @@
            }
        }

+        .kanban-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
        .kanban-board {
            header {
                display: flex;
@ -60,78 +68,86 @@
                }
            }
        }
-    }

-    #kanban-edit {
-        width: 100%;
-        background: transparent;
-        border: 1px solid rgba(0,0,0,0.3);
-    }
+        #kanban-edit {
+            width: 100%;
+            background: transparent;
+            border: 1px solid rgba(0,0,0,0.3);
+        }

-    @button-size: 50px;
-    #kanban-addboard {
-        margin: 30px;
-        border: 1px solid;
-        width: @button-size;
-        height: @button-size;
-        line-height: @button-size;
-        text-align: center;
-        background: @colortheme_kanban-bg;
-        font-weight: bold;
-        align-self: flex-start;
-        font-size: 50px;
-        cursor: pointer;
-        .tools_unselectable();
-    }
+        @button-size: 50px;
+        #kanban-addboard {
+            margin: 30px;
+            border: 1px solid;
+            width: @button-size;
+            height: @button-size;
+            line-height: @button-size;
+            text-align: center;
+            background: @colortheme_kanban-bg;
+            font-weight: bold;
+            align-self: flex-start;
+            font-size: 50px;
+            cursor: pointer;
+            .tools_unselectable();
+        }

-    .kanban-additem, .kanban-remove-item {
-        float: right;
-        background: #EEE;
-        padding: .25rem .5rem;
-        line-height: 1;
-        &:hover {
-            background: transparent;
+        .kanban-remove-item {
+            padding: 0 0.5em;
+        }
+        .kanban-additem {
+            float: right;
+            background: #EEE;
+            padding: 5px .5rem 4px;
+            line-height: 1;
+            margin-bottom: 5px;
+            margin-right: 5px;
+            font-weight: bold;
+            font-size: 1.2em;
+            &:hover {
+                background: transparent;
+            }
        }
-/*      margin: 10px;
-        padding: 3px;
-        width: 30px;
-        text-align: center;
-        background: #eee;
-        font-weight: bold;
-        cursor: pointer;
-        .tools_unselectable(); */
-    }

-    .kanban-additem {
-        margin-bottom: 5px;
-        margin-right: 5px;
-    }
+        .kanban-additem {
+        }

-    .kanban-header-yellow {
-        background: #FC3;
-    }
+        .kanban-header-yellow {
+            background: #FC3;
+        }

-    .kanban-header-orange {
-        background: #F91;
-    }
+        .kanban-header-orange {
+            background: #F91;
+        }

-    .kanban-header-blue {
-        background: #0AC;
-    }
+        .kanban-header-blue {
+            background: #0AC;
+        }

-    .kanban-header-red {
-        background: #E43;
-    }
+        .kanban-header-red {
+            background: #E43;
+        }

-    .kanban-header-green {
-        background: #8C4;
-    }
+        .kanban-header-green {
+            background: #8C4;
+        }

-    @media (max-width: @browser_media-medium-screen) {
-        #cp-app-kanban-container {
-            flex: 1;
-            max-width: 100%;
-            resize: none;
+        @media (max-width: @browser_media-medium-screen) {
+            #cp-app-kanban-container {
+                flex: 1;
+                max-width: 100%;
+                resize: none;
+            }
+        }
+
+        &.cp-app-readonly {
+            .kanban-item, .kanban-title-board {
+                cursor: default !important;
+                .tools_unselectable();
+            }
+            .kanban-title-button, #kanban-addboard, .kanban-remove-item, .kanban-additem {
+                display: none !important;
+            }
        }
    }
+
 }
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@ -28,6 +28,7 @@ define([
    verbose = function () {}; // comment out to enable verbose logging

    var addRemoveItemButton = function (framework, kanban) {
+        if (framework.isReadOnly() || framework.isLocked()) { return; }
        var $container = $(kanban.element);
        $container.find('.kanban-remove-item').remove();
        $container.find('.kanban-board .kanban-item').each(function (i, el) {
@ -40,7 +41,7 @@ define([
                board.item.splice(pos, 1);
                $(el).remove();
                kanban.onChange();
-            }).text('🗙').appendTo($(el));
+            }).text('❌').appendTo($(el));
        });
    };

@ -97,7 +98,8 @@ define([
            element: '#cp-app-kanban-content',
            gutter: '15px',
            widthBoard: '300px',
-            buttonContent: '🗙',
+            buttonContent: '❌',
+            readOnly: framework.isReadOnly(),
            onChange: function () {
                verbose("Board object has changed");
                framework.localChange();
@ -106,11 +108,13 @@ define([
                }
            },
            click: function (el) {
+                if (framework.isReadOnly() || framework.isLocked()) { return; }
                if (kanban.inEditMode) {
                    verbose("An edit is already active");
                    return;
                }
                kanban.inEditMode = true;
+                $(el).find('button').remove();
                var name = $(el).text();
                $(el).html('');
                var $input = getInput().val(name).appendTo(el).focus();
@ -141,6 +145,7 @@ define([
                        e.stopPropagation();
                        $(el).text(name);
                        kanban.inEditMode = false;
+                        addRemoveItemButton(framework, kanban);
                        return;
                    }
                });
@ -148,6 +153,7 @@ define([
            },
            boardTitleClick: function (el, e) {
                e.stopPropagation();
+                if (framework.isReadOnly() || framework.isLocked()) { return; }
                if (kanban.inEditMode) {
                    verbose("An edit is already active");
                    return;
@ -187,6 +193,7 @@ define([
                });
            },
            colorClick: function (el) {
+                if (framework.isReadOnly() || framework.isLocked()) { return; }
                verbose("in color click");
                var board = $(el.parentNode).attr("data-id");
                var boardJSON = kanban.getBoardJSON(board);
@ -203,10 +210,10 @@ define([
                $(el).removeClass("kanban-header-" + currentColor);
                $(el).addClass("kanban-header-" + nextColor);
                kanban.onChange();
-
            },
            buttonClick: function (el, boardId, e) {
                e.stopPropagation();
+                if (framework.isReadOnly() || framework.isLocked()) { return; }
                UI.confirm(Messages.kanban_deleteBoard, function (yes) {
                    if (!yes) { return; }
                    verbose("Delete board");
@ -223,6 +230,7 @@ define([
                });
            },
            addItemClick: function (el) {
+                if (framework.isReadOnly() || framework.isLocked()) { return; }
                if (kanban.inEditMode) {
                    verbose("An edit is already active");
                    return;
@ -253,7 +261,6 @@ define([
                    if (e.which === 27) {
                        e.preventDefault();
                        e.stopPropagation();
-                        $(el).text(name);
                        kanban.inEditMode = false;
                        return;
                    }
@ -281,6 +288,7 @@ define([

        var addBoardDefault = document.getElementById('kanban-addboard');
        addBoardDefault.addEventListener('click', function () {
+            if (framework.isReadOnly()) { return; }
            var counter = 1;

            // Get the new board id
@ -305,6 +313,21 @@ define([
    var andThen2 = function (framework) {

        var kanban;
+        var $container = $('#cp-app-kanban-content');
+
+        if (framework.isReadOnly()) {
+            $container.addClass('cp-app-readonly');
+        }
+        framework.onEditableChange(function (unlocked) {
+            if (framework.isReadOnly()) { return; }
+            if (unlocked) {
+                addRemoveItemButton(framework, kanban);
+                kanban.options.readOnly = false;
+                return void $container.removeClass('cp-app-readonly');
+            }
+            kanban.options.readOnly = true;
+            $container.addClass('cp-app-readonly');
+        });

        framework.onContentUpdate(function (newContent) {
            // Init if needed
--- a/www/kanban/jkanban.js
+++ b/www/kanban/jkanban.js
@ -56,6 +56,7 @@
                    dragBoards: true,
                    addItemButton: false,
                    buttonContent: '+',
+                    readOnly: false,
                    dragEl: function (el, source) {},
                    dragendEl: function (el) {},
                    dropEl: function (el, target, source, sibling) {},
@ -84,10 +85,12 @@
                        //Init Drag Board
                        self.drakeBoard = self.dragula([self.container], {
                                moves: function (el, source, handle, sibling) {
+                                    if (self.options.readOnly) { return false; }
                                    if (!self.options.dragBoards) return false;
                                    return (handle.classList.contains('kanban-board-header') || handle.classList.contains('kanban-title-board'));
                                },
                                accepts: function (el, target, source, sibling) {
+                                    if (self.options.readOnly) { return false; }
                                    return target.classList.contains('kanban-container');
                                },
                                revertOnSpill: true,
@ -129,7 +132,15 @@
                            });

                        //Init Drag Item
-                        self.drake = self.dragula(self.boardContainer, function () {
+                        self.drake = self.dragula(self.boardContainer, {
+                                moves: function (el, source, handle, sibling) {
+                                    if (self.options.readOnly) { return false; }
+                                    return handle.classList.contains('kanban-item');
+                                },
+                                accepts: function (el, target, source, sibling) {
+                                    if (self.options.readOnly) { return false; }
+                                    return true;
+                                },
                                revertOnSpill: true
                            })
                            .on('drag', function (el, source) {