- Revision
- 256807
- Author
- [email protected]
- Date
- 2020-02-17 19:04:58 -0800 (Mon, 17 Feb 2020)
Log Message
[Webkit.css] Adding popover style element
This help to prevent us reinventing the wheel ever again
https://bugs.webkit.org/show_bug.cgi?id=207787
Reviewed by Dean Jackson.
* resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml:
* resultsdbpy/resultsdbpy/view/static/library/css/index.html:
* resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:
(.popover):
(.popover>.content):
(.popover.display):
(.popover .arrow):
(.popover .arrow.point-top):
(.popover .arrow.point-bottom):
(.popover .arrow.point-left):
(.popover .arrow.point-right):
(@media (prefers-color-scheme: dark) .popover>.content):
(@media (prefers-color-scheme: dark) .popover.display):
(@media (prefers-color-scheme: dark) .popover .arrow):
(.popover>.content>.section): Deleted.
(.popover:focus>.content, .popover:hover>.content): Deleted.
(.popover.right>.content): Deleted.
(.popover.right :focus>.content, .popover.right:hover>.content): Deleted.
(.popover.left>.content): Deleted.
(.popover.left :focus>.content, .popover.left:hover>.content): Deleted.
(.popover.bottom>.content): Deleted.
(.popover.bottom :focus>.content, .popover.bottom:hover>.content): Deleted.
Modified Paths
Diff
Modified: trunk/Tools/ChangeLog (256806 => 256807)
--- trunk/Tools/ChangeLog 2020-02-18 02:51:26 UTC (rev 256806)
+++ trunk/Tools/ChangeLog 2020-02-18 03:04:58 UTC (rev 256807)
@@ -1,3 +1,34 @@
+2020-02-17 Zhifei Fang <[email protected]>
+
+ [Webkit.css] Adding popover style element
+ This help to prevent us reinventing the wheel ever again
+ https://bugs.webkit.org/show_bug.cgi?id=207787
+
+ Reviewed by Dean Jackson.
+
+ * resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml:
+ * resultsdbpy/resultsdbpy/view/static/library/css/index.html:
+ * resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:
+ (.popover):
+ (.popover>.content):
+ (.popover.display):
+ (.popover .arrow):
+ (.popover .arrow.point-top):
+ (.popover .arrow.point-bottom):
+ (.popover .arrow.point-left):
+ (.popover .arrow.point-right):
+ (@media (prefers-color-scheme: dark) .popover>.content):
+ (@media (prefers-color-scheme: dark) .popover.display):
+ (@media (prefers-color-scheme: dark) .popover .arrow):
+ (.popover>.content>.section): Deleted.
+ (.popover:focus>.content, .popover:hover>.content): Deleted.
+ (.popover.right>.content): Deleted.
+ (.popover.right :focus>.content, .popover.right:hover>.content): Deleted.
+ (.popover.left>.content): Deleted.
+ (.popover.left :focus>.content, .popover.left:hover>.content): Deleted.
+ (.popover.bottom>.content): Deleted.
+ (.popover.bottom :focus>.content, .popover.bottom:hover>.content): Deleted.
+
2020-02-17 Brent Fulgham <[email protected]>
Update WebKit Tools to issue mach extensions as needed
Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml (256806 => 256807)
--- trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml 2020-02-18 02:51:26 UTC (rev 256806)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml 2020-02-18 03:04:58 UTC (rev 256807)
@@ -1463,3 +1463,50 @@
<div class="label">Tests have error</div>
</div>
</div>
+ -
+ title: Popover
+ examples:
+ -
+ description: ~
+ html: |-
+ <div class="popover display">
+ <div class="arrow point-top" style="left: 106px;">
+ </div>
+ <div class="content" style="width:200px">
+ This is popover;
+ </div>
+ </div>
+ <div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </div>
+ <!-- You can control the arrow pos by seting the left or top -->
+ <div class="popover display">
+ <div class="arrow point-bottom" style="left: 106px;">
+ </div>
+ <div class="content" style="width:200px">
+ This is a popover
+ </div>
+ </div>
+ <div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </div>
+ <div class="popover display">
+ <div class="arrow point-left" style="top: 31px;">
+ </div>
+ <div class="content" style="height:50px">
+ This is a popover
+ </div>
+ </div>
+ <div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </div>
+ <div class="popover display">
+ <div class="arrow point-right" style="top: 31px;">
+ </div>
+ <div class="content" style="height:50px">
+ This is a popover
+ </div>
+ </div>
+ <div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </div>
Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html (256806 => 256807)
--- trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html 2020-02-18 02:51:26 UTC (rev 256806)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html 2020-02-18 03:04:58 UTC (rev 256807)
@@ -200,6 +200,12 @@
</div>
+
+ <div class="item sub">
+ <a href=""
+ </div>
+
+
</div>
</div>
<div class="divider"></div>
@@ -3241,6 +3247,103 @@
</div>
+
+ <div class="header" id="Elements-Popover">
+ <div class="title">
+ <h2>Popover</h2>
+ </div>
+ </div>
+
+
+
+ <div class="content">
+ <pre><xmp><div class="popover display">
+ <div class="arrow point-top" style="left: 106px;">
+ </div>
+ <div class="content" style="width:200px">
+ This is popover;
+ </div>
+</div>
+<div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</div>
+<!-- You can control the arrow pos by seting the left or top -->
+<div class="popover display">
+ <div class="arrow point-bottom" style="left: 106px;">
+ </div>
+ <div class="content" style="width:200px">
+ This is a popover
+ </div>
+</div>
+<div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</div>
+<div class="popover display">
+ <div class="arrow point-left" style="top: 31px;">
+ </div>
+ <div class="content" style="height:50px">
+ This is a popover
+ </div>
+</div>
+<div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</div>
+<div class="popover display">
+ <div class="arrow point-right" style="top: 31px;">
+ </div>
+ <div class="content" style="height:50px">
+ This is a popover
+ </div>
+</div>
+<div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</div></xmp></pre>
+ </div>
+ <div class="content">
+ <div class="popover display">
+ <div class="arrow point-top" style="left: 106px;">
+ </div>
+ <div class="content" style="width:200px">
+ This is popover;
+ </div>
+</div>
+<div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</div>
+<!-- You can control the arrow pos by seting the left or top -->
+<div class="popover display">
+ <div class="arrow point-bottom" style="left: 106px;">
+ </div>
+ <div class="content" style="width:200px">
+ This is a popover
+ </div>
+</div>
+<div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</div>
+<div class="popover display">
+ <div class="arrow point-left" style="top: 31px;">
+ </div>
+ <div class="content" style="height:50px">
+ This is a popover
+ </div>
+</div>
+<div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</div>
+<div class="popover display">
+ <div class="arrow point-right" style="top: 31px;">
+ </div>
+ <div class="content" style="height:50px">
+ This is a popover
+ </div>
+</div>
+<div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</div>
+ </div>
+
+
</div>
<div class="placeholder"></div>
Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css (256806 => 256807)
--- trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css 2020-02-18 02:51:26 UTC (rev 256806)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css 2020-02-18 03:04:58 UTC (rev 256807)
@@ -1440,58 +1440,66 @@
/*popover*/
.popover {
- display: inline-block;
- position: relative;
+ position: absolute;
+ display: none;
}
-.popover>.content>.section {
- margin: 8px;
- background: var(--white);
+.popover>.content{
+ max-width: 200px;
+ padding: var(--tinySize);
+ font-size: var(--tinySize);
+ background-color: var(--blurBackgroundColor);
+ -webkit-backdrop-filter: blur(5px) brightness(100%);
+ backdrop-filter: blur(5px) brightness(100%);
}
-.popover:focus>.content, .popover:hover>.content {
+.popover.display {
+ box-shadow: 0px 0px 5px 1px var(--grey);
display: block;
- opacity: 1;
- transform: translate(-50%, -100%) scale(1);
}
-.popover>.content {
- left: 50%;
- top: 0;
- opacity: 0;
+.popover .arrow {
position: absolute;
- transform: translate(-50%,-50%) scale(0);
- transition: transform .2s;
- z-index: 300;
- margin: 0;
- padding: 0;
+ width: var(--tinySize);
+ height: var(--tinySize);
+ content: '';
+ box-shadow: 0px 0px 5px 1px var(--black);
+ transform: rotate(45deg);
+ background-color: var(--blurBackgroundColor);
+ -webkit-backdrop-filter: blur(5px) brightness(100%);
+ backdrop-filter: blur(5px) brightness(100%);
}
-.popover.right>.content {
- left: 100%;
- top: 50%;
-}
-.popover.right :focus>.content, .popover.right:hover>.content {
- transform: translate(0, -50%) scale(1);
+.popover .arrow.point-top {
+ top: calc(0px - var(--tinySize) / 2);
}
-.popover.left>.content {
- left: 0;
- top: 50%;
+.popover .arrow.point-bottom {
+ bottom: calc(0px - var(--tinySize) / 2);
}
-.popover.left :focus>.content, .popover.left:hover>.content {
- transform: translate(-100%, -50%) scale(1);
+.popover .arrow.point-left {
+ left: calc(0px - var(--tinySize) / 2);
}
-.popover.bottom>.content {
- left: 350%;
- top: 100%;
+.popover .arrow.point-right {
+ right: calc(0px - var(--tinySize) / 2);
}
-.popover.bottom :focus>.content, .popover.bottom:hover>.content {
- transform: translate(-50%, 0) scale(1);
+
+@media (prefers-color-scheme: dark) {
+ .popover>.content {
+ background-color: var(--blurBackgroundColorDark);
+ }
+
+ .popover.display {
+ box-shadow: 0px 0px 5px 1px var(--black);
+ }
+
+ .popover .arrow {
+ background-color: var(--blurBackgroundColorDark);
+ }
}
