Missing/unknown item should appear visually distinct

- Remove unneeded in-progress CSS;
2025-06-25 10:44:21 +00:00 · 2019-07-01 14:37:17 -07:00 · 2019-07-01 13:29:02 -07:00 · 2019-07-01 13:21:59 -07:00 · 2019-07-01 12:42:43 -07:00 · 2019-06-28 09:42:51 -07:00
17 changed files with 131 additions and 154 deletions
--- a/src/plugins/displayLayout/components/SubobjectView.vue
+++ b/src/plugins/displayLayout/components/SubobjectView.vue
@ -22,7 +22,7 @@
 <template>
    <layout-frame :item="item"
                  :grid-size="gridSize"
-                  :title="domainObject && domainObject.name"
+                  :title="domainObject && domainObject.name + ': ' + domainObject.type"
                  @move="(gridDelta) => $emit('move', gridDelta)"
                  @endMove="() => $emit('endMove')">
        <object-frame v-if="domainObject"
--- a/src/plugins/displayLayout/components/TelemetryView.vue
+++ b/src/plugins/displayLayout/components/TelemetryView.vue
@ -23,12 +23,14 @@
 <template>
     <layout-frame :item="item"
                   :grid-size="gridSize"
+                   :title="domainObject && domainObject.name + ': ' + domainObject.type"
+                   :class="{'c-telemetry-view--unknown': domainObject.type.indexOf('unknown') !== -1}"
                   @move="(gridDelta) => $emit('move', gridDelta)"
                   @endMove="() => $emit('endMove')">
        <div class="c-telemetry-view"
             :style="styleObject"
             v-if="domainObject">
-            <div v-if="showLabel"
+            <div v-if="showLabel || domainObject.type.indexOf('unknown') !== -1"
                  class="c-telemetry-view__label">
                <div class="c-telemetry-view__label-text">{{ domainObject.name }}</div>
            </div>
@ -50,6 +52,21 @@
        display: flex;
        align-items: stretch;

+        &--unknown {
+            .c-telemetry-view__label-text {
+                @include isUnknown();
+                display: flex;
+                align-items: center;
+                &:before {
+                    content: $glyph-icon-object-unknown;
+                    font-family: symbolsfont;
+                    font-style: normal;
+                    display: inline-block;
+                    margin-right: $interiorMarginSm;
+                }
+            }
+        }
+
        > * {
            // Label and value holders
            flex: 1 1 auto;
--- a/src/plugins/folderView/components/GridItem.vue
+++ b/src/plugins/folderView/components/GridItem.vue
@ -1,6 +1,6 @@
 <template>
    <a class="l-grid-view__item c-grid-item"
-        :class="{ 'is-alias': item.isAlias === true }"
+        :class="{ 'is-alias': item.isAlias === true, 'c-grid-item--unknown': item.type.cssClass === undefined || item.type.cssClass.indexOf('unknown') !== -1 }"
        :href="objectLink">
        <div class="c-grid-item__type-icon"
             :class="(item.type.cssClass != undefined) ? 'bg-' + item.type.cssClass : 'bg-icon-object-unknown'">
@ -34,10 +34,13 @@
        padding: $interiorMarginLg;

        &__type-icon {
-            filter: $colorKeyFilter;
            flex: 0 0 $gridItemMobile;
            font-size: floor($gridItemMobile / 2);
            margin-right: $interiorMarginLg;
+            &:before {
+                filter: $colorKeyFilter;
+                height: 100%;
+            }
        }

        &.is-alias {
@ -48,6 +51,22 @@
            }
        }

+        &--unknown {
+            @include isUnknown();
+            /*[class*='__'] {
+                opacity: 0.7;
+            }
+            
+            [class*='__name'],
+            [class*='__metadata'] {
+                font-style: italic;
+            }*/
+
+            [class*='__type-icon__glyph'] {
+                filter: $filterItemUnknown;
+            }
+        }
+
        &__details {
            display: flex;
            flex-flow: column nowrap;
@ -93,11 +112,10 @@
            transition: background $transOutMs ease-in-out;

            &:hover {
-                background: $colorItemBgHov;
-                transition: $transIn;
+                filter: $filterItemHoverFg;
+                //transition: $transIn;

                .c-grid-item__type-icon {
-                    filter: $colorKeyFilterHov;
                    transform: scale(1);
                    transition: $transInBounce;
                }
--- a/src/plugins/folderView/components/GridView.vue
+++ b/src/plugins/folderView/components/GridView.vue
@ -1,5 +1,5 @@
 <template>
-    <div class="l-grid-view">
+    <div class="l-grid-view foo">
        <grid-item v-for="(item, index) in items"
            :key="index"
            :item="item"
@ -31,129 +31,6 @@
            }
        }
    }
-
-    /******************************* GRID ITEMS */
-    .c-grid-item {
-        // Mobile-first
-        @include button($bg: $colorItemBg, $fg: $colorItemFg);
-        cursor: pointer;
-        display: flex;
-        padding: $interiorMarginLg;
-
-        &__type-icon {
-            filter: $colorKeyFilter;
-            flex: 0 0 $gridItemMobile;
-            font-size: floor($gridItemMobile / 2);
-            margin-right: $interiorMarginLg;
-        }
-
-        &.is-alias {
-            // Object is an alias to an original.
-            [class*='__type-icon'] {
-                @include isAlias();
-                color: $colorIconAliasForKeyFilter;
-            }
-        }
-
-        &__details {
-            display: flex;
-            flex-flow: column nowrap;
-            flex: 1 1 auto;
-        }
-
-        &__name {
-            @include ellipsize();
-            color: $colorItemFg;
-            font-size: 1.2em;
-            font-weight: 400;
-            margin-bottom: $interiorMarginSm;
-        }
-
-        &__metadata {
-            color: $colorItemFgDetails;
-            font-size: 0.9em;
-
-            body.mobile & {
-                [class*='__item-count'] {
-                    &:before {
-                        content: ' - ';
-                    }
-                }
-            }
-        }
-
-        &__controls {
-            color: $colorItemFgDetails;
-            flex: 0 0 64px;
-            font-size: 1.2em;
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-
-            > * + * {
-                margin-left: $interiorMargin;
-            }
-        }
-
-        body.desktop & {
-            $transOutMs: 300ms;
-            flex-flow: column nowrap;
-            transition: background $transOutMs ease-in-out;
-
-            &:hover {
-                background: $colorItemBgHov;
-                transition: $transIn;
-
-                .c-grid-item__type-icon {
-                    filter: $colorKeyFilterHov;
-                    transform: scale(1);
-                    transition: $transInBounce;
-                }
-            }
-
-            > * {
-                margin: 0; // Reset from mobile
-            }
-
-            &__controls {
-                align-items: start;
-                flex: 0 0 auto;
-                order: 1;
-                .c-info-button,
-                .c-pointer-icon { display: none; }
-            }
-
-            &__type-icon {
-                flex: 1 1 auto;
-                font-size: floor($gridItemDesk / 3);
-                margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
-                order: 2;
-                transform: scale(0.9);
-                transform-origin: center;
-                transition: all $transOutMs ease-in-out;
-            }
-
-            &__details {
-                flex: 0 0 auto;
-                justify-content: flex-end;
-                order: 3;
-            }
-
-            &__metadata {
-                display: flex;
-
-                &__type {
-                    flex: 1 1 auto;
-                    @include ellipsize();
-                }
-
-                &__item-count {
-                    opacity: 0.7;
-                    flex: 0 0 auto;
-                }
-            }
-        }
-    }
 </style>

 <script>
--- a/src/plugins/folderView/components/ListItem.vue
+++ b/src/plugins/folderView/components/ListItem.vue
@ -1,6 +1,6 @@
 <template>
    <tr class="c-list-item"
-        :class="{ 'is-alias': item.isAlias === true }"
+        :class="{ 'is-alias': item.isAlias === true, 'c-list-item--unknown': item.type.cssClass === undefined || item.type.cssClass.indexOf('unknown') !== -1 }"
        @click="navigate">
        <td class="c-list-item__name">
            <a :href="objectLink" ref="objectLink">
@ -20,6 +20,7 @@
    /******************************* LIST ITEM */
    .c-list-item {
        &__name a {
+            color: $colorItemFg;
            display: flex;

            > * + * { margin-left: $interiorMarginSm; }
@ -53,6 +54,11 @@
                }
            }
        }
+
+        &--unknown {
+            @include isUnknown();
+            filter: $filterItemUnknown;
+        }
    }
 </style>

--- a/src/plugins/folderView/components/ListView.vue
+++ b/src/plugins/folderView/components/ListView.vue
@ -62,15 +62,16 @@

        tbody tr {
            background: $colorListItemBg;
-            transition: $transOut;
        }

        body.desktop & {
            tbody tr {
+                transition: $transOut;
                cursor: pointer;

                &:hover {
-                    background: $colorListItemBgHov;
+                    background: $colorItemTreeHoverBg;
+                    filter: $filterItemHoverFg;
                    transition: $transIn;
                }
            }
--- a/src/plugins/tabs/components/tabs.vue
+++ b/src/plugins/tabs/components/tabs.vue
@ -16,7 +16,10 @@
                v-for="(tab,index) in tabsList"
                :key="index"
                :class="[
-                    {'is-current': isCurrent(tab)},
+                    {
+                    'is-current': isCurrent(tab),
+                    'c-tab--unknown': tab.type.definition.cssClass.indexOf('unknown') !== -1
+                    },
                    tab.type.definition.cssClass
                ]"
                @click="showTab(tab)">
@ -29,7 +32,12 @@
            :class="{'c-tabs-view__object-holder--hidden': !isCurrent(tab)}">
            <div v-if="currentTab"
                 class="c-tabs-view__object-name l-browse-bar__object-name--w"
-                 :class="currentTab.type.definition.cssClass">
+                 :class="[
+                 {
+                    'c-tabs-view__object--unknown': tab.type.definition.cssClass.indexOf('unknown') !== -1
+                 },
+                    currentTab.type.definition.cssClass
+                 ]">
                <div class="l-browse-bar__object-name">
                    {{currentTab.domainObject.name}}
                </div>
@ -102,6 +110,13 @@
            width: 100%;
        }
    }
+
+    .c-tab,
+    .c-tabs-view__object {
+        &--unknown {
+            @include isUnknown();
+        }
+    }
 </style>

 <script>
--- a/src/styles-new/_about.scss
+++ b/src/styles-new/_about.scss
@ -108,6 +108,10 @@

    a {
        color: $colorAboutLink;
+
+        &:hover {
+            color: $colorAHov;
+        }
    }

    em {
--- a/src/styles-new/_constants-espresso.scss
+++ b/src/styles-new/_constants-espresso.scss
@ -142,6 +142,8 @@ $browseFrameColor: pullForward($colorBodyBg, 10%);
 $browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
 $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
 $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
+$filterItemHoverFg: brightness(1.2);
+$filterItemUnknown: contrast(0);

 /************************************************** EDITING */
 $editUIColor: $uiColor; // Base color
--- a/src/styles-new/_constants-maelstrom.scss
+++ b/src/styles-new/_constants-maelstrom.scss
@ -146,6 +146,8 @@ $browseFrameColor: pullForward($colorBodyBg, 10%);
 $browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
 $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
 $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
+$filterItemHoverFg: brightness(1.2);
+$filterItemUnknown: contrast(0);

 /************************************************** EDITING */
 $editUIColor: $uiColor; // Base color
--- a/src/styles-new/_constants-snow.scss
+++ b/src/styles-new/_constants-snow.scss
@ -142,6 +142,8 @@ $browseFrameColor: pullForward($colorBodyBg, 10%);
 $browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
 $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
 $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
+$filterItemHoverFg: brightness(0.9);
+$filterItemUnknown: contrast(0);

 /************************************************** EDITING */
 $editUIColor: $uiColor; // Base color
--- a/src/styles-new/_global.scss
+++ b/src/styles-new/_global.scss
@ -79,9 +79,6 @@ a {
    color: $colorA;
    cursor: pointer;
    text-decoration: none;
-    &:hover {
-        color: $colorAHov;
-    }
 }

 body, html {
--- a/src/styles-new/_mixins.scss
+++ b/src/styles-new/_mixins.scss
@ -36,10 +36,14 @@
 }

@mixin glyphBg($glyphUrl) {
-    background-image: $glyphUrl;
-    background-position: center;
-    background-size: contain;
-    background-repeat: no-repeat;
+    &:before {
+        content: '';
+        display: block;
+        background-image: $glyphUrl;
+        background-position: center;
+        background-size: contain;
+        background-repeat: no-repeat;
+    }
 }

 [class*="icon-"] {
@ -97,6 +101,24 @@
    }
 }

+@mixin isUnknown() {
+    // Common styles to be applied to tree items, object labels, grid and list item views
+    font-style: italic;
+    opacity: 0.7;
+
+    &[class*='icon']:before,
+    &[class*='icon']:after,
+    [class*='icon']:before,
+    [class*='icon']:after {
+        font-style: normal; // Prevent symbolsfont element from being italicized;
+    }
+
+    [class*='icon']:before {
+        // Target :before to avoid affecting alias indicator
+        filter: $filterItemUnknown;
+    }
+}
+
@mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
    background-image: linear-gradient(-45deg,
        rgba($c, $a) 25%, transparent 25%,
--- a/src/ui/components/ObjectFrame.vue
+++ b/src/ui/components/ObjectFrame.vue
@ -22,11 +22,13 @@
 <template>
    <div class="c-so-view has-local-controls"
        :class="{
-            'c-so-view--no-frame': !hasFrame,
+            'c-so-view--no-frame': !hasFrame && cssClass.indexOf('unknown') === -1,
            'has-complex-content': complexContent
        }">
-        <div class="c-so-view__header">
-            <div class="c-so-view__header__icon" :class="cssClass"></div>
+        <div class="c-so-view__header"
+            :class="{'c-so-view__header--unknown': cssClass.indexOf('unknown') !== -1}">
+            <div class="c-so-view__header__icon"
+                 :class="cssClass"></div>
            <div class="c-so-view__header__name">
                {{ domainObject && domainObject.name }}
            </div>
@ -74,6 +76,10 @@
                @include ellipsize();
                flex: 0 1 auto;
            }
+
+            &--unknown {
+                @include isUnknown();
+            }
        }

        &:not(.c-so-view--no-frame) {
--- a/src/ui/components/ObjectLabel.vue
+++ b/src/ui/components/ObjectLabel.vue
@ -1,5 +1,6 @@
 <template>
 <a class="c-tree__item__label c-object-label"
+   :class="{'c-object-label--unknown': typeClass.indexOf('icon-object-unknown') !== -1}"
    draggable="true"
    @dragstart="dragStart"
    @click="navigateOrPreview"
@ -39,6 +40,10 @@
            color: $colorItemTreeIcon;
            width: $treeTypeIconW;
        }
+
+        &--unknown {
+            @include isUnknown();
+        }
    }
 </style>

--- a/src/ui/layout/BrowseBar.vue
+++ b/src/ui/layout/BrowseBar.vue
@ -5,7 +5,12 @@
                class="l-browse-bar__nav-to-parent-button c-icon-button c-icon-button--major icon-pointer-left"
                @click="goToParent"></button>
            <div class="l-browse-bar__object-name--w"
-                 :class="type.cssClass">
+                 :class="[
+                     {
+                        'l-browse-bar--unknown': type.cssClass.indexOf('unknown') !== -1
+                     },
+                    type.cssClass
+                 ]">
                <span
                    class="l-browse-bar__object-name c-input-inline"
                    @blur="updateName"
@ -316,5 +321,9 @@ const PLACEHOLDER_OBJECT = {};
        &__object-name {
            flex: 0 1 auto;
        }
+
+        &--unknown {
+            @include isUnknown();
+        }
    }
 </style>
--- a/src/ui/layout/mct-tree.vue
+++ b/src/ui/layout/mct-tree.vue
@ -83,13 +83,7 @@

            &:hover {
                background: $colorItemTreeHoverBg;
-                .c-tree__item__type-icon:before {
-                    color: $colorItemTreeIconHover;
-                }
-
-                .c-tree__item__name {
-                    color: $colorItemTreeHoverFg;
-                }
+                > * { filter: $filterItemHoverFg; }
            }

            &.is-navigated-object,
Author	SHA1	Message	Date
charlesh88	371d132bfc	Missing/unknown item should appear visually distinct - Remove unneeded in-progress CSS;	2019-07-01 14:37:17 -07:00
charlesh88	91904ec22d	Missing/unknown item should appear visually distinct - Add missing/unknown styling to browse-bar;	2019-07-01 13:29:02 -07:00
charlesh88	afaee9a483	Missing/unknown item should appear visually distinct - Apply missing/unknown styling to tabs view; - Augment `isUnknown` mixin to also target same element with class icon*;	2019-07-01 13:21:59 -07:00
charlesh88	709e1eb10e	Missing/unknown item should appear visually distinct - 'no-frame' CSS class application only allowed if domainObject.type is not unknown; - Show telemetry-view label element if domainObject.type is unknown;	2019-07-01 12:42:43 -07:00
charlesh88	6740677652	Missing/unknown item should appear visually distinct - Styling applied to telemetry views for type unknown;	2019-06-28 09:42:51 -07:00
charlesh88	ee7521915f	Missing/unknown item should appear visually distinct - New "isUnknown" sass mixin to consolidate styling; - Refined styling for grid, list-item and object label views; - Flex and Display Layout frame headers now style properly for missing/unknown items; - TODO: visual indication when header is hidden (alphanumerics, summary widgets, frame hidden manually, etc.)	2019-06-26 16:41:55 -07:00
charlesh88	bc590081b3	Missing/unknown item should appear visually distinct - Styling for grid and list-item views; - Refactor of item hover approach to use filters rather than discrete colors;	2019-06-26 09:52:13 -07:00
charlesh88	854ffb9153	Missing/unknown item should appear visually distinct - Theme color added; - Styling for tree items; - Removed unused tree item hover styling;	2019-06-26 06:12:07 -07:00