You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Topbar.vue 2.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <template>
  2. <div class="layout__topbar">
  3. <div class="topbar__left">
  4. <div class="topbar__logo">
  5. {{ $dream.name }} {{ $dream.version }}
  6. </div>
  7. <div class="topbar__greetings">
  8. {{ greetings }}
  9. </div>
  10. </div>
  11. <div class="topbar__buttons">
  12. <button type="button" @click="minimize">
  13. <font-awesome-icon icon="minus" />
  14. </button>
  15. <button type="button" @click="maximize">
  16. <font-awesome-icon :icon="['far', 'square']" />
  17. </button>
  18. <button type="button" class="close" @click="close">
  19. <font-awesome-icon icon="times" />
  20. </button>
  21. </div>
  22. </div>
  23. </template>
  24. <script>
  25. import moment from 'moment'
  26. const { activeWindow, api } = $provider.util
  27. export default {
  28. computed: {
  29. greetings() {
  30. const hours = moment().hours()
  31. if (hours >= 6 && hours <= 11) {
  32. return '☕ Good morning'
  33. }
  34. if (hours >= 12 && hours <= 19) {
  35. return '🌞 Good afternoon'
  36. }
  37. if (hours >= 0 && hours <= 5) {
  38. return '🐏 Sweet dreams'
  39. }
  40. return '🌛 Good night'
  41. },
  42. },
  43. methods: {
  44. minimize() {
  45. activeWindow().minimize()
  46. },
  47. maximize() {
  48. activeWindow().maximize()
  49. },
  50. close() {
  51. api.app.quit()
  52. },
  53. },
  54. }
  55. </script>
  56. <style lang="scss" scoped>
  57. @keyframes bgAnim {
  58. 0% {
  59. background-position: 0% 0%;
  60. }
  61. 50% {
  62. background-position: 100% 0%;
  63. }
  64. 100% {
  65. background-position: 0% 0%;
  66. }
  67. }
  68. .layout__topbar {
  69. @apply flex bg-black text-white;
  70. height: 30px;
  71. z-index: 9999999;
  72. .topbar__left {
  73. @apply flex-1 flex;
  74. @apply text-sm;
  75. -webkit-app-region: drag;
  76. }
  77. .topbar__logo {
  78. @apply flex flex-col items-center justify-center;
  79. @apply font-bold px-4;
  80. background: rgb(99, 66, 245);
  81. background: linear-gradient(
  82. 40deg,
  83. rgba(99, 66, 245, 1) 0%,
  84. rgba(239, 125, 199, 1) 100%
  85. );
  86. background-size: 200% 100%;
  87. }
  88. .topbar__greetings {
  89. @apply flex flex-col items-center justify-center;
  90. @apply font-light px-4;
  91. }
  92. .topbar__buttons {
  93. @apply flex;
  94. button {
  95. @apply flex items-center justify-center outline-none;
  96. @apply text-xs;
  97. width: 50px;
  98. height: 30px;
  99. &:hover {
  100. @apply bg-gray-700;
  101. &.close {
  102. @apply bg-danger-500;
  103. }
  104. }
  105. }
  106. }
  107. }
  108. </style>