init

03-资料/产品相关文档/快递员端/快递员/plugins/page_notes/page_notes.js

@@ -0,0 +1,474 @@
+// use this to isolate the scope
+(function () {
+    // No notes shown specified by generation config
+    if (!$axure.document.configuration.showPageNotes && !$axure.document.configuration.showAnnotationsSidebar && !$axure.document.configuration.showAnnotations) { return; }
+
+    $(window.document).ready(function () {
+        // Load right panel for Page Notes
+        if ($axure.document.configuration.showPageNotes || $axure.document.configuration.showAnnotationsSidebar) {
+            $axure.player.createPluginHost({
+                id: 'pageNotesHost',
+                context: 'inspect',
+                title: 'Documentation',
+                gid: 2,
+            });
+        }
+
+        // Load footnotes on widgets
+        if ($axure.document.configuration.showAnnotations) {
+            $('#overflowMenuContainer').prepend('<div id="showNotesOption" class="showOption" style="order: 3"><div class="overflowOptionCheckbox"></div>Show Note Markers</div>');
+        }
+
+        createNotesOverlay();
+        generatePageNotes();
+
+        if ($axure.player.isMobileMode()) {
+            $('#showNotesOption').hide();
+        } else {
+            $('#showNotesOption').click(footnotes_click);
+            $('#showNotesOption').find('.overflowOptionCheckbox').addClass('selected');
+        }
+
+        function populateNotes(pageForNotes) {
+            var hasNotes = false;
+            if ($axure.document.configuration.showPageNotes) {
+                var pageNoteUi = '';
+
+                function populatePageNotes(pageOrMaster) {
+                    //populate the page notes
+                    var notes = pageOrMaster.notes;
+                    if (notes && !$.isEmptyObject(notes)) {
+                        pageNoteUi += "<div class='notesPageNameHeader'>" + pageOrMaster.pageName + "</div>";
+
+                        var showNames = $axure.document.configuration.showPageNoteNames;
+                        for(var noteName in notes) {
+                            pageNoteUi += "<div class='pageNoteContainer'>";
+                            if(showNames) {
+                                pageNoteUi += "<div class='pageNoteName'>" + noteName + "</div>";
+                            }
+                            pageNoteUi += "<div class='pageNote'>" + linkify(notes[noteName]) + "</div>";
+                            pageNoteUi += "</div>";
+                            //$('#pageNotesContent').append(pageNoteUi);
+
+                            hasNotes = true;
+                        }
+                    }
+                }
+
+                populatePageNotes(pageForNotes);
+                if (pageForNotes.masterNotes) {
+                    for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
+                        populatePageNotes(pageForNotes.masterNotes[i]);
+                    }
+                }
+
+                if (pageNoteUi.length > 0) {
+                    pageNoteUi += "<div class='lineDivider'></div>";
+                    var pageNotesHeader = "<div id='pageNotesSectionHeader' class='notesSectionHeader pluginNameHeader'>Page Notes</div>";
+                    $('#pageNotesContent').append(pageNotesHeader + pageNoteUi);
+                }
+            }
+
+            if ($axure.document.configuration.showAnnotationsSidebar) {
+                var widgetNoteUi = '';
+                //var widgetNotes = pageForNotes.widgetNotes;
+                function populateWidgetNotes(widgetNotes){
+                    if (widgetNotes) {
+                        for (var i = 0; i < widgetNotes.length; i++) {
+                            var widgetNote = widgetNotes[i];
+                            widgetNoteUi += "<div class='widgetNoteContainer' data-id='" + widgetNote["ownerId"] + "'>";
+                            widgetNoteUi += "<div class='widgetNoteFootnote'>" + widgetNote["fn"] + "</div>";
+                            widgetNoteUi += "<div class='widgetNoteLabel'>" + widgetNote["label"] + "</div>";
+
+                            for (var widgetNoteName in widgetNote) {
+                                if (widgetNoteName != "label" && widgetNoteName != "fn" && widgetNoteName != "ownerId") {
+                                    widgetNoteUi += "<div class='pageNoteName'>" + widgetNoteName + "</div>";
+                                    widgetNoteUi += "<div class='pageNote'>" + linkify(widgetNote[widgetNoteName]) + "</div>";
+                                    //widgetNoteUi += "<div class='nondottedDivider'></div>";
+                                }
+                            }
+                            widgetNoteUi += "</div>";
+                            //widgetNoteUi += "<div class='nondottedDivider'></div>";
+                            //$('#pageNotesContent').append(widgetNoteUi);
+                            hasNotes = true;
+                        }
+                    }
+                }
+
+                populateWidgetNotes(pageForNotes.widgetNotes);
+                if (pageForNotes.masterNotes) {
+                    for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
+                        populateWidgetNotes(pageForNotes.masterNotes[i].widgetNotes);
+                    }
+                }
+
+                if (widgetNoteUi.length > 0) {
+                    var widgetNotesHeader = "<div id='widgetNotesSectionHeader' class='notesSectionHeader pluginNameHeader'>Widget Notes</div>";
+                    $('#pageNotesContent').append(widgetNotesHeader + widgetNoteUi);
+
+                    //$('.widgetNoteContainer').children(':last-child').remove();
+                    //$('.widgetNoteFootnote').append("<div class='annnoteline'></div><div class='annnoteline'></div><div class='annnoteline'></div>");
+                    $('.widgetNoteContainer').click(function () {
+                        var wasSelected = $(this).hasClass('widgetNoteContainerSelected');
+                        $('.widgetNoteContainerSelected').removeClass('widgetNoteContainerSelected');
+                        if (!wasSelected) $(this).addClass('widgetNoteContainerSelected');
+
+                        var dimStr = $('.currentAdaptiveView').attr('data-dim');
+                        var h = dimStr ? dimStr.split('x')[1] : '0';
+                        var $leftPanel = $('.leftPanel:visible');
+                        var leftPanelOffset = (!$axure.player.isMobileMode() && $leftPanel.length > 0) ? $leftPanel.width() : 0;
+                        var $rightPanel = $('.rightPanel:visible');
+                        var rightPanelOffset = (!$axure.player.isMobileMode() && $rightPanel.length > 0) ? $rightPanel.width() : 0;
+                        var viewDimensions = {
+                            h: h != '0' ? h : '',
+                            scaleVal: $('.vpScaleOption').find('.selectedRadioButton').parent().attr('val'),
+                            height: $('.rightPanel').height(),
+                            panelWidthOffset: leftPanelOffset + rightPanelOffset
+                        };
+                        $axure.messageCenter.postMessage('toggleSelectWidgetNote', { id: this.getAttribute('data-id'), value: !wasSelected, view: viewDimensions});
+                    });
+                }
+
+                
+                //if (pageForNotes.masterNotes) {
+                //    for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
+                //        var master = pageForNotes.masterNotes[i];
+                //        hasNotes = populateNotes(master) || hasNotes;
+                //    }
+                //}
+            }
+            
+            return hasNotes;
+        }
+
+        // bind to the page load
+        $axure.page.bind('load.page_notes', function () {
+            closeAllDialogs();
+
+            var hasNotes = false;
+
+            $('#pageNotesContent').html("");
+            hasNotes = populateNotes($axure.page);
+            
+            if(hasNotes) $('#pageNotesEmptyState').hide();
+            else $('#pageNotesEmptyState').show();
+
+            //If footnotes enabled for this prototype...
+            if ($axure.player.isMobileMode()) {
+                $axure.messageCenter.postMessage('annotationToggle', false);
+            } else if($axure.document.configuration.showAnnotations == true) {
+                //If the fn var is defined and set to 0, hide footnotes
+                //else if hide-footnotes button selected, hide them
+                var fnVal = $axure.player.getHashStringVar(FOOTNOTES_VAR_NAME);
+                if(fnVal.length > 0 && fnVal == 0) {
+                    $('#showNotesOption').find('.overflowOptionCheckbox').removeClass('selected');
+                    $axure.messageCenter.postMessage('annotationToggle', false);
+                } else if(!$('#showNotesOption').find('.overflowOptionCheckbox').hasClass('selected')) {
+                    //If the footnotes button isn't selected, hide them on this loaded page
+                    $axure.messageCenter.postMessage('annotationToggle', false);
+                }
+            }
+
+            // Get multiple click call if not removing beforehand
+            $('#notesOverlay').off('click');
+            $('#notesOverlay').on('click', '.closeNotesDialog', function () {
+                var ownerId = $(this).attr("data-ownerid");
+                _toggleAnnDialog(ownerId);
+            });
+            
+            $axure.player.updatePlugins();
+            return false;
+        });
+
+        $axure.messageCenter.addMessageListener(function (message, data) {
+            //var messageData = { id: elementId, x: event.pageX, y: event.pageY }
+            if (message == 'toggleAnnDialog') {
+                _toggleAnnDialog(data.id, data.x, data.y, data.page);
+            }
+        });
+
+    });
+
+    function linkify(text) {
+        var urlRegex = /(\b(((https?|ftp|file):\/\/)|(www\.))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
+        return text.replace(urlRegex, function (url, b, c) {
+            var url2 = (c == 'www.') ? 'http://' + url : url;
+            return '<a href="' + url2 + '" target="_blank" class="noteLink">' + url + '</a>';
+        });
+    }
+
+    function getWidgetNotesHtml(ownerId, page) {
+        var pageForNotes = page || $axure.page;
+        var widgetNoteUi = '';
+
+        widgetNoteUi += "<div data-ownerid='" + ownerId + "' class='closeNotesDialog'></div>";
+        widgetNoteUi += "<div class='notesDialogScroll'>";
+
+        function getNotesForPage(widgetNotes) {
+            for (var i = 0; i < widgetNotes.length; i++) {
+                var widgetNote = widgetNotes[i];
+                if (widgetNote["ownerId"] == ownerId) {
+                    widgetNoteUi += "<div class='widgetNoteContainer' data-id='" + widgetNote["ownerId"] + "'>";
+                    widgetNoteUi += "<div class='widgetNoteFootnote'>" + widgetNote["fn"] + "</div>";
+                    widgetNoteUi += "<div class='widgetNoteLabel'>" + widgetNote["label"] + "</div>";
+
+                    for (var widgetNoteName in widgetNote) {
+                        if (widgetNoteName != "label" && widgetNoteName != "fn" && widgetNoteName != "ownerId") {
+                            widgetNoteUi += "<div class='pageNoteName'>" + widgetNoteName + "</div>";
+                            widgetNoteUi += "<div class='pageNote'>" + linkify(widgetNote[widgetNoteName]) + "</div>";
+                        }
+                    }
+                    widgetNoteUi += "</div>";
+                }
+            }
+        }
+
+        getNotesForPage(pageForNotes.widgetNotes);
+        if (pageForNotes.masterNotes) {
+            for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
+                getNotesForPage(pageForNotes.masterNotes[i].widgetNotes);
+            }
+        }
+
+        widgetNoteUi += "</div>";
+        widgetNoteUi += "<div class='resizeNotesDialog'></div>";
+
+        return widgetNoteUi;
+    }
+
+    var maxZIndex = 1;
+    var dialogs = {};
+    var _toggleAnnDialog = function (id, srcLeft, srcTop, page) {
+
+        if(dialogs[id]) {
+            var $dialog = dialogs[id];
+            // reset the dialog
+            dialogs[id] = undefined;
+            $dialog.find('.notesDialogScroll').getNiceScroll().remove();
+            $dialog.remove();
+            return;
+        }
+        
+        var bufferH = 10;
+        var bufferV = 10;
+        var blnLeft = false;
+        var blnAbove = false;
+        var mfPos = $('#mainPanelContainer').position();
+        var viewablePanelLeftMargin = parseInt($('#mainPanelContainer').css('margin-left'));
+
+        var sourceTop = srcTop + mfPos.top;
+        var sourceLeft = srcLeft + viewablePanelLeftMargin;
+
+        var width = 300;
+        var height = 300;
+
+        if(sourceLeft > width + bufferH) {
+            blnLeft = true;
+        }
+        if(sourceTop > height + bufferV) {
+            blnAbove = true;
+        }
+
+        var top = 0;
+        var left = 0;
+        if(blnAbove) top = sourceTop - height - 20;
+        else top = sourceTop + 10;
+        if(blnLeft) left = sourceLeft - width - 4;
+        else left = sourceLeft - 6;
+
+        //need to set the zindex
+        maxZIndex = maxZIndex + 1;
+        
+        var $dialog = $('<div class="notesDialog"></div>')
+            .appendTo('#notesOverlay')
+            .html(getWidgetNotesHtml(id, page));     
+
+        $dialog.css({ 'left': left, 'top': top, 'z-index': maxZIndex });
+
+        $dialog.find('.notesDialogScroll').niceScroll({ cursorcolor: "#8c8c8c", cursorborder: "0px solid #fff" });
+
+        $dialog.find('.notesDialogScroll').on($axure.eventNames.mouseDownName, function(event) {
+            event.stopPropagation();
+        });
+        
+        $dialog.find('.closeNotesDialog').on($axure.eventNames.mouseDownName, function (event) {
+            event.stopPropagation();
+        });
+
+        $dialog.on($axure.eventNames.mouseDownName, startDialogMove);
+        var startMouseX;
+        var startMouseY;
+        var startDialogX;
+        var startDialogY;
+        function startDialogMove() {
+            startMouseX = window.event.pageX;
+            startMouseY = window.event.pageY;
+            var position = $dialog.position();
+            startDialogX = position.left;
+            startDialogY = position.top;
+
+            $dialog.addClass('active');
+            $('<div class="splitterMask"></div>').insertAfter($('#notesOverlay'));
+            $(document).bind($axure.eventNames.mouseMoveName, doDialogMove).bind($axure.eventNames.mouseUpName, endDialogMove);
+
+            $dialog.find('.notesDialogScroll').getNiceScroll().hide();
+        }
+
+        function doDialogMove() {
+            var currentX = window.event.pageX;
+            var currentY = window.event.pageY;
+            $dialog.css({ 'left': startDialogX + currentX - startMouseX, 'top': startDialogY + currentY - startMouseY });
+        }
+
+        function endDialogMove() {
+            $('div.splitterMask').remove();
+            $dialog.removeClass('active');
+            $(document).unbind($axure.eventNames.mouseMoveName, doDialogMove).unbind($axure.eventNames.mouseUpName, endDialogMove);
+
+            $dialog.find('.notesDialogScroll').getNiceScroll().resize();
+            $dialog.find('.notesDialogScroll').getNiceScroll().show();
+        }
+
+        $dialog.find('.resizeNotesDialog').on($axure.eventNames.mouseDownName, startDialogResize);
+
+        var startDialogW;
+        var startDialogH;
+        function startDialogResize() {
+            event.stopPropagation();
+
+            startMouseX = window.event.pageX;
+            startMouseY = window.event.pageY;
+            startDialogW = Number($dialog.css('width').replace('px',''));
+            startDialogH = Number($dialog.css('height').replace('px', ''));
+
+            $dialog.addClass('active');
+            $('<div class="splitterMask"></div>').insertAfter($('#notesOverlay'));
+            $(document).bind($axure.eventNames.mouseMoveName, doDialogResize).bind($axure.eventNames.mouseUpName, endDialogResize);
+
+            $dialog.find('.notesDialogScroll').getNiceScroll().hide();
+        }
+
+        function doDialogResize() {
+            var currentX = window.event.pageX;
+            var currentY = window.event.pageY;
+            var newWidth = Math.max(200, startDialogW + currentX - startMouseX);
+            var newHeight = Math.max(200, startDialogH + currentY - startMouseY);
+            $dialog.css({ 'width': newWidth, 'height': newHeight });
+        }
+
+        function endDialogResize() {
+            $('div.splitterMask').remove();
+            $dialog.removeClass('active');
+            $(document).unbind($axure.eventNames.mouseMoveName, doDialogResize).unbind($axure.eventNames.mouseUpName, endDialogResize);
+
+            $dialog.find('.notesDialogScroll').getNiceScroll().resize();
+            $dialog.find('.notesDialogScroll').getNiceScroll().show();
+        }
+
+        dialogs[id] = $dialog;
+
+        // scroll ... just for IE
+        //window.scrollTo(scrollX, scrollY);
+    };
+    
+    $(document).on('sidebarCollapse', function (event, data) {
+        clearSelection();
+    });
+
+    $(document).on('pluginShown', function (event, data) {
+        if(data != 2) {
+            clearSelection();
+        }
+    });
+
+    function clearSelection() {
+        var selectedNote = $('#pageNotesContainer').find('.widgetNoteContainerSelected');
+        if(selectedNote.length > 0) {
+            selectedNote.removeClass('widgetNoteContainerSelected');
+            //var dimStr = $('.currentAdaptiveView').attr('data-dim');
+            //var h = dimStr ? dimStr.split('x')[1] : '0';
+            //var $leftPanel = $('.leftPanel:visible');
+            //var leftPanelOffset = (!$axure.player.isMobileMode() && $leftPanel.length > 0) ? $leftPanel.width() : 0;
+            //var $rightPanel = $('.rightPanel:visible');
+            //var rightPanelOffset = (!$axure.player.isMobileMode() && $rightPanel.length > 0) ? $rightPanel.width() : 0;
+            //var viewDimensions = {
+            //    h: h != '0' ? h : '',
+            //    scaleVal: $('.vpScaleOption').find('.selectedRadioButton').parent().attr('val'),
+            //    scrollLeft: $('#clipFrameScroll').scrollLeft(),
+            //    scrollTop: $('#clipFrameScroll').scrollTop(),
+            //    height: $('.rightPanel').height(),
+            //    panelWidthOffset: leftPanelOffset + rightPanelOffset
+            //};
+            //$axure.messageCenter.postMessage('toggleSelectWidgetNote', { id: '', value: false, view: viewDimensions });
+            $axure.messageCenter.postMessage('toggleSelectWidgetNote', { id: '', value: false });
+            //$axure.messageCenter.postMessage('toggleSelectWidgetNote', '');
+        }
+    }
+
+    function closeAllDialogs() {
+        for (var id in dialogs) {
+            var $dialog = dialogs[id];
+            if ($dialog !== undefined) _toggleAnnDialog(id);
+        }
+    }
+
+    $axure.player.toggleFootnotes = function(val) {
+        var scaleCheckDiv = $('#showNotesOption').find('.overflowOptionCheckbox');
+        if (scaleCheckDiv.hasClass('selected')) {
+            if (!val) $('#showNotesOption').click();
+        } else {
+            if (val) $('#showNotesOption').click();
+        }
+    }
+
+    function footnotes_click(event) {
+        var scaleCheckDiv = $('#showNotesOption').find('.overflowOptionCheckbox');
+        if (scaleCheckDiv.hasClass('selected')) {
+            closeAllDialogs();
+
+            scaleCheckDiv.removeClass('selected');
+            $axure.messageCenter.postMessage('annotationToggle', false);
+            //Add 'fn' hash string var so that footnotes stay hidden across reloads
+            $axure.player.setVarInCurrentUrlHash(FOOTNOTES_VAR_NAME, 0);
+        } else {
+            scaleCheckDiv.addClass('selected');
+            $axure.messageCenter.postMessage('annotationToggle', true);
+            //Delete 'fn' hash string var if it exists since default is visible
+            $axure.player.deleteVarFromCurrentUrlHash(FOOTNOTES_VAR_NAME);
+        }
+    }
+
+    function createNotesOverlay() {
+        var $targetPanel = $('#clippingBounds');
+
+        if (!$('#notesOverlay').length) {
+            var notesOverlay = document.createElement('div');
+            notesOverlay.setAttribute('id', 'notesOverlay');
+
+            $targetPanel.prepend(notesOverlay);
+            $(notesOverlay).append('&nbsp;');
+        }
+    }
+
+    function generatePageNotes() {
+        var pageNotesUi = "<div id='pageNotesHeader'>";
+
+        pageNotesUi += "<div id='pageNotesToolbar' style='height: 12px;'>";
+        pageNotesUi += "</div>";
+        pageNotesUi += "</div>";
+
+
+        pageNotesUi += "<div id='pageNotesScrollContainer'>";
+        pageNotesUi += "<div id='pageNotesContainer'>";
+        pageNotesUi += "<div id='pageNotesEmptyState' class='emptyStateContainer'><div class='emptyStateTitle'>No notes for this page.</div><div class='emptyStateContent'>Notes added in Axure RP will appear here.</div><div class='dottedDivider'></div></div>";
+        pageNotesUi += "<span id='pageNotesContent'></span>";
+        pageNotesUi += "</div></div>";
+
+        $('#pageNotesHost').html(pageNotesUi);
+
+        if(!$axure.document.configuration.showAnnotations) {
+            $('#pageNotesHost .pageNameHeader').css('padding-right', '55px');
+        }
+    }
+
+})();   

03-资料/产品相关文档/快递员端/快递员/plugins/page_notes/styles/images/notes_panel_off.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
+    <path fill="#008DCB" fill-rule="evenodd" d="M1 0h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm1 2v12h10V2H2zm2 2h6a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 3h6a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 3h6a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
+</svg>

03-资料/产品相关文档/快递员端/快递员/plugins/page_notes/styles/images/notes_panel_on.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
+    <path fill="#6D6D6D" fill-rule="evenodd" d="M1 0h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm1 2v12h10V2H2zm2 2h6a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 3h6a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 3h6a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
+</svg>

03-资料/产品相关文档/快递员端/快递员/plugins/page_notes/styles/page_notes.css

@@ -0,0 +1,209 @@
+#pageNotesHost {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+#pageNotesHostBtn {
+    order: 2;
+}
+
+#pageNotesHostBtn a {
+    background: url('images/notes_panel_on.svg') no-repeat center center,linear-gradient(transparent, transparent);
+}
+
+#pageNotesHostBtn a.selected, #pageNotesHostBtn a.selected:hover {
+    background: url('images/notes_panel_off.svg') no-repeat center center,linear-gradient(transparent, transparent);
+}
+
+#pageNotesScrollContainer {
+    overflow: auto;
+    width: 100%;
+    flex: 1;
+    -webkit-overflow-scrolling: touch;
+}    
+
+#pageNotesContent {
+	overflow: visible;
+}
+
+.pageNoteContainer {
+    padding: 0px 12px 8px 12px;
+}
+
+.mobileMode .pageNoteContainer {
+    padding: 0px 16px 8px 17px;
+}
+
+.pageNoteName {
+    font-size: 13px;
+    font-weight: bold;
+    color: #2c2c2c;
+    margin: 15px 0px 5px 0px;
+    white-space: nowrap;
+}
+
+.pageNote {
+    font-size: 13px;
+    color: #2a2e38;
+    line-height: 1.67;
+    word-wrap: break-word;
+}
+
+.pageNote ul {
+    list-style: disc;
+    padding: 0px 0px 0px 40px;
+}
+
+.pageNote ul ul{
+    list-style: circle;
+}
+
+.pageNote ul ul ul{
+    list-style: square;
+}
+
+.pageNote ul ul ul ul {
+    list-style: disc;
+}
+
+.pageNote ul ul ul ul ul {
+    list-style: circle;
+}
+
+.pageNote ul ul ul ul ul ul {
+    list-style: square;
+}
+
+.widgetNoteContainer {
+    padding: 12px;
+    border-bottom: 1px solid transparent;
+    border-top: 1px solid transparent;
+    cursor: pointer;
+}
+
+.mobileMode .widgetNoteContainer {
+    padding: 12px 16px 12px 17px;
+}
+
+.widgetNoteContainerSelected {
+    background-color: white;
+    border-bottom: 1px solid #c2c2c2;
+    border-top: 1px solid #c2c2c2;
+}
+
+.widgetNoteFootnote {
+    display: inline-block;
+    padding-top: 1px;
+    background-color: #fff849;
+    font-size: 11px;
+    font-weight: bold;
+    line-height: 16px;
+    margin-right: 8px;
+    padding: 0px 5px;
+    color: #000;
+}
+
+div.annnoteline {
+    display: inline-block;
+    width: 9px;
+    height: 1px;
+    border-bottom: 1px solid white;
+    margin-top: 1px;
+}
+
+.widgetNoteLabel {
+    font-size: 13px;
+    font-weight: 600;
+    color: #58167d;
+    margin-top: 4px;
+    float: right;
+}
+
+.noteLink {
+    text-decoration: inherit;
+    color: inherit;
+}
+
+.noteLink:hover {
+    background-color: white;
+}
+
+.notesSectionHeader {
+    margin: 0px 8px 0px 12px;
+}
+
+.notesPageNameHeader {
+    margin: 8px 8px 15px 12px;
+}
+
+.mobileMode .notesPageNameHeader {
+    margin: 18px 14px 5px 16px;
+}
+
+#notesOverlay {
+    width: 0;
+    height: 0;
+    position: absolute;
+    overflow: visible;
+    z-index: 1;
+}
+
+div.closeNotesDialog {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 11px;
+    height: 10px;
+    object-fit: contain;
+    background: url(../../../resources/images/close_x.svg) no-repeat center center, linear-gradient(transparent, transparent);
+    margin-left: auto;
+    cursor: pointer;
+}
+
+div.resizeNotesDialog {
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    width: 11px;
+    height: 10px;
+    object-fit: contain;
+    background: url(../../../resources/images/resize.svg) no-repeat center center, linear-gradient(transparent, transparent);
+    margin-left: auto;
+    cursor: nwse-resize;
+}
+
+div.notesDialog {
+    position: absolute;
+    padding: 16px 3px 10px 3px;
+    background-color: #efefef;
+    width: 300px;
+    height: 300px;
+    line-height: normal;
+    border: #8F949A solid 1px;
+    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
+    cursor: move;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+}
+
+div.notesDialog.active {
+    user-select: none;
+}
+
+div.notesDialog .widgetNoteContainer {
+    cursor: auto;
+    padding: 2px 26px 16px 14px;
+}
+
+div.notesDialogScroll {
+    overflow-x: hidden;
+    overflow-y: auto;
+    height: 100%;
+    cursor: auto;
+}
+
+.mobileMode .pageNoteName, .mobileMode #pageNotesToolbar, .mobileMode .dottedDivider {
+    display: none;
+}