✨design✨

static/efficient-ui

@@ -1 +1 @@

                                
                                
                                
                            
                                
                                    
                                        1 -
                                        Subproject commit de68efc82aa23ebb7a5f007af0f393167e2c4105
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        1 +
                                        Subproject commit a98d70311f88ffc0d1551bc96a8a85c64f30fdf5
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/ripples.js

@@ -0,0 +1,32 @@

                                
                                
                                
                            
                                
                                    
                                        1 +
                                        // @license magnet:?xt=urn:btih:8e4f440f4c65981c5bf93c76d35135ba5064d8b7&dn=apache-2.0.txt Apache-2.0
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        2 +
                                        (() => {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        3 +
                                            const rippleHosts = document.querySelectorAll('.button, button:not(.link-button), input, select, .navbar a, .navrail a');
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        4 +
                                            function generateRipple(rippleX, rippleY, rippleDimensions) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        5 +
                                                const div = document.createElement('div');
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        6 +
                                                div.className = 'ripple-pad';
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 +
                                                div.style.width = `${rippleDimensions}px`;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        8 +
                                                div.style.height = `${rippleDimensions}px`;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        9 +
                                                div.style.left = `${rippleX}px`;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        10 +
                                                div.style.top = `${rippleY}px`;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        11 +
                                                div.style.borderRadius = `${rippleDimensions}px`;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        12 +
                                                return div;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        13 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        14 +
                                            for (const host of rippleHosts) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        15 +
                                                host.addEventListener('mousedown', (event) => {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        16 +
                                                    const rect = host.getBoundingClientRect();
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 +
                                                    const cursorX = event.clientX;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        18 +
                                                    const cursorY = event.clientY;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        19 +
                                                    const fromTop = cursorY - rect.top;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        20 +
                                                    const fromBottom = rect.height - fromTop;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        21 +
                                                    const fromLeft = cursorX - rect.left;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        22 +
                                                    const fromRight = rect.width - fromLeft;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        23 +
                                                    const requiredDimension = Math.ceil(Math.max(fromRight, fromLeft, fromTop, fromBottom));
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        24 +
                                                    const ripple = generateRipple(fromLeft - requiredDimension, fromTop - requiredDimension, requiredDimension * 2);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        25 +
                                                    host.appendChild(ripple);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        26 +
                                                    ripple.addEventListener('animationend', ({ animationName }) => {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        27 +
                                                        if (animationName === 'RippleEffect') ripple.remove();
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        28 +
                                                    });
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        29 +
                                                });
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        30 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        31 +
                                        })()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        32 +
                                        // @license-end
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/style.css

@@ -18,6 +18,30 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            18  
                                                /*view-transition-name: root;*/
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            19  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            20  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        21 +
                                        .ripple-pad {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        22 +
                                            background: #ffffff99;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        23 +
                                            position: absolute;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        24 +
                                            opacity: 1;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        25 +
                                            transform: scale(0);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        26 +
                                            animation: RippleEffect 375ms cubic-bezier(0, 0.55, 0.45, 1) forwards;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        27 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        28 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        29 +
                                        .button-flat .ripple-pad {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        30 +
                                            background: var(--color-primary-3);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        31 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        32 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        33 +
                                        @keyframes RippleEffect {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        34 +
                                            to {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        35 +
                                                transform: scale(1);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        36 +
                                                opacity: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        37 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        38 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        39 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        40 +
                                        button, input, .button, select {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        41 +
                                            position: relative;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        42 +
                                            overflow: hidden;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        43 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        44 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            45  
                                            nav {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            46  
                                                /*view-transition-name: nav;*/
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            47  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -599,3 +623,7 @@ dd {

                                
                                
                                
                            
                                
                                    
                                        
                                            623  
                                                gap: 0.5rch;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            624  
                                                font-weight: 400;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            625  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        626 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        627 +
                                        #picture-buttons {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        628 +
                                            padding: 0 1rem;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        629 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/default.html

@@ -94,5 +94,6 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            94  
                                                    {% endwith %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            95  
                                                    <script src="/static/efficient-ui/dialogs.js"></script>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            96  
                                                    <script src="/static/efficient-ui/toasts.js"></script>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        97 +
                                                <script src="/static/ripples.js"></script>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            98  
                                                </body>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            99  
                                            </html>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/picture.html

@@ -11,27 +11,33 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            11  
                                                <div id="picture-view">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            12  
                                                    <x-frame id="picture-actions">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            13  
                                                        <ul class="action-list">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        14 -
                                                        <li><a href="{{ resource.origin_url }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        15 -
                                                            <iconify-icon icon="mdi:web"></iconify-icon>Original source
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        16 -
                                                        </a></li>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 -
                                                        <li><a href="/raw/picture/{{ resource.id }}" target="_blank">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        18 -
                                                            <iconify-icon icon="mdi:image"></iconify-icon>View separately
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        19 -
                                                        </a></li>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            14  
                                                            <li><a href="/raw/picture/{{ resource.id }}" download="GigadataPicture_{{ resource.id }}{{ file_extension }}">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            15  
                                                                <iconify-icon icon="mdi:download"></iconify-icon>Download
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            16  
                                                            </a></li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            17  
                                                            <li><a href="/picture/{{ resource.id }}/get-annotations">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            18  
                                                                <iconify-icon icon="ic:baseline-account-tree"></iconify-icon>JSON annotations
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            19  
                                                            </a></li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        20 +
                                                        <li><a href="/raw/picture/{{ resource.id }}" target="_blank">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        21 +
                                                            <iconify-icon icon="mdi:image"></iconify-icon>View separately
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        22 +
                                                        </a></li>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            23  
                                                            {% if have_permission %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            24  
                                                                <li><a href="/picture/{{ resource.id }}/annotate">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            25  
                                                                    <iconify-icon icon="mdi:vector-point-select"></iconify-icon>Annotate
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            26  
                                                                </a></li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        30 -
                                                            <li><a href="/picture/{{ resource.id }}/put-annotations-form">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        31 -
                                                                <iconify-icon icon="mdi:file-edit"></iconify-icon>Submit JSON annotations
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        27 +
                                                        {% endif %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        28 +
                                                        {% if resource.origin_url %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        29 +
                                                            <li><a href="{{ resource.origin_url }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        30 +
                                                                <iconify-icon icon="mdi:web"></iconify-icon>Original source
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            31  
                                                                </a></li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        33 -
                                                            <li><a href="/picture/{{ resource.id }}/edit-metadata">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        34 -
                                                                <iconify-icon icon="mdi:edit"></iconify-icon>Edit metadata
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        32 +
                                                        {% endif %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        33 +
                                                        {% if resource.replaced_by %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        34 +
                                                            <li><a href="/picture/{{ resource.replaced_by.id }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        35 +
                                                                <iconify-icon icon="mdi:new-releases"></iconify-icon>Replacement
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        36 +
                                                            </a></li>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        37 +
                                                        {% endif %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        38 +
                                                        {% if resource.replaces %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        39 +
                                                            <li><a href="/picture/{{ resource.replaces.id }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        40 +
                                                                <iconify-icon icon="mdi:archive"></iconify-icon>Old version
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            41  
                                                                </a></li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            42  
                                                            {% endif %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            43  
                                                            {% if current_user %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -39,6 +45,14 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            45  
                                                                    <iconify-icon icon="mdi:content-copy"></iconify-icon>Copy
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            46  
                                                                </a></li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            47  
                                                            {% endif %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        48 +
                                                        {% if have_permission %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        49 +
                                                            <li><a href="/picture/{{ resource.id }}/put-annotations-form">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        50 +
                                                                <iconify-icon icon="mdi:file-edit"></iconify-icon>Submit JSON annotations
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        51 +
                                                            </a></li>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        52 +
                                                            <li><a href="/picture/{{ resource.id }}/edit-metadata">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        53 +
                                                                <iconify-icon icon="mdi:edit"></iconify-icon>Edit metadata
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        54 +
                                                            </a></li>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        55 +
                                                        {% endif %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            56  
                                                            {% if have_permission %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            57  
                                                                <li><details>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            58  
                                                                    <summary>