Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Update samples that use draggable regions to adapt to new CSS syntax …

…and default behavior.
  • Loading branch information...
commit 2c629c62258caecb0cc04adac0ccc2ca7f692783 1 parent 3205564
@jianli-chromium jianli-chromium authored
View
2  frameless-window/README.md
@@ -1,6 +1,6 @@
# Frameless window
-A sample application to showcase how you can use frame:'none' windows to allow total customization of the window's real state. At beginning, the window is open with no titlebar. As long as you check one of the titlebars, it is added to the appropriate position. Notice that the added titlebars are the only parts of the window that allows dragging. This is achieved through a special CSS property applied to what is NOT to be draggable (in this case, the whole content of the window, except the titlebars): `-webkit-widget-region: region(control rectangle);`
+A sample application to showcase how you can use frame:'none' windows to allow total customization of the window's real state. At beginning, the window is open with no titlebar. As long as you check one of the titlebars, it is added to the appropriate position. Notice that the added titlebars are the only parts of the window that allows dragging. This is achieved through a special CSS property applied to what is draggable or non-draggable (by default, the whole window is not draggable): `-webkit-app-region: drag|no-drag;`
## APIs
View
10 frameless-window/style.css
@@ -38,6 +38,7 @@ div#inner-content {
width: 100%;
height: 32px;
background-color: #7a7c7c;
+ -webkit-app-region: drag;
}
.bottom-titlebar {
@@ -47,6 +48,7 @@ div#inner-content {
width: 100%;
height: 32px;
background-color: #7a7c7c;
+ -webkit-app-region: drag;
}
.left-titlebar {
@@ -56,6 +58,7 @@ div#inner-content {
width: 32px;
height: 100%;
background-color: #7a7c7c;
+ -webkit-app-region: drag;
}
.right-titlebar {
@@ -65,6 +68,7 @@ div#inner-content {
width: 32px;
height: 100%;
background-color: #7a7c7c;
+ -webkit-app-region: drag;
}
.top-titlebar-icon,
@@ -135,7 +139,7 @@ div#inner-content {
height: 17px;
margin-top: 6px;
margin-bottom: 6px;
- -webkit-widget-region: region(control rectangle);
+ -webkit-app-region: no-drag;
}
.left-titlebar-close-button {
@@ -145,7 +149,7 @@ div#inner-content {
height: 17px;
margin-left: 6px;
margin-right: 6px;
- -webkit-widget-region: region(control rectangle);
+ -webkit-app-region: no-drag;
}
.right-titlebar-close-button {
@@ -155,7 +159,7 @@ div#inner-content {
height: 17px;
margin-left: 6px;
margin-right: 6px;
- -webkit-widget-region: region(control rectangle);
+ -webkit-app-region: no-drag;
}
.top-titlebar-divider {
View
2  frameless-window/titlebar.js
@@ -112,7 +112,7 @@ function updateContentStyle() {
width -= titlebar.offsetWidth;
}
- var contentStyle = "position: absolute; -webkit-widget-region: region(control rectangle); ";
+ var contentStyle = "position: absolute; ";
contentStyle += "left: " + left + "px; ";
contentStyle += "top: " + top + "px; ";
contentStyle += "width: " + width + "px; ";
View
3  mdns-browser/header.css
@@ -12,6 +12,7 @@ header {
z-index: 100;
font-family: Arial, Helvetica, Sans-Serif;
border-radius: 2px;
+ -webkit-app-region: drag;
}
header li,
@@ -36,7 +37,7 @@ header input[type="text"] {
header button,
header input[type="text"] {
- -webkit-widget-region: region(control rectangle);
+ -webkit-app-region: no-drag;
}
header .small {
View
3  mdns-browser/main.css
@@ -4,6 +4,7 @@ body {
background: rgba(102, 102, 119, 0.85);
background: white;
width: 100%;
+ -webkit-app-region: drag;
}
div#main {
@@ -14,7 +15,7 @@ div#main {
overflow-y: scroll;
color: white;
color: black;
- -webkit-widget-region: region(control rectangle);
+ -webkit-app-region: no-drag;
}
ul#results {
View
16 weather/style.css
@@ -15,18 +15,23 @@ body {
text-align: center;
height: 450px;
width: 300px;
+ -webkit-app-region: drag;
+}
+
+a {
+ -webkit-app-region: no-drag;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
border: 1px solid #fff;
- -webkit-widget-region: region(control rectangle);
+ -webkit-app-region: no-drag;
}
::-webkit-scrollbar-thumb {
background: #eee;
- -webkit-widget-region: region(control rectangle);
+ -webkit-app-region: no-drag;
}
@@ -40,7 +45,7 @@ body {
width: 17px;
height: 17px;
cursor: pointer;
- -webkit-widget-region: region(control rectangle);
+ -webkit-app-region: no-drag;
visibility: hidden;
}
@@ -72,6 +77,7 @@ body:hover .close {
transition: all 0.218s;
-webkit-transition: all 0.218s;
white-space: nowrap;
+ -webkit-app-region: no-drag;
}
.button:hover {
@@ -129,6 +135,7 @@ input[type=radio] {
box-sizing: border-box;
cursor: default;
position: relative;
+ -webkit-app-region: no-drag;
}
input[type=checkbox]:active,
@@ -197,7 +204,7 @@ input[type=text] {
vertical-align: middle;
margin-bottom: 15px;
width: 270px;
- -webkit-widget-region: region(control rectangle);
+ -webkit-app-region: no-drag;
}
input[type=text]:hover {
@@ -282,6 +289,7 @@ input[type=text].form-error{
position: absolute;
right: 0px;
width: 20px;
+ -webkit-app-region: no-drag;
}
#weather {
View
2  webgl/styles/main.css
@@ -15,7 +15,7 @@ body {
width: 17px;
height: 17px;
cursor: pointer;
- -webkit-widget-region: region(control rectangle);
+ -webkit-app-region: no-drag;
}
.close:hover {
Please sign in to comment.
Something went wrong with that request. Please try again.