-
-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(plugin): add example for new Custom Tooltip plugin (#663)
- new Custom Tooltip, it could be defined in any Column Definition(s) or globally in the Grid Options or a mixed of both.
- Loading branch information
1 parent
68a7cff
commit c61e3b0
Showing
9 changed files
with
896 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,3 +13,5 @@ coverage: | |
| patch: | ||
| default: | ||
| threshold: 5% | ||
| github_checks: | ||
| annotations: false | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <template> | ||
| <h2> | ||
| ${title} | ||
| <span class="float-end"> | ||
| <a style="font-size: 18px" | ||
| target="_blank" | ||
| href="https://github.com/ghiscoding/aurelia-slickgrid/blob/master/src/examples/slickgrid/example33.ts"> | ||
| <span class="fa fa-link"></span> code | ||
| </a> | ||
| </span> | ||
| </h2> | ||
| <div class="subtitle" innerhtml.bind="subTitle"></div> | ||
|
|
||
| <div style="margin-bottom: 20px;"> | ||
| <label for="pinned-rows">Simulated Server Delay (ms): </label> | ||
| <input type="number" id="server-delay" data-test="server-delay" style="width: 60px" value.bind="serverApiDelay"> | ||
| </div> | ||
|
|
||
| <aurelia-slickgrid grid-id="grid33" | ||
| column-definitions.bind="columnDefinitions" | ||
| grid-options.bind="gridOptions" | ||
| dataset.bind="dataset" | ||
| instances.bind="aureliaGrid" | ||
| on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)"> | ||
| </aurelia-slickgrid> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss'; | ||
|
|
||
| // -- | ||
| // Custom Tooltips CSS Variables (or SASS equivalent) | ||
| // ---------------------------------------------------- | ||
| // :root { | ||
| // --slick-tooltip-background-color: #363636; | ||
| // --slick-tooltip-border-color: #252525; | ||
| // --slick-tooltip-border: 2px solid #252525; | ||
| // --slick-tooltip-color: #ffffff; | ||
|
|
||
| // --slick-tooltip-arrow-color: var(--slick-tooltip-border-color); | ||
| // --slick-tooltip-arrow-size: 10px; | ||
| // --slick-tooltip-arrow-side-margin: 15px; | ||
| // } | ||
|
|
||
| .header-tooltip-title { | ||
| font-weight: bold; | ||
| font-size: 14px; | ||
| } | ||
| .headerrow-tooltip-title { | ||
| color: #AD0041; | ||
| font-style: italic; | ||
| font-size: 13px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| // it's preferable to use CSS Variables (or SASS) but if you want to change colors of your tooltip for 1 column in particular you can do it this way | ||
| // e.g. change css of 5th column 4 (zero index: l4) | ||
| .l4 .header-tooltip-title, | ||
| .l4 .headerrow-tooltip-title { | ||
| color: #ffffff; | ||
| } | ||
| .l4.slick-custom-tooltip { | ||
| color: #ffffff; | ||
| background-color: #363636; | ||
| border: 2px solid #252525; | ||
| } | ||
| .l4.slick-custom-tooltip.arrow-down::after, | ||
| .l4.slick-custom-tooltip.arrow-up::after { | ||
| border-width: 10px; // arrow size | ||
| } | ||
| .l4.slick-custom-tooltip.arrow-down::after { | ||
| border-top-color: #252525; // arrow down color | ||
| } | ||
| .l4.slick-custom-tooltip.arrow-up::after { | ||
| top: -20px; // arrow size * 2 | ||
| border-bottom-color: #252525; // arrow up color | ||
| } | ||
| .l4.slick-custom-tooltip.arrow-left-align::after { | ||
| margin-left: 15px; | ||
| } | ||
| .l4.slick-custom-tooltip.arrow-right-align::after { | ||
| margin-left: calc(100% - 20px - 15px); // 20px is (arrow size * 2), 15px is your extra side margin | ||
| } | ||
| .l6.slick-custom-tooltip.arrow-left-align::after { | ||
| margin-left: 4px; | ||
| } |
Oops, something went wrong.