avo 4.0.0.beta.3 → 4.0.0.beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +1 -1
  3. data/app/assets/builds/avo/application.css +111 -23
  4. data/app/assets/builds/avo/application.js +166 -166
  5. data/app/assets/builds/avo/application.js.map +4 -4
  6. data/app/assets/stylesheets/application.css +1 -0
  7. data/app/assets/stylesheets/css/components/button.css +5 -0
  8. data/app/assets/stylesheets/css/components/hotkey.css +50 -0
  9. data/app/assets/stylesheets/css/components/input.css +0 -6
  10. data/app/assets/stylesheets/css/layout.css +3 -4
  11. data/app/assets/stylesheets/css/typography.css +18 -1
  12. data/app/components/avo/base_component.rb +38 -0
  13. data/app/components/avo/button_component.rb +1 -0
  14. data/app/components/avo/keyboard_shortcuts_component.html.erb +29 -0
  15. data/app/components/avo/keyboard_shortcuts_component.rb +127 -0
  16. data/app/components/avo/modal_component.html.erb +38 -14
  17. data/app/components/avo/modal_component.rb +10 -0
  18. data/app/components/avo/resource_component.rb +12 -5
  19. data/app/components/avo/sidebar/link_component.html.erb +13 -5
  20. data/app/components/avo/sidebar/link_component.rb +17 -0
  21. data/app/components/avo/sidebar_component.html.erb +2 -2
  22. data/app/components/avo/u_i/search_input_component.html.erb +2 -2
  23. data/app/javascript/application.js +12 -28
  24. data/app/javascript/js/controllers/base_modal_controller.js +65 -0
  25. data/app/javascript/js/controllers/confirm_dialog_controller.js +18 -0
  26. data/app/javascript/js/controllers/modal_controller.js +18 -26
  27. data/app/javascript/js/controllers/persistent_modal_controller.js +50 -0
  28. data/app/javascript/js/controllers/search_controller.js +0 -4
  29. data/app/javascript/js/controllers/sidebar_controller.js +22 -0
  30. data/app/javascript/js/controllers.js +4 -0
  31. data/app/javascript/js/global_hotkeys.js +77 -0
  32. data/app/javascript/js/helpers/toggle_hidden.js +7 -0
  33. data/app/views/avo/actions/show.html.erb +1 -1
  34. data/app/views/avo/partials/_confirm_dialog.html.erb +3 -3
  35. data/app/views/layouts/avo/application.html.erb +1 -0
  36. data/lib/avo/resources/base.rb +1 -0
  37. data/lib/avo/version.rb +1 -1
  38. metadata +9 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: '009224ece686ff1bd1b3b4b3593336dd98759b01a1b76173d2197c7e8566a6cd'
4
- data.tar.gz: ddef3ecbe7b8f39bcf24a473438f24fbe226a0c0993727619e255b469846df9a
3
+ metadata.gz: 78097e52553f1c4b182f2542a08a85379f1fb97804598c84e6efb48fc24ccc30
4
+ data.tar.gz: f372148210d4b8ac86b22117ab5222e67c449649d0f5e0045c504a8902ae3e40
5
5
  SHA512:
6
- metadata.gz: 75f3e4a99a0400e57363b33f8623cc5ce33e433494badfbcb3a3441f4a68ecefc3348fe1157350e7c3c9654ca05694386c4473778bed496434e7628b814ba15e
7
- data.tar.gz: f2bbd10861ba6211d9bbf54c7b8efec2462240392952e00d05c1a03d6f2af92ed549125b7008307ccab8149f006b74889a3160366c191330954fbdd20de607f0
6
+ metadata.gz: 68fac9ebc6f6c49005b06f106e566308ad593d25232a56d36a2f54042dc877f6ed07e37e0da3d9fd33a5bbddd21d2220960fe24b3a0b97cc1042d13dc99e5eee
7
+ data.tar.gz: 5314103f75eef43decd2326a4cb1a1fab7fc7833a6a9ba000bafd117504af078d4d72a7356083ccfe7217a6d5501b0b906e07abf612222c0685ea2401adaf8c7
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- avo (4.0.0.beta.3)
4
+ avo (4.0.0.beta.5)
5
5
  actionview (>= 6.1)
6
6
  active_link_to
7
7
  activerecord (>= 6.1)
@@ -7647,13 +7647,34 @@
7647
7647
  font-size: var(--text-lg);
7648
7648
  line-height: var(--tw-leading, var(--text-lg--line-height));
7649
7649
  }
7650
+ kbd {
7651
+ display: inline-flex;
7652
+ min-width: calc(var(--spacing) * 5);
7653
+ align-items: center;
7654
+ justify-content: center;
7655
+ border-radius: var(--radius-sm);
7656
+ border-style: var(--tw-border-style);
7657
+ border-width: 1px;
7658
+ border-color: var(--color-secondary);
7659
+ background-color: var(--color-secondary);
7660
+ padding-inline: calc(var(--spacing) * 1);
7661
+ font-size: var(--text-xs);
7662
+ line-height: var(--tw-leading, var(--text-xs--line-height));
7663
+ --tw-font-weight: var(--font-weight-semibold);
7664
+ font-weight: var(--font-weight-semibold);
7665
+ color: var(--color-content-secondary);
7666
+ box-shadow: var(--box-shadow-search-input-shortcut);
7667
+ }
7668
+ kbd.kbd--called {
7669
+ opacity: 0.4;
7670
+ }
7650
7671
  @layer base {
7651
7672
  a {
7652
7673
  color: var(--color-info-content);
7653
7674
  &:active, &:hover {
7654
- color: color-mix(in srgb, oklch(54.6% 0.245 262.881), oklch(20.46% 0.0000 89.88) 30%);
7675
+ color: color-mix( in oklab, oklch(54.6% 0.245 262.881), oklch(20.46% 0.0000 89.88) 30% );
7655
7676
  @supports (color: color-mix(in lab, red, red)) {
7656
- color: color-mix(in oklab, var(--color-info-content), var(--color-content) 30%);
7677
+ color: color-mix( in oklab, var(--color-info-content), var(--color-content) 30% );
7657
7678
  }
7658
7679
  }
7659
7680
  &:focus-visible {
@@ -8480,10 +8501,10 @@
8480
8501
  .sidebar-toggle-icon--closed {
8481
8502
  display: none;
8482
8503
  }
8483
- button[data-sidebar-state='closed'] .sidebar-toggle-icon--open {
8504
+ button[data-sidebar-state="closed"] .sidebar-toggle-icon--open {
8484
8505
  display: none;
8485
8506
  }
8486
- button[data-sidebar-state='closed'] .sidebar-toggle-icon--closed {
8507
+ button[data-sidebar-state="closed"] .sidebar-toggle-icon--closed {
8487
8508
  display: inline-flex;
8488
8509
  }
8489
8510
  .avo-sidebar {
@@ -11531,25 +11552,6 @@
11531
11552
  color: var(--color-content-secondary);
11532
11553
  padding-inline-end: var(--input-icon-offset);
11533
11554
  }
11534
- .search-input__shortcut {
11535
- display: flex;
11536
- min-width: calc(var(--spacing) * 5);
11537
- align-items: center;
11538
- justify-content: center;
11539
- border-radius: var(--radius-sm);
11540
- border-style: var(--tw-border-style);
11541
- border-width: 1px;
11542
- border-color: var(--color-secondary);
11543
- background-color: var(--color-secondary);
11544
- padding-inline: calc(var(--spacing) * 1);
11545
- padding-block: 1px;
11546
- font-size: var(--text-xs);
11547
- line-height: var(--tw-leading, var(--text-xs--line-height));
11548
- --tw-font-weight: var(--font-weight-semibold);
11549
- font-weight: var(--font-weight-semibold);
11550
- line-height: var(--input-leading);
11551
- box-shadow: var(--box-shadow-search-input-shortcut);
11552
- }
11553
11555
  input[type="range"] {
11554
11556
  accent-color: var(--color-accent);
11555
11557
  }
@@ -12076,6 +12078,9 @@
12076
12078
  --btn-color-accent-content: var(--color-rose-600);
12077
12079
  --btn-color-accent-foreground: var(--color-white);
12078
12080
  }
12081
+ &>span >kbd {
12082
+ margin-block: calc(var(--spacing) * -1);
12083
+ }
12079
12084
  }
12080
12085
  .dark {
12081
12086
  .button--style-primary {
@@ -12915,6 +12920,89 @@
12915
12920
  background-color: var(--color-secondary);
12916
12921
  padding-inline: calc(var(--spacing) * 0.5);
12917
12922
  }
12923
+ .hotkey__grid {
12924
+ padding: calc(var(--spacing) * 6);
12925
+ columns: 1;
12926
+ column-gap: 2rem;
12927
+ @media (min-width: 40rem) {
12928
+ columns: 2;
12929
+ }
12930
+ }
12931
+ .hotkey__section {
12932
+ margin-bottom: calc(var(--spacing) * 10);
12933
+ min-width: calc(var(--spacing) * 0);
12934
+ break-inside: avoid;
12935
+ }
12936
+ .hotkey__section-title {
12937
+ margin-bottom: calc(var(--spacing) * 4);
12938
+ font-size: var(--text-xs);
12939
+ line-height: var(--tw-leading, var(--text-xs--line-height));
12940
+ --tw-font-weight: var(--font-weight-bold);
12941
+ font-weight: var(--font-weight-bold);
12942
+ --tw-tracking: var(--tracking-wide);
12943
+ letter-spacing: var(--tracking-wide);
12944
+ color: var(--color-content-secondary);
12945
+ text-transform: uppercase;
12946
+ }
12947
+ .hotkey__section-body {
12948
+ margin: calc(var(--spacing) * 0);
12949
+ display: flex;
12950
+ width: 100%;
12951
+ list-style-type: none;
12952
+ flex-direction: column;
12953
+ gap: calc(var(--spacing) * 2);
12954
+ padding: calc(var(--spacing) * 0);
12955
+ }
12956
+ .hotkey__row {
12957
+ display: flex;
12958
+ width: 100%;
12959
+ align-items: flex-start;
12960
+ justify-content: space-between;
12961
+ gap: calc(var(--spacing) * 4);
12962
+ border-bottom-style: var(--tw-border-style);
12963
+ border-bottom-width: 1px;
12964
+ border-color: var(--color-tertiary);
12965
+ --tw-leading: calc(var(--spacing) * 6);
12966
+ line-height: calc(var(--spacing) * 6);
12967
+ &:last-child {
12968
+ border-bottom-style: var(--tw-border-style);
12969
+ border-bottom-width: 0px;
12970
+ }
12971
+ }
12972
+ .hotkey__action {
12973
+ font-size: var(--text-sm);
12974
+ line-height: var(--tw-leading, var(--text-sm--line-height));
12975
+ }
12976
+ .hotkey__keys {
12977
+ display: flex;
12978
+ flex-shrink: 0;
12979
+ flex-wrap: wrap;
12980
+ align-items: center;
12981
+ justify-content: flex-end;
12982
+ column-gap: calc(var(--spacing) * 1.5);
12983
+ row-gap: calc(var(--spacing) * 1.5);
12984
+ padding-top: calc(var(--spacing) * 0.5);
12985
+ }
12986
+ .hotkey__or {
12987
+ padding-inline: calc(var(--spacing) * 1);
12988
+ font-size: var(--text-base);
12989
+ line-height: var(--tw-leading, var(--text-base--line-height));
12990
+ --tw-leading: calc(var(--spacing) * 6);
12991
+ line-height: calc(var(--spacing) * 6);
12992
+ --tw-font-weight: var(--font-weight-medium);
12993
+ font-weight: var(--font-weight-medium);
12994
+ color: var(--color-content-secondary);
12995
+ }
12996
+ .hotkey__combo {
12997
+ display: inline-flex;
12998
+ align-items: center;
12999
+ gap: calc(var(--spacing) * 1.5);
13000
+ }
13001
+ .hotkey__key-separator {
13002
+ --tw-font-weight: var(--font-weight-medium);
13003
+ font-weight: var(--font-weight-medium);
13004
+ color: var(--color-content-secondary);
13005
+ }
12918
13006
  .tippy-box[data-theme~='basic'] {
12919
13007
  border-radius: var(--radius-md);
12920
13008
  border-style: var(--tw-border-style);