drugflow-molstar 0.2.0 → 0.2.2

package/lib/app/molstar/lib/mol-plugin-ui/skin/base/components/sequence.scss

@@ -0,0 +1,126 @@
+.msp-sequence {
+    position: absolute;
+    right: 0;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    background: $sequence-background;
+}
+
+$sequence-select-height: 24px;
+.msp-sequence-select {
+    position: relative;
+    height: $sequence-select-height;
+    width: 100%;
+    margin-bottom: 1px;
+    background: $control-background;
+    text-align: left;
+
+    > span {
+        display: inline-block;
+        line-height: $sequence-select-height;
+        padding: 0 $control-spacing;
+        font-size: 85%;
+        font-weight: bold;
+        cursor: default;
+    }
+
+    > select {
+        display: inline-block;
+        max-width: 120px;
+        width: auto;
+        text-overflow: ellipsis;
+        font-size: 85%;
+        height: $sequence-select-height;
+        line-height: $sequence-select-height;
+        background-size: 6px 8px;
+        background-color: $control-background;
+    }
+}
+
+.msp-sequence-wrapper {
+    word-break: break-word;
+    // use $control-spacing for top to have space for sequence numebrs
+    padding: $control-spacing $control-spacing $info-vertical-padding $control-spacing;
+    user-select: none;
+}
+
+.msp-sequence-wrapper-non-empty {
+    font-size: 85%;
+    line-height: 180%;
+    font-family: "Courier New", monospace;
+    background: $msp-form-control-background;
+
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: absolute;
+    top: $sequence-select-height + 1px;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+
+.msp-sequence-chain-label {
+    margin-left: $control-spacing;
+    margin-top: $control-spacing;
+    user-select: none;
+    color: $sequence-number-color;
+    font-size: 90%;
+    line-height: 90%;
+    padding-left: 0.2em;
+}
+
+.msp-sequence-wrapper {
+    span {
+        cursor: pointer;
+    }
+
+    .msp-sequence-residue-long {
+        margin: 0em 0.2em 0em 0.2em;
+    }
+
+    .msp-sequence-residue-long-begin {
+        margin: 0em 0.2em 0em 0em;
+    }
+
+    .msp-sequence-label {
+        color: $sequence-number-color;
+        font-size: 90%;
+        line-height: 90%;
+        padding-bottom: 1em;
+        padding-left: 0.2em;
+    }
+    
+    .msp-sequence-number {
+        color: $sequence-number-color;
+        word-break: keep-all;
+        cursor: default;
+        position: relative;
+        top: -1.1em;
+        left: 3.1em;
+        padding: 0px;
+        margin-left: -3em;
+        font-size: 80%;
+    }
+
+    .msp-sequence-number-long {
+        left: 3.3em;
+    }
+
+    .msp-sequence-number-long-negative {
+        left: 2.7em;
+    }
+
+    .msp-sequence-number-negative {
+        left: 2.5em;
+    }
+
+    .msp-sequence-present {
+        color: $font-color;
+    }
+
+    .msp-sequence-missing {
+        color: color-lower-contrast($font-color, 33%);
+    }
+}

package/lib/app/molstar/lib/mol-plugin-ui/skin/base/components/slider.scss

@@ -0,0 +1,166 @@
+@mixin borderBox {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
+
+  * {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
+  }
+}
+
+.msp-slider-base {
+  position: relative;
+  height: 14px;
+  padding: 5px 0;
+  width: 100%;
+  border-radius: $slider-border-radius-base;
+  align-self: center;
+  @include borderBox;
+
+  &-rail {
+    position: absolute;
+    width: 100%;
+    background-color: $control-background;
+    height: 4px;
+    border-radius: 2px;
+  }
+
+  &-track {
+    position: absolute;
+    left: 0;
+    height: 4px;
+    border-radius: $slider-border-radius-base;
+    background-color: tint($font-color, 60%);
+  }
+
+  &-handle {
+    position: absolute;
+    margin-left: -11px;
+    margin-top: -9px;
+    width: 22px;
+    height: 22px;
+    cursor: pointer;
+    border-radius: 50%;
+    background-color: $font-color;
+    border: 4px solid $control-background;
+
+    &:hover {
+      background-color: $hover-font-color;
+    }
+  }
+
+  &-mark {
+    position: absolute;
+    top: 18px;
+    left: 0;
+    width: 100%;
+    font-size: 12px;
+  }
+
+  &-mark-text {
+    position: absolute;
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+    cursor: pointer;
+    color: #999;
+
+    &-active {
+      color: #666;
+    }
+  }
+
+  &-step {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background: transparent;
+  }
+
+  &-dot {
+    position: absolute;
+    bottom: -2px;
+    margin-left: -4px;
+    width: 8px;
+    height: 8px;
+    border: 2px solid #e9e9e9;
+    background-color: #fff;
+    cursor: pointer;
+    border-radius: 50%;
+    vertical-align: middle;
+    &:first-child {
+      margin-left: -4px;
+    }
+    &:last-child {
+      margin-left: -4px;
+    }
+    &-active {
+      border-color: tint($font-color, 50%);
+    }
+  }
+
+  &-disabled {
+    background: $default-background;
+    opacity: 0.35;
+    
+    // .msp-slider-base-track {
+    //   background-color: $slider-disabledColor;
+    // }
+    
+    .msp-slider-base-handle, .msp-slider-base-dot {
+      // border-color: $slider-disabledColor;
+      // background-color: color-lower-contrast($font-color, 10%);
+      cursor: not-allowed;
+    }
+
+    .msp-slider-base-mark-text, .msp-slider-base-dot {
+      cursor: not-allowed!important;
+    }
+  }
+}
+
+// .msp-slider-base-vertical {
+//   width: 14px;
+//   height: 100%;
+//   padding: 0 5px;
+
+//   .msp-slider-base {
+//     &-rail {
+//       height: 100%;
+//       width: 4px;
+//     }
+
+//     &-track {
+//       left: 5px;
+//       bottom: 0;
+//       width: 4px;
+//     }
+
+//     &-handle {
+//       margin-left: -5px;
+//       margin-bottom: -7px;
+//     }
+
+//     &-mark {
+//       top: 0;
+//       left: 18px;
+//       height: 100%;
+//     }
+
+//     &-step {
+//       height: 100%;
+//       width: 4px;
+//     }
+
+//     &-dot {
+//       left: 2px;
+//       margin-bottom: -4px;
+//       &:first-child {
+//         margin-bottom: -4px;
+//       }
+//       &:last-child {
+//         margin-bottom: -4px;
+//       }
+//     }
+//   }
+// }

package/lib/app/molstar/lib/mol-plugin-ui/skin/base/components/tasks.scss

@@ -0,0 +1,99 @@
+.msp-task-state {
+
+    line-height: $row-height;
+    //height: $row-height;
+    //position: relative;
+    //margin-top: 1px;
+
+    > span {
+        @include non-selectable;
+        //display: inline-block;
+        //padding: 0 $control-spacing;
+    }
+}
+
+.msp-overlay-tasks {
+    position: absolute;
+    display: flex;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.25);
+
+    .msp-task-state {
+        $size: $row-height;
+
+        > div {
+            height: $size;
+            margin-top: 1px;
+            position: relative;
+            width: 100%;
+            background: $default-background;
+
+            > div {
+                height: $size;
+                line-height: $size;
+                display: inline-block;
+                padding: 0 ($control-spacing);
+                @include non-selectable;
+                white-space: nowrap;
+                background: $default-background;
+                position: absolute;
+            }
+
+            > button {
+                display: inline-block;
+                margin-top: -3px;
+                // font-size: 140%;
+            }
+        }
+    }
+}
+
+/* background */
+
+.msp-background-tasks {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 1000;
+
+    .msp-task-state {
+        $size: $row-height;
+
+        > div {
+            height: $size;
+            margin-top: 1px;
+            position: relative;
+            width: 100%;
+            background: $default-background;
+
+            > div {
+                height: $size;
+                line-height: $size;
+                display: inline-block;
+                padding: 0 ($control-spacing);
+                @include non-selectable;
+                white-space: nowrap;
+                background: $default-background;
+                position: absolute;
+            }
+
+            > button {
+                display: inline-block;
+                margin-top: -3px;
+                // font-size: 140%;
+            }
+        }
+    }
+}
+
+// .msp-background-tasks .msp-task-state {
+//     color:
+// }

package/lib/app/molstar/lib/mol-plugin-ui/skin/base/components/toast.scss

@@ -0,0 +1,84 @@
+
+@use "sass:math";
+
+.msp-toast-container {
+    position: relative;
+    // bottom: $control-spacing;    
+    // right: $control-spacing;
+    // margin-left: $control-spacing;
+    z-index: 1001;
+
+    .msp-toast-entry {
+        color: $font-color;
+        background: $control-background;
+        position: relative;
+        float: right;
+        min-height: $row-height;
+        margin-top: $control-spacing;
+        border: 1px solid $border-color;
+        display: table;
+
+        .msp-toast-title {
+            height: 100%;
+            line-height: $row-height;
+            padding: 0 $control-spacing;
+            background: $default-background;
+            font-weight: bold;
+            display: table-cell;
+
+            -webkit-user-select: none; /* Chrome/Safari */        
+            -moz-user-select: none; /* Firefox */
+            -ms-user-select: none; /* IE10+ */
+
+            /* Rules below not implemented in browsers yet */
+            -o-user-select: none;
+            user-select: none;
+            
+            font-weight: light;
+            
+            cursor: pointer;
+        }
+
+        .msp-toast-message {
+            padding: $info-vertical-padding ($control-spacing + $row-height) $info-vertical-padding $control-spacing;
+            display: table-cell;
+
+            a {
+                text-decoration: none;
+                color: $msp-btn-commit-on-font-color;
+                font-weight: bold;
+
+                &:hover {
+                    text-decoration: underline;
+                    color: $msp-btn-commit-on-hover-font-color;
+                }
+
+                &:active, &:focus {
+                    color: $msp-btn-commit-on-font-color;
+                    outline-offset: 0;
+                    outline: none;    
+                }
+            }
+        }
+
+        .msp-toast-hide {
+            position: absolute;
+            width: $row-height + $control-spacing;
+            right: 0;
+            top: 0;
+            bottom: 0;
+
+            .msp-btn-icon {
+                background: transparent;
+                position: absolute;
+                top: 1px;
+                right: 0;
+                left: 0;
+                bottom: 0;
+                width: 100%;
+                text-align: right;
+                padding-right: math.div($control-spacing, 2);
+            }            
+        }
+    }
+}

package/lib/app/molstar/lib/mol-plugin-ui/skin/base/components/transformer.scss

@@ -0,0 +1,164 @@
+.msp-transformer {
+
+    .msp-entity-badge {
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: $row-height;
+        line-height: $row-height;
+        width: $row-height;
+    }
+}
+
+.msp-layout-right, .msp-layout-left {
+    background: $control-background;
+}
+
+.msp-transformer-wrapper {
+    position: relative;
+}
+
+.msp-transformer-wrapper {
+
+    .msp-entity-badge {
+        left: 0;
+        top: 0;
+    }
+
+    &:first-child {
+        .msp-panel-description-content {
+            top: $row-height + 1;
+        }
+    }
+
+    &:not(:first-child) {
+        .msp-panel-description-content {
+            bottom: $row-height + 1;
+        }
+    }
+}
+
+.msp-transform-wrapper {
+    margin-bottom: $control-spacing;
+}
+
+.msp-transform-wrapper-collapsed {
+    margin-bottom: 1px;
+}
+
+.msp-transform-update-wrapper {
+    margin-bottom: 1px;
+}
+
+.msp-transform-update-wrapper-collapsed {
+    margin-bottom: 1px;
+}
+
+.msp-transform-update-wrapper, .msp-transform-update-wrapper-collapsed {
+    > .msp-transform-header > button {
+        text-align: left;
+        padding-left: $row-height;
+        line-height: 24px;
+        background: color-lower-contrast($control-background, 4%); // $control-background; // color-lower-contrast($default-background, 4%);
+        // font-weight: bold;
+    }
+}
+
+.msp-transform-wrapper > .msp-transform-header > button {
+    text-align: left;
+    background: $default-background; // color-lower-contrast($default-background, 4%);
+    font-weight: bold;
+    padding-right: 5px;
+}
+
+.msp-transform-header {
+    position: relative;
+    // border-top: 1px solid $entity-color-Behaviour; // TODO: separate color
+
+    // > button {
+    //     text-align: left;
+    //     padding-left: $row-height;
+    //     background: $control-background; // color-lower-contrast($default-background, 4%);
+    //     font-weight: bold;
+    // }
+
+    > button > small {
+        font-weight: normal;
+        float: right;
+    }
+    
+    > button {
+        > span:first-child {
+            margin-right: 10px;
+        }
+    }
+
+    > button:hover {
+        color: color-lower-contrast($font-color, 15%);
+    }
+}
+
+.msp-transform-header-brand {
+    // padding-left: 42px;
+    margin-bottom: -1px;
+    svg {
+        fill: $font-color;
+        stroke: $font-color;
+    }
+    // > div {
+    //     position: absolute;
+    //     height: 32px;
+    //     line-height: 32px;
+    //     width: 32px;
+    //     top: 0;
+    //     left: 0;
+    //     text-align: center;
+    //     color: #eceff3;
+    //     fill: #eceff3;
+    //     stroke: #eceff3;
+    //     font-size: 85%;
+    // }
+}
+
+.msp-transform-default-params {
+    background: $default-background;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: $row-height;
+    padding: 0;
+}
+
+.msp-transform-default-params:hover {
+    background: color-lower-contrast($default-background, 20%);
+}
+
+.msp-transform-apply-wrap {
+    position: relative;
+    margin-top: 1px;
+    width: 100%;
+    height: $row-height;
+}
+
+.msp-transform-refresh {
+    width: $control-label-width + $control-spacing - $row-height - 1;
+    margin-left: $row-height + 1;
+    background: $default-background;
+    text-align: right;
+}
+
+.msp-transform-apply {
+    display: block;
+    position: absolute;
+    left: $control-label-width + $control-spacing;
+    right: 0;
+    top: 0;
+}
+
+.msp-transform-apply-wider {
+    margin-left: $row-height + 1px;
+}
+
+.msp-data-beh {
+    margin: $control-spacing 0 !important;
+}