Merge filepicker and share iframes

2020-04-07 14:27:44 +02:00
parent 4672bf794b
commit 894a355f0a
18 changed files with 213 additions and 490 deletions
--- a/www/secureiframe/app-secure.less
+++ b/www/secureiframe/app-secure.less
@@ -0,0 +1,96 @@
+@import (reference) '../../customize/src/less2/include/colortheme-all.less';
+@import (reference) '../../customize/src/less2/include/modal.less';
+@import (reference) '../../customize/src/less2/include/icon-colors.less';
+@import (reference) '../../customize/src/less2/include/fileupload.less';
+@import (reference) '../../customize/src/less2/include/alertify.less';
+@import (reference) '../../customize/src/less2/include/tippy.less';
+@import (reference) '../../customize/src/less2/include/checkmark.less';
+@import (reference) '../../customize/src/less2/include/password-input.less';
+@import (reference) '../../customize/src/less2/include/modals-ui-elements.less';
+@import (reference) '../../customize/src/less2/include/usergrid.less';
+
+&.cp-app-secureiframe {
+    .modals-ui-elements_main();
+    .iconColors_main();
+    .fileupload_main();
+    .alertify_main();
+    .tippy_main();
+    .checkmark_main(20px);
+    .password_main();
+    .modal_main();
+    .usergrid_main();
+
+    #cp-filepicker-dialog {
+        display: none;
+        .cp-modal {
+            .cp-filepicker-content {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+                overflow-y: auto;
+            }
+
+            .cp-loading-spinner-container {
+                height: 100px;
+                .cp-spinner {
+                    border-color: @colortheme_logo-2;
+                    border-top-color: transparent;
+                }
+            }
+
+            .cp-filepicker-content-element {
+                width: 125px;
+                //min-width: 200px;
+                //height: 1em;
+                padding: 10px;
+                margin: 5px;
+
+                display: inline-flex;
+                flex-flow: column;
+
+                box-sizing: content-box;
+
+                text-align: left;
+                line-height: 1em;
+                cursor: pointer;
+
+                background-color: @colortheme_modal-bg;
+
+                border: 1px solid @colortheme_logo-2;
+                color: @colortheme_logo-2;
+
+                transition: all 0.1s;
+
+                &:hover {
+                    color: @colortheme_modal-fg;
+                }
+
+                align-items: center;
+
+                img {
+                    max-width: 100px;
+                    max-height: 100px;
+                    background: #fff;
+                }
+
+                .cp-filepicker-content-element-name {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    height: 20px;
+                    line-height: 20px;
+                    margin-top: 5px;
+                    max-width: 100%;
+                }
+                .fa, .cptools {
+                    cursor: pointer;
+                    width: 100px;
+                    height: 100px;
+                    font-size: 70px;
+                    text-align: center;
+                    line-height: 100px;
+                }
+            }
+        }
+    }
+}