diff --git a/timesketch/frontend-ng/src/App.vue b/timesketch/frontend-ng/src/App.vue index f0d99ab411..56bcff5b66 100644 --- a/timesketch/frontend-ng/src/App.vue +++ b/timesketch/frontend-ng/src/App.vue @@ -23,7 +23,7 @@ limitations under the License. - + diff --git a/timesketch/frontend-ng/src/assets/main.scss b/timesketch/frontend-ng/src/assets/main.scss index 56a04879ae..9a63d7a6d5 100644 --- a/timesketch/frontend-ng/src/assets/main.scss +++ b/timesketch/frontend-ng/src/assets/main.scss @@ -148,10 +148,18 @@ html { background-color: #f5f5f5; } +.light-highlight-selected { + background-color: #e6e6e6; +} + .dark-highlight { background-color: #303030; } +.dark-highlight-selected { + background-color: #383838; +} + .light-info-card { background-color: rgba(33, 150, 243, .1); color: #333; @@ -183,3 +191,10 @@ html { .v-card--link:before { background: none; } + +.notransition { + -webkit-transition: none !important; + -moz-transition: none !important; + -o-transition: none !important; + transition: none !important; +} diff --git a/timesketch/frontend-ng/src/components/Explore/TimelineChip.vue b/timesketch/frontend-ng/src/components/Explore/TimelineChip.vue index c462a76144..aef2a89f2c 100644 --- a/timesketch/frontend-ng/src/components/Explore/TimelineChip.vue +++ b/timesketch/frontend-ng/src/components/Explore/TimelineChip.vue @@ -108,46 +108,37 @@ limitations under the License. @click="toggleTimeline()" :style="getTimelineStyle(timeline)" class="mr-2 mb-3 pr-1 timeline-chip" - :class="{failed: timelineFailed}" + :class="[{ failed: timelineFailed }, $vuetify.theme.dark ? 'dark-highlight' : 'light-highlight']" :ripple="!timelineFailed" >
- - mdi-alert-circle-outline - mdi-circle + + mdi-alert-circle-outline + + mdi-circle {{ timeline.name }} - + - + {{ eventsCount | compactNumber }} - - + + mdi-dots-vertical @@ -406,14 +397,14 @@ export default { return 'mdi-alert-circle-outline' }, timelineFailed() { - return this.timelineStatus === 'fail'; + return this.timelineStatus === 'fail' }, timelineChipColor() { if (!this.timeline.color.startsWith('#')) { return '#' + this.timeline.color } return this.timeline.color - } + }, }, methods: { rename() { @@ -455,9 +446,10 @@ export default { this.$emit('save', this.timeline) }, 300), getTimelineStyle(timeline) { - const greyOut = (this.timelineStatus === 'ready' && !this.isSelected) + const greyOut = this.timelineStatus === 'ready' && !this.isSelected return { - opacity: greyOut ? '50%':'100%', + opacity: greyOut ? '50%' : '100%', + backgroundColor: this.$vuetify.theme.dark ? '#303030' : '#f5f5f5', } }, fetchData() { @@ -570,10 +562,8 @@ export default { diff --git a/timesketch/frontend-ng/src/components/Scenarios/Scenario.vue b/timesketch/frontend-ng/src/components/Scenarios/Scenario.vue index a4c5a3307c..75af5f9990 100644 --- a/timesketch/frontend-ng/src/components/Scenarios/Scenario.vue +++ b/timesketch/frontend-ng/src/components/Scenarios/Scenario.vue @@ -21,7 +21,15 @@ limitations under the License. @click="expanded = !expanded" class="pa-4" flat - :class="$vuetify.theme.dark ? 'dark-hover' : 'light-hover'" + :class=" + $vuetify.theme.dark + ? expanded + ? 'dark-highlight' + : 'dark-hover' + : expanded + ? 'light-highlight' + : 'light-hover' + " > mdi-clipboard-check-outline @@ -45,7 +53,7 @@ limitations under the License. diff --git a/timesketch/frontend-ng/src/views/Explore.vue b/timesketch/frontend-ng/src/views/Explore.vue index 3e93c3d31a..ac4e6e85e8 100644 --- a/timesketch/frontend-ng/src/views/Explore.vue +++ b/timesketch/frontend-ng/src/views/Explore.vue @@ -46,10 +46,9 @@ limitations under the License. placeholder="Search" single-line dense - filled flat solo - class="pa-1" + class="pa-2" append-icon="mdi-magnify" @click:append="search()" id="tsSearchInput" diff --git a/timesketch/frontend-ng/src/views/Sketch.vue b/timesketch/frontend-ng/src/views/Sketch.vue index e3d496474f..95f80a7733 100644 --- a/timesketch/frontend-ng/src/views/Sketch.vue +++ b/timesketch/frontend-ng/src/views/Sketch.vue @@ -100,7 +100,7 @@ limitations under the License. > - + @@ -236,7 +236,7 @@ limitations under the License. - + mdi-menu