moved event style

buggregator · Nov 30, 2021 · 88166e0 · 88166e0
1 parent b7e2c66
commit 88166e0
Show file tree

Hide file tree

Showing 25 changed files with 642 additions and 333 deletions.
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/resources/js/Components/Event.vue b/resources/js/Components/Event.vue
@@ -26,7 +26,7 @@
  </div>
  </div>
  </div>
- <div class="event__body">
+ <div class="event__body" :class="`event-${event.app}`">
  <slot></slot>
  </div>
  </div>

diff --git a/resources/js/Components/Inspector/Event.vue b/resources/js/Components/Inspector/Event.vue
@@ -1,6 +1,6 @@
 <template>
- <Event :event="event">
- <NavItem :event="event" />
+ <Event :event="event" class="event--inspector">
+ <NavItem :event="event" class="event-inspector__nav"/>
  </Event>
 </template>
 

diff --git a/resources/js/Components/Inspector/NavItem.vue b/resources/js/Components/Inspector/NavItem.vue
@@ -1,16 +1,16 @@
 <template>
  <div>
- <h1 class="font-semibold text-blue-800 dark:text-gray-100 mb-2">
+ <h1 class="event-inspector__title">
  {{ event.process.name }}
  </h1>
 
- <Link :href="event.route.show" class="block">
- <Cards :event="event" class="border hover:bg-white dark:hover:bg-gray-900"/>
+ <Link :href="event.route.show" class="event-inspector__link">
+ <Cards :event="event" class="event-inspector__cards"/>
  </Link>
 
- <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mt-3 text-xs text-gray-400">
+ <div class="event-inspector__footer">
  <span>{{ date }}</span>
- <Host :name="event.serverName"/>
+ <Host :name="event.serverName" class="event-inspector__host"/>
  </div>
  </div>
 </template>

diff --git a/resources/js/Components/Inspector/Show/Cards.vue b/resources/js/Components/Inspector/Show/Cards.vue
@@ -1,16 +1,16 @@
 <template>
- <section class="pt-5 pb-4 px-4 md:px-5 border-b dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start divide-y sm:divide-y-0 sm:divide-x dark:divide-gray-600">
- <div class="w-full sm:w-1/4 pb-5 sm:pb-0">
- <h4 class="text-muted font-bold text-2xs mb-1 uppercase">Timestamp</h4>
- <strong class="text-xs sm:text-sm md:text-md">{{ event.processDate }}</strong>
+ <section class="inspector-cards">
+ <div class="inspector-cards__item sm:px-0">
+ <h4 class="inspector-cards__item-name">Timestamp</h4>
+ <strong class="inspector-cards__item-value md:text-md">{{ event.processDate }}</strong>
  </div>
- <div class="w-full sm:w-1/4 sm:px-10 py-5 sm:py-0">
- <h4 class="text-muted font-bold text-2xs mb-1 uppercase">Duration</h4>
- <strong class="text-xs sm:text-sm md:text-md">{{ event.process.duration }} ms</strong>
+ <div class="inspector-cards__item pt-5 sm:pt-0">
+ <h4 class="inspector-cards__item-name">Duration</h4>
+ <strong class="inspector-cards__item-value md:text-md">{{ event.process.duration }} ms</strong>
  </div>
- <div class="w-full sm:w-1/4 sm:px-10 py-5 sm:py-0">
- <h4 class="text-muted font-bold text-2xs mb-1 uppercase">Result</h4>
- <span :class="`bg-${event.color}-700`" class="px-3 py-1 text-white rounded text-2xs font-bold">{{ event.processResult }}</span>
+ <div class="inspector-cards__item pt-5 sm:pt-0">
+ <h4 class="inspector-cards__item-name">Result</h4>
+ <span :class="`bg-${event.color}-700`" class="inspector-cards__item-label">{{ event.processResult }}</span>
  </div>
  </section>
 </template>

diff --git a/resources/js/Components/Layout/Main.vue b/resources/js/Components/Layout/Main.vue
@@ -1,8 +1,8 @@
 <template>
  <Head :title="title"></Head>
  <div class="main-layout">
- <div class="main-layout__sidebar">
- <LeftSidebar class="w-10 md:w-14 lg:w-16 fixed h-screen">
+ <div class="main-layout__sidebar-wrap">
+ <LeftSidebar class="main-layout__sidebar">
  <slot name="left-sidebar"></slot>
  </LeftSidebar>
  </div>

diff --git a/resources/js/Components/Monolog/Event.vue b/resources/js/Components/Monolog/Event.vue
@@ -1,15 +1,15 @@
 <template>
- <Event :event="event">
- <div class="text-xs break-all">
- <CodeSnippet class="border-b-0 mt-2">
+ <Event :event="event" class="event--monolog">
+ <div class="event-monolog__wrap">
+ <CodeSnippet class="event-monolog__snippet">
  {{ event.text }}
  </CodeSnippet>
 
- <CodeSnippet v-if="hasPayloads" language="json" class="border-b-0">
+ <CodeSnippet v-if="hasPayloads" language="json" class="event-monolog__payloads">
  {{ event.payloads }}
  </CodeSnippet>
 
- <Table v-if="hasFields">
+ <Table v-if="hasFields" class="event-monolog__table">
  <TableRow :title="key" v-for="(value, key) in fields">
  <div v-html="value"></div>
  </TableRow>

diff --git a/resources/js/Components/Ray/Event.vue b/resources/js/Components/Ray/Event.vue
@@ -1,5 +1,5 @@
 <template>
- <Event :event="event" class="event--ray event-ray">
+ <Event :event="event" class="event--ray">
  <div class="event-ray__wrap">
  <EventPayload
  v-for="payload in event.payloads"

diff --git a/resources/js/Components/Slack/Event.vue b/resources/js/Components/Slack/Event.vue
@@ -1,10 +1,10 @@
 <template>
- <Event :event="event">
- <div class="text-xs break-all">
- <CodeSnippet class="border-b-0">
+ <Event :event="event" class="event--slack">
+ <div class="event-slack__wrap">
+ <CodeSnippet class="event-slack__snippet">
  {{ event.text }}
  </CodeSnippet>
- <Table v-if="hasFields">
+ <Table v-if="hasFields" class="event-slack__table">
  <TableRow :title="field.title" v-for="field in fields">
  <div v-html="value(field.value)"></div>
  </TableRow>
@@ -35,7 +35,7 @@ export default {
  methods: {
  value(string) {
  if (typeof string == 'string') {
- return string.replace(/```([^]+?.*?[^]+?[^]+?)```/g, '<pre class="overflow-x-scroll bg-white dark:bg-gray-700 p-2">$1</pre>')
+ return string.replace(/```([^]+?.*?[^]+?[^]+?)```/g, '<pre class="event-slack__pre-value">$1</pre>')
  }
 
  return string

diff --git a/resources/js/Components/UI/Dump.vue b/resources/js/Components/UI/Dump.vue
@@ -3,8 +3,8 @@
  {{ value }}
  </CodeSnippet>
  <div v-else v-html="cleanHtml"
- class="text-blue-700 break-all"
- :class="{'bg-gray-800 rounded p-2 text-xs': dumpId}"
+ class="dump"
+ :class="{'active': dumpId}"
  ></div>
 </template>
 

diff --git a/resources/js/Components/UI/HtmlPreview.vue b/resources/js/Components/UI/HtmlPreview.vue
@@ -1,21 +1,21 @@
 <template>
- <div class="flex flex-col items-center h-full">
- <div class="flex justify-center mb-5">
- <button class="p-1 rounded" @click="device = 'mobile'" :class="{'bg-blue-50 text-blue-600': device == 'mobile'}">
- <svg class="w-10 h-6 fill-current" xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 512.1 512.1">
+ <div class="html-preview">
+ <div class="html-preview__wrap">
+ <button class="html-preview__btn" @click="device = 'mobile'" :class="{'active': device == 'mobile'}">
+ <svg class="html-preview__btn-icon" xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 512.1 512.1">
  <path d="M128 406c4 0 8-4 8-8V124a8 8 0 0 0-15 0v274c0 4 3 8 7 8zM384 264c-4 0-7 3-7 7v204c0 12-11 22-23 22H158c-12 0-22-10-22-22v-47a8 8 0 0 0-15 0v47c0 20 16 37 37 37h196c21 0 38-17 38-37V271c0-4-4-7-8-7zM354 0H158c-21 0-37 17-37 38v56a8 8 0 0 0 15 0V38c0-13 10-23 22-23h31c8 15 24 25 41 25h52c17 0 33-10 41-25h31c12 0 23 10 23 23v203a8 8 0 0 0 15 0V38c0-21-17-38-38-38zm-72 25h-52c-9 0-17-4-23-10h98c-6 6-14 10-23 10z"/>
  <path d="M287 478a8 8 0 0 0 0-15h-62a8 8 0 0 0 0 15h62z"/>
  </svg>
  </button>
- <button @click="device = 'tablet'" class="p-1 rounded" :class="{'bg-blue-50 text-blue-600': device == 'tablet'}">
- <svg class="w-10 h-6 fill-current" xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 512.1 512.1">
+ <button @click="device = 'tablet'" class="html-preview__btn" :class="{'active': device == 'tablet'}">
+ <svg class="html-preview__btn-icon" xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 512.1 512.1">
  <path d="M408 0H104C80 0 60 20 60 44v26a8 8 0 0 0 15 0V44c0-16 13-29 29-29h304c16 0 29 13 29 29v424c0 16-13 29-29 29H104c-16 0-29-13-29-29V100a8 8 0 0 0-15 0v368c0 24 20 44 44 44h304c24 0 44-20 44-44V44c0-24-20-44-44-44z"/>
  <path d="M90 61v284a8 8 0 0 0 15 0V69h302v103a8 8 0 0 0 15 0V61c0-4-3-7-7-7H97c-4 0-7 3-7 7zM90 432c0 4 3 8 7 8h318c4 0 7-4 7-8V202a8 8 0 0 0-15 0v223H105v-50a8 8 0 0 0-15 0v57zM233 467a23 23 0 1 0 46-1 23 23 0 0 0-46 1zm31 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0zM288 42a8 8 0 0 0 0-15h-34a8 8 0 0 0 0 15h34z"/>
  <circle cx="225.6" cy="34.3" r="7.5"/>
  </svg>
  </button>
- <button @click="device = 'desktop'" class="p-1 rounded" :class="{'bg-blue-50 text-blue-600': device == 'desktop'}">
- <svg class="w-10 h-7 fill-current" xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 510.5 510.5">
+ <button @click="device = 'desktop'" class="html-preview__btn" :class="{'active': device == 'desktop'}">
+ <svg class="html-preview__btn-icon h-7" xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 510.5 510.5">
  <path d="M473 30H148a7 7 0 1 0 0 15h325c12 0 23 10 23 22v265h-50a8 8 0 0 0 0 15h50v31c0 13-11 23-23 23H117a7 7 0 1 0 0 15h70l-14 50h-25a7 7 0 1 0 0 15h215a7 7 0 1 0 0-15h-26l-13-50h149c21 0 38-17 38-38V67c0-20-17-37-38-37zM322 466H189l13-50h106l14 50z"/>
  <path d="M87 401H38c-13 0-23-10-23-23v-31h401a7 7 0 1 0 0-15H15V67c0-12 10-22 23-22h80a7 7 0 1 0 0-15H38C17 30 0 47 0 67v311c0 21 17 38 38 38h49a7 7 0 1 0 0-15z"/>
  </svg>

diff --git a/resources/js/Components/UI/TabGroup/Tab.vue b/resources/js/Components/UI/TabGroup/Tab.vue
@@ -1,10 +1,10 @@
 <template>
- <Tab v-slot="{ selected }" as="template">
- <div class="flex flex-col">
- <button class="px-4 py-2 font-bold text-sm" :class="{'text-muted': !selected}">
+ <Tab v-slot="{ selected }" as="template" class="tab">
+ <div class="tab__wrap">
+ <button class="tab__btn" :class="{'text-muted': !selected}">
  <slot></slot>
  </button>
- <div class="h-1 rounded-t" :class="{'bg-blue-500 dark:bg-blue-100': selected}"></div>
+ <div class="tab__thumb" :class="{'selected': selected}"></div>
  </div>
  </Tab>
 </template>

diff --git a/resources/js/Components/VarDump/Event.vue b/resources/js/Components/VarDump/Event.vue
@@ -1,6 +1,6 @@
 <template>
- <Event :event="event">
- <Dump :value="event.payloads.value" />
+ <Event :event="event" class="event--vardump">
+ <Dump :value="event.payloads.value" class="event-var-dump__dump"/>
 
  <Origin :origin="event.origin" />
  </Event>
@@ -9,7 +9,7 @@
 <script>
 import Dump from "@/Components/UI/Dump";
 import Event from "../Event";
-import Origin from "../Ray/Origin";
+import Origin from "./Origin";
 
 export default {
  components: {Origin, Event, Dump},

diff --git a/resources/js/Components/VarDump/Origin.vue b/resources/js/Components/VarDump/Origin.vue
@@ -1,6 +1,6 @@
 <template>
- <div class="flex space-x-4 items-center">
- <span class="text-muted underline text-2xs cursor-help" :title="`${origin.file}:${origin.line_number}`">
+ <div class="event-var-dump__footer">
+ <span class="event-var-dump__footer-text" :title="`${origin.file}:${origin.line_number}`">
  {{ origin.name }}:{{ origin.line_number }}
  </span>
  </div>

diff --git a/resources/scss/app.scss b/resources/scss/app.scss
@@ -11,6 +11,9 @@
 @import "./components/label";
 @import "./components/collapsed";
 @import "./components/sshpre";
+@import "./components/dump";
+@import "./components/html-preview";
+@import "./components/tab";
 @import "./components/layouts/main-layout";
 @import "./components/layouts/left-sidebar";
 @import "./components/layouts/logout";
@@ -20,8 +23,12 @@
 @import "./components/layouts/screens";
 @import "./components/layouts/event";
 @import "./components/events/list-page/event-ray";
+@import "./components/events/list-page/event-monolog";
+@import "./components/events/list-page/event-inspector";
+@import "./components/events/list-page/event-slack";
+@import "./components/events/list-page/event-vardump";
 @import "./components/events/single-page/smtp";
-@import "./components/events/list-page/event-ray";
+@import "./components/events/single-page/inspector";
 
 body {
  @apply bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-50;

diff --git a/resources/scss/components/dump.scss b/resources/scss/components/dump.scss
@@ -0,0 +1,7 @@
+.dump {
+ @apply text-blue-700 break-all;
+
+ &.active {
+ @apply bg-gray-800 rounded p-2 text-xs;
+ }
+}
diff --git a/resources/scss/components/events/list-page/event-inspector.scss b/resources/scss/components/events/list-page/event-inspector.scss
@@ -0,0 +1,17 @@
+.event-inspector {
+ &__title {
+ @apply font-semibold text-blue-800 dark:text-gray-100 mb-2;
+ }
+
+ &__cards {
+ @apply border hover:bg-white dark:hover:bg-gray-900;
+ }
+
+ &__footer {
+ @apply flex flex-col sm:flex-row sm:justify-between sm:items-center mt-3 text-xs text-gray-400;
+ }
+
+ &__link {
+ @apply block;
+ }
+}
diff --git a/resources/scss/components/events/list-page/event-monolog.scss b/resources/scss/components/events/list-page/event-monolog.scss
@@ -0,0 +1,13 @@
+.event-monolog {
+ &__wrap {
+ @apply text-xs break-all;
+ }
+
+ &__snippet {
+ @apply border-b-0 mt-2;
+ }
+
+ &__payloads {
+ @apply border-b-0;
+ }
+}
diff --git a/resources/scss/components/events/list-page/event-slack.scss b/resources/scss/components/events/list-page/event-slack.scss
@@ -0,0 +1,14 @@
+.event-slack {
+ &__wrap {
+ @apply text-xs break-all;
+ }
+
+ &__snippet {
+ @apply border-b-0;
+ }
+
+ &__pre-value {
+ @apply overflow-x-scroll bg-white dark:bg-gray-700 p-2;
+ }
+
+}
diff --git a/resources/scss/components/events/list-page/event-vardump.scss b/resources/scss/components/events/list-page/event-vardump.scss
@@ -0,0 +1,9 @@
+.event-var-dump {
+ &__footer {
+ @apply flex space-x-4 items-center;
+ }
+
+ &__footer-text {
+ @apply text-muted underline text-2xs cursor-help;
+ }
+}
diff --git a/resources/scss/components/events/single-page/inspector.scss b/resources/scss/components/events/single-page/inspector.scss
@@ -0,0 +1,19 @@
+.inspector-cards {
+ @apply pt-5 pb-4 px-4 md:px-5 border-b dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start divide-y sm:divide-y-0 sm:divide-x dark:divide-gray-600;
+
+ &__item {
+ @apply w-full sm:w-1/4 pb-5 sm:pb-0 sm:px-10;
+ }
+
+ &__item-name {
+ @apply text-muted font-bold text-2xs mb-1 uppercase;
+ }
+
+ &__item-value {
+ @apply text-xs sm:text-sm;
+ }
+
+ &__item-label {
+ @apply px-3 py-1 text-white rounded text-2xs font-bold;
+ }
+}
diff --git a/resources/scss/components/html-preview.scss b/resources/scss/components/html-preview.scss
@@ -0,0 +1,19 @@
+.html-preview {
+ @apply flex flex-col items-center h-full;
+
+ &__wrap {
+ @apply flex justify-center mb-5;
+ }
+
+ &__btn {
+ @apply p-1 rounded;
+
+ &.active {
+ @apply bg-blue-50 text-blue-600;
+ }
+ }
+
+ &__btn-icon {
+ @apply w-10 h-6 fill-current;
+ }
+}
diff --git a/resources/scss/components/layouts/main-layout.scss b/resources/scss/components/layouts/main-layout.scss
@@ -1,11 +1,15 @@
 .main-layout {
  @apply flex h-screen items-stretch;
 
- &__sidebar {
+ &__sidebar-wrap {
  @apply w-10 md:w-14 lg:w-16 flex-none;
  }
 
  &__content {
  @apply flex flex-col h-full flex-1;
  }
+
+ &__sidebar {
+ @apply w-10 md:w-14 lg:w-16 fixed h-screen;
+ }
 }
diff --git a/resources/scss/components/tab.scss b/resources/scss/components/tab.scss
@@ -0,0 +1,17 @@
+.tab {
+ &__wrap {
+ @apply flex flex-col;
+ }
+
+ &__btn {
+ @apply px-4 py-2 font-bold text-sm;
+ }
+
+ &__thumb {
+ @apply h-1 rounded-t;
+
+ &.selected {
+ @apply bg-blue-500 dark:bg-blue-100;
+ }
+ }
+}