Skip to content

P
purescript-gargantext
Commit 48a16913 authored by arturo's avatar arturo
Browse files
Options

[graph] Node Focus 

* #375: rc6.x
parent 8c72c681
Pipeline #2769 failed with stage
    in 0 seconds
    Expand all Hide whitespace changes
    Inline Side-by-side
    Showing with 2346 additions and 721 deletions
    dist/styles/bootstrap-darkster.css
    View file @ 48a16913
    ...@@ -6002,19 +6002,29 @@ h3 { ...@@ -6002,19 +6002,29 @@ h3 {
    position: relative; position: relative;
    transition: color 150ms ease-in-out; transition: color 150ms ease-in-out;
    } }
    .b-icon-button--overlay.b-icon-button::before { .b-icon-button__inner {
    z-index: 1;
    position: relative;
    }
    .b-icon-button::before {
    left: -10px;
    right: -10px;
    top: -6px; top: -6px;
    right: -6px;
    bottom: -6px; bottom: -6px;
    left: -6px;
    content: "";
    background-color: #212529;
    border-radius: 5px; border-radius: 5px;
    z-index: -1;
    position: absolute; position: absolute;
    transition: background-color 150ms ease-in-out; transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
    }
    .b-icon-button--overlay::before {
    content: "";
    }
    .b-icon-button--level-1:hover::before {
    background-color: #212529;
    }
    .b-icon-button--level-2::before {
    background-color: #212529;
    } }
    .b-icon-button--overlay:hover.b-icon-button::before { .b-icon-button--level-2:hover::before {
    background-color: #0a0c0d; background-color: #0a0c0d;
    } }
    .b-icon-button--enabled, .b-icon-button--muted, .b-icon-button--idled { .b-icon-button--enabled, .b-icon-button--muted, .b-icon-button--idled {
    ...@@ -6065,6 +6075,9 @@ h3 { ...@@ -6065,6 +6075,9 @@ h3 {
    .b-icon-button--enabled.b-icon-button--dark:hover, .b-icon-button--muted.b-icon-button--dark:hover { .b-icon-button--enabled.b-icon-button--dark:hover, .b-icon-button--muted.b-icon-button--dark:hover {
    color: #b3b3b3; color: #b3b3b3;
    } }
    .b-icon-button--enabled.b-icon-button:active::before, .b-icon-button--enabled.b-icon-button--active::before, .b-icon-button--muted.b-icon-button:active::before, .b-icon-button--muted.b-icon-button--active::before {
    box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
    }
    .b-icon-button--idled:hover { .b-icon-button--idled:hover {
    cursor: default; cursor: default;
    } }
    ...@@ -7414,6 +7427,7 @@ input[type=range]:-moz-focusring { ...@@ -7414,6 +7427,7 @@ input[type=range]:-moz-focusring {
    flex-grow: 1; flex-grow: 1;
    pointer-events: all; pointer-events: all;
    position: relative; position: relative;
    content: layout;
    } }
    .graph-layout__focus__inner { .graph-layout__focus__inner {
    top: 0; top: 0;
    ...@@ -7467,6 +7481,55 @@ input[type=range]:-moz-focusring { ...@@ -7467,6 +7481,55 @@ input[type=range]:-moz-focusring {
    display: none; display: none;
    } }
    .graph-doc-focus {
    scrollbar-width: none;
    overflow-y: scroll;
    background-color: #000000;
    height: 100%;
    position: relative;
    }
    .graph-doc-focus::-webkit-scrollbar {
    display: none;
    }
    .graph-doc-focus::before {
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 45%);
    content: "";
    z-index: 1;
    pointer-events: none;
    position: sticky;
    top: 0;
    height: 16px;
    width: 100%;
    display: block;
    }
    .graph-doc-focus::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 45%);
    content: "";
    z-index: 1;
    pointer-events: none;
    position: sticky;
    bottom: 0;
    height: 16px;
    width: 100%;
    display: block;
    }
    .graph-doc-focus__header {
    padding: 0.75rem 1.25rem;
    font-size: 20px;
    }
    .right-handed .graph-doc-focus__header {
    float: right;
    }
    .left-handed .graph-doc-focus__header {
    float: left;
    }
    .graph-doc-focus__body {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    }
    .graph-sidebar { .graph-sidebar {
    scrollbar-width: none; scrollbar-width: none;
    overflow-y: scroll; overflow-y: scroll;
    ...@@ -7590,6 +7653,22 @@ input[type=range]:-moz-focusring { ...@@ -7590,6 +7653,22 @@ input[type=range]:-moz-focusring {
    .graph-doc-list__item:hover { .graph-doc-list__item:hover {
    background-color: #121212; background-color: #121212;
    } }
    .graph-doc-list__item--selected::before {
    content: "";
    position: absolute;
    z-index: 1;
    width: 2px;
    background-color: #0F81C7;
    left: 0;
    top: 0;
    bottom: 0;
    }
    .graph-doc-list__item--selected:first-child::before {
    border-top-left-radius: 0.25rem;
    }
    .graph-doc-list__item--selected:last-child::before {
    border-bottom-left-radius: 0.25rem;
    }
    .graph-doc-list__item__main { .graph-doc-list__item__main {
    flex-grow: 1; flex-grow: 1;
    padding-right: 1.25rem; padding-right: 1.25rem;
    ...@@ -7607,6 +7686,15 @@ input[type=range]:-moz-focusring { ...@@ -7607,6 +7686,15 @@ input[type=range]:-moz-focusring {
    color: #CED4DA; color: #CED4DA;
    } }
    .graph-contact-list__item__title, .graph-contact-list__item__subtitle {
    line-height: 1.3;
    margin-bottom: 2px;
    }
    .graph-contact-list__item__subtitle {
    font-size: 15px;
    color: #DEE2E6;
    }
    .graph-toolbar { .graph-toolbar {
    display: flex; display: flex;
    padding: 8px; padding: 8px;
    ...@@ -7938,23 +8026,26 @@ a:focus, a:hover { ...@@ -7938,23 +8026,26 @@ a:focus, a:hover {
    visibility: visible; visibility: visible;
    } }
    .right-handed .mainleaf:hover .mainleaf__settings-icon { .right-handed .mainleaf:hover .mainleaf__settings-icon {
    margin-left: 16px; margin-left: 18px;
    } }
    .left-handed .mainleaf:hover .mainleaf__settings-icon { .left-handed .mainleaf:hover .mainleaf__settings-icon {
    margin-right: 16px; margin-right: 18px;
    } }
    .right-handed .mainleaf__update-icon { .right-handed .mainleaf__update-icon {
    margin-left: 16px; margin-left: 18px;
    } }
    .left-handed .mainleaf__update-icon { .left-handed .mainleaf__update-icon {
    margin-right: 16px; margin-right: 18px;
    } }
    .mainleaf__update-icon.b-icon-button--overlay::before, .mainleaf__settings-icon.b-icon-button--overlay::before { .mainleaf__update-icon.b-icon-button::before, .mainleaf__settings-icon.b-icon-button::before {
    top: -5px; top: -5px;
    bottom: -5px;
    left: -6px;
    right: -6px;
    } }
    .mainleaf__progress-bar { .mainleaf__progress-bar {
    width: 64px; width: 64px;
    ...@@ -8910,19 +9001,43 @@ select.form-control { ...@@ -8910,19 +9001,43 @@ select.form-control {
    top: calc( 50% - 50px ); top: calc( 50% - 50px );
    left: calc( 50% - 50px ); left: calc( 50% - 50px );
    } }
    .phylo__frame {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    display: flex;
    z-index: 1;
    width: 100%;
    height: calc(100vh - 56px);
    justify-content: flex-end;
    pointer-events: none;
    }
    .right-handed .phylo__frame {
    flex-direction: row;
    }
    .left-handed .phylo__frame {
    flex-direction: row-reverse;
    }
    .phylo__sidebar { .phylo__sidebar {
    position: fixed;
    width: 480px; width: 480px;
    height: calc(100vh - 56px); height: inherit;
    z-index: 1; flex-grow: 0;
    pointer-events: all;
    } }
    .right-handed .phylo__sidebar { .phylo__sidebar__inner {
    right: 0; position: fixed;
    height: inherit;
    width: inherit;
    }
    .right-handed .phylo__sidebar__inner {
    border-left: 1px solid #dee2e6; border-left: 1px solid #dee2e6;
    } }
    .left-handed .phylo__sidebar { .left-handed .phylo__sidebar__inner {
    left: 0;
    border-right: 1px solid #dee2e6; border-right: 1px solid #dee2e6;
    } }
    ......
    dist/styles/bootstrap-default.css
    View file @ 48a16913
    ...@@ -5956,19 +5956,29 @@ h3 { ...@@ -5956,19 +5956,29 @@ h3 {
    position: relative; position: relative;
    transition: color 150ms ease-in-out; transition: color 150ms ease-in-out;
    } }
    .b-icon-button--overlay.b-icon-button::before { .b-icon-button__inner {
    z-index: 1;
    position: relative;
    }
    .b-icon-button::before {
    left: -10px;
    right: -10px;
    top: -6px; top: -6px;
    right: -6px;
    bottom: -6px; bottom: -6px;
    left: -6px;
    content: "";
    background-color: #F8F9FA;
    border-radius: 5px; border-radius: 5px;
    z-index: -1;
    position: absolute; position: absolute;
    transition: background-color 150ms ease-in-out; transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
    }
    .b-icon-button--overlay::before {
    content: "";
    }
    .b-icon-button--level-1:hover::before {
    background-color: #F8F9FA;
    }
    .b-icon-button--level-2::before {
    background-color: #F8F9FA;
    } }
    .b-icon-button--overlay:hover.b-icon-button::before { .b-icon-button--level-2:hover::before {
    background-color: #dae0e5; background-color: #dae0e5;
    } }
    .b-icon-button--enabled, .b-icon-button--muted, .b-icon-button--idled { .b-icon-button--enabled, .b-icon-button--muted, .b-icon-button--idled {
    ...@@ -6019,6 +6029,9 @@ h3 { ...@@ -6019,6 +6029,9 @@ h3 {
    .b-icon-button--enabled.b-icon-button--dark:hover, .b-icon-button--muted.b-icon-button--dark:hover { .b-icon-button--enabled.b-icon-button--dark:hover, .b-icon-button--muted.b-icon-button--dark:hover {
    color: #0a0c0d; color: #0a0c0d;
    } }
    .b-icon-button--enabled.b-icon-button:active::before, .b-icon-button--enabled.b-icon-button--active::before, .b-icon-button--muted.b-icon-button:active::before, .b-icon-button--muted.b-icon-button--active::before {
    box-shadow: 0 0 0 0.2rem rgba(233, 236, 239, 0.5);
    }
    .b-icon-button--idled:hover { .b-icon-button--idled:hover {
    cursor: default; cursor: default;
    } }
    ...@@ -7367,6 +7380,7 @@ input[type=range]:-moz-focusring { ...@@ -7367,6 +7380,7 @@ input[type=range]:-moz-focusring {
    flex-grow: 1; flex-grow: 1;
    pointer-events: all; pointer-events: all;
    position: relative; position: relative;
    content: layout;
    } }
    .graph-layout__focus__inner { .graph-layout__focus__inner {
    top: 0; top: 0;
    ...@@ -7420,6 +7434,55 @@ input[type=range]:-moz-focusring { ...@@ -7420,6 +7434,55 @@ input[type=range]:-moz-focusring {
    display: none; display: none;
    } }
    .graph-doc-focus {
    scrollbar-width: none;
    overflow-y: scroll;
    background-color: #fff;
    height: 100%;
    position: relative;
    }
    .graph-doc-focus::-webkit-scrollbar {
    display: none;
    }
    .graph-doc-focus::before {
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 45%);
    content: "";
    z-index: 1;
    pointer-events: none;
    position: sticky;
    top: 0;
    height: 16px;
    width: 100%;
    display: block;
    }
    .graph-doc-focus::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
    content: "";
    z-index: 1;
    pointer-events: none;
    position: sticky;
    bottom: 0;
    height: 16px;
    width: 100%;
    display: block;
    }
    .graph-doc-focus__header {
    padding: 0.75rem 1.25rem;
    font-size: 20px;
    }
    .right-handed .graph-doc-focus__header {
    float: right;
    }
    .left-handed .graph-doc-focus__header {
    float: left;
    }
    .graph-doc-focus__body {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    }
    .graph-sidebar { .graph-sidebar {
    scrollbar-width: none; scrollbar-width: none;
    overflow-y: scroll; overflow-y: scroll;
    ...@@ -7543,6 +7606,22 @@ input[type=range]:-moz-focusring { ...@@ -7543,6 +7606,22 @@ input[type=range]:-moz-focusring {
    .graph-doc-list__item:hover { .graph-doc-list__item:hover {
    background-color: #FCFCFC; background-color: #FCFCFC;
    } }
    .graph-doc-list__item--selected::before {
    content: "";
    position: absolute;
    z-index: 1;
    width: 2px;
    background-color: #17a2b8;
    left: 0;
    top: 0;
    bottom: 0;
    }
    .graph-doc-list__item--selected:first-child::before {
    border-top-left-radius: 0.25rem;
    }
    .graph-doc-list__item--selected:last-child::before {
    border-bottom-left-radius: 0.25rem;
    }
    .graph-doc-list__item__main { .graph-doc-list__item__main {
    flex-grow: 1; flex-grow: 1;
    padding-right: 1.25rem; padding-right: 1.25rem;
    ...@@ -7560,6 +7639,15 @@ input[type=range]:-moz-focusring { ...@@ -7560,6 +7639,15 @@ input[type=range]:-moz-focusring {
    color: #6C757D; color: #6C757D;
    } }
    .graph-contact-list__item__title, .graph-contact-list__item__subtitle {
    line-height: 1.3;
    margin-bottom: 2px;
    }
    .graph-contact-list__item__subtitle {
    font-size: 15px;
    color: #495057;
    }
    .graph-toolbar { .graph-toolbar {
    display: flex; display: flex;
    padding: 8px; padding: 8px;
    ...@@ -7891,23 +7979,26 @@ a:focus, a:hover { ...@@ -7891,23 +7979,26 @@ a:focus, a:hover {
    visibility: visible; visibility: visible;
    } }
    .right-handed .mainleaf:hover .mainleaf__settings-icon { .right-handed .mainleaf:hover .mainleaf__settings-icon {
    margin-left: 16px; margin-left: 18px;
    } }
    .left-handed .mainleaf:hover .mainleaf__settings-icon { .left-handed .mainleaf:hover .mainleaf__settings-icon {
    margin-right: 16px; margin-right: 18px;
    } }
    .right-handed .mainleaf__update-icon { .right-handed .mainleaf__update-icon {
    margin-left: 16px; margin-left: 18px;
    } }
    .left-handed .mainleaf__update-icon { .left-handed .mainleaf__update-icon {
    margin-right: 16px; margin-right: 18px;
    } }
    .mainleaf__update-icon.b-icon-button--overlay::before, .mainleaf__settings-icon.b-icon-button--overlay::before { .mainleaf__update-icon.b-icon-button::before, .mainleaf__settings-icon.b-icon-button::before {
    top: -5px; top: -5px;
    bottom: -5px;
    left: -6px;
    right: -6px;
    } }
    .mainleaf__progress-bar { .mainleaf__progress-bar {
    width: 64px; width: 64px;
    ...@@ -8863,19 +8954,43 @@ select.form-control { ...@@ -8863,19 +8954,43 @@ select.form-control {
    top: calc( 50% - 50px ); top: calc( 50% - 50px );
    left: calc( 50% - 50px ); left: calc( 50% - 50px );
    } }
    .phylo__frame {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    display: flex;
    z-index: 1;
    width: 100%;
    height: calc(100vh - 56px);
    justify-content: flex-end;
    pointer-events: none;
    }
    .right-handed .phylo__frame {
    flex-direction: row;
    }
    .left-handed .phylo__frame {
    flex-direction: row-reverse;
    }
    .phylo__sidebar { .phylo__sidebar {
    position: fixed;
    width: 480px; width: 480px;
    height: calc(100vh - 56px); height: inherit;
    z-index: 1; flex-grow: 0;
    pointer-events: all;
    } }
    .right-handed .phylo__sidebar { .phylo__sidebar__inner {
    right: 0; position: fixed;
    height: inherit;
    width: inherit;
    }
    .right-handed .phylo__sidebar__inner {
    border-left: 1px solid #dee2e6; border-left: 1px solid #dee2e6;
    } }
    .left-handed .phylo__sidebar { .left-handed .phylo__sidebar__inner {
    left: 0;
    border-right: 1px solid #dee2e6; border-right: 1px solid #dee2e6;
    } }
    ......
    dist/styles/bootstrap-greyson.css
    View file @ 48a16913
    ...@@ -5711,19 +5711,29 @@ h3 { ...@@ -5711,19 +5711,29 @@ h3 {
    position: relative; position: relative;
    transition: color 150ms ease-in-out; transition: color 150ms ease-in-out;
    } }
    .b-icon-button--overlay.b-icon-button::before { .b-icon-button__inner {
    z-index: 1;
    position: relative;
    }
    .b-icon-button::before {
    left: -10px;
    right: -10px;
    top: -6px; top: -6px;
    right: -6px;
    bottom: -6px; bottom: -6px;
    left: -6px;
    content: "";
    background-color: #F8F9FA;
    border-radius: 5px; border-radius: 5px;
    z-index: -1;
    position: absolute; position: absolute;
    transition: background-color 150ms ease-in-out; transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
    }
    .b-icon-button--overlay::before {
    content: "";
    }
    .b-icon-button--level-1:hover::before {
    background-color: #F8F9FA;
    }
    .b-icon-button--level-2::before {
    background-color: #F8F9FA;
    } }
    .b-icon-button--overlay:hover.b-icon-button::before { .b-icon-button--level-2:hover::before {
    background-color: #dae0e5; background-color: #dae0e5;
    } }
    .b-icon-button--enabled, .b-icon-button--muted, .b-icon-button--idled { .b-icon-button--enabled, .b-icon-button--muted, .b-icon-button--idled {
    ...@@ -5774,6 +5784,9 @@ h3 { ...@@ -5774,6 +5784,9 @@ h3 {
    .b-icon-button--enabled.b-icon-button--dark:hover, .b-icon-button--muted.b-icon-button--dark:hover { .b-icon-button--enabled.b-icon-button--dark:hover, .b-icon-button--muted.b-icon-button--dark:hover {
    color: #0a0c0d; color: #0a0c0d;
    } }
    .b-icon-button--enabled.b-icon-button:active::before, .b-icon-button--enabled.b-icon-button--active::before, .b-icon-button--muted.b-icon-button:active::before, .b-icon-button--muted.b-icon-button--active::before {
    box-shadow: 0 0 0 0.2rem rgba(233, 236, 239, 0.5);
    }
    .b-icon-button--idled:hover { .b-icon-button--idled:hover {
    cursor: default; cursor: default;
    } }
    ...@@ -7123,6 +7136,7 @@ input[type=range]:-moz-focusring { ...@@ -7123,6 +7136,7 @@ input[type=range]:-moz-focusring {
    flex-grow: 1; flex-grow: 1;
    pointer-events: all; pointer-events: all;
    position: relative; position: relative;
    content: layout;
    } }
    .graph-layout__focus__inner { .graph-layout__focus__inner {
    top: 0; top: 0;
    ...@@ -7176,6 +7190,55 @@ input[type=range]:-moz-focusring { ...@@ -7176,6 +7190,55 @@ input[type=range]:-moz-focusring {
    display: none; display: none;
    } }
    .graph-doc-focus {
    scrollbar-width: none;
    overflow-y: scroll;
    background-color: #fff;
    height: 100%;
    position: relative;
    }
    .graph-doc-focus::-webkit-scrollbar {
    display: none;
    }
    .graph-doc-focus::before {
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 45%);
    content: "";
    z-index: 1;
    pointer-events: none;
    position: sticky;
    top: 0;
    height: 16px;
    width: 100%;
    display: block;
    }
    .graph-doc-focus::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
    content: "";
    z-index: 1;
    pointer-events: none;
    position: sticky;
    bottom: 0;
    height: 16px;
    width: 100%;
    display: block;
    }
    .graph-doc-focus__header {
    padding: 0.75rem 1.25rem;
    font-size: 20px;
    }
    .right-handed .graph-doc-focus__header {
    float: right;
    }
    .left-handed .graph-doc-focus__header {
    float: left;
    }
    .graph-doc-focus__body {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    }
    .graph-sidebar { .graph-sidebar {
    scrollbar-width: none; scrollbar-width: none;
    overflow-y: scroll; overflow-y: scroll;
    ...@@ -7299,6 +7362,22 @@ input[type=range]:-moz-focusring { ...@@ -7299,6 +7362,22 @@ input[type=range]:-moz-focusring {
    .graph-doc-list__item:hover { .graph-doc-list__item:hover {
    background-color: #FCFCFC;