summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorKarolina Sofia Bang <karolina.bang@qt.io>2023-12-12 13:50:53 +0100
committerQt Cherry-pick Bot <cherrypick_bot@qt-project.org>2023-12-18 01:08:33 +0000
commitfeaaab365c35b2984b12bc53bc65ba702f47edfe (patch)
tree24e5b89910487c44f77f5cd5da7c8939dc9f4fb4
parent699399f1f6112c6713acd652781d6ed5fd41a65f (diff)
Redesign printMe example
Fixes: QTBUG-119732 Change-Id: Ia034b8a1566cd2858ccfe1313d73b503b10d752b Reviewed-by: Michal Klocek <michal.klocek@qt.io> (cherry picked from commit 996a87802f6c65c5dd2ad294978be67323bb30d5) Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org> (cherry picked from commit 30f2d5ccfcdd00af27364520cbe9b28d3db6c7a9)
Diffstat
-rw-r--r--examples/webenginewidgets/printme/CMakeLists.txt1
-rw-r--r--examples/webenginewidgets/printme/data/data.qrc1
-rw-r--r--examples/webenginewidgets/printme/data/icon.svg24
-rw-r--r--examples/webenginewidgets/printme/data/index.html2
-rw-r--r--examples/webenginewidgets/printme/data/style.css104
-rw-r--r--examples/webenginewidgets/printme/doc/images/printme-example.pngbin42074 -> 29055 bytes
6 files changed, 54 insertions, 78 deletions
diff --git a/examples/webenginewidgets/printme/CMakeLists.txt b/examples/webenginewidgets/printme/CMakeLists.txt
index 013ba48ca..368d79bfe 100644
--- a/examples/webenginewidgets/printme/CMakeLists.txt
+++ b/examples/webenginewidgets/printme/CMakeLists.txt
@@ -33,7 +33,6 @@ target_link_libraries(printme PUBLIC
# Resources:
set(data_resource_files
- "data/icon.svg"
"data/index.html"
"data/style.css"
)
diff --git a/examples/webenginewidgets/printme/data/data.qrc b/examples/webenginewidgets/printme/data/data.qrc
index a9c76cc7e..b5e0b1fe0 100644
--- a/examples/webenginewidgets/printme/data/data.qrc
+++ b/examples/webenginewidgets/printme/data/data.qrc
@@ -2,6 +2,5 @@
<qresource prefix="/">
<file>index.html</file>
<file>style.css</file>
- <file>icon.svg</file>
</qresource>
</RCC>
diff --git a/examples/webenginewidgets/printme/data/icon.svg b/examples/webenginewidgets/printme/data/icon.svg
deleted file mode 100644
index b90ff26dd..000000000
--- a/examples/webenginewidgets/printme/data/icon.svg
+++ /dev/null
@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- width="94px" height="94px" viewBox="0 0 94 94" enable-background="new 0 0 94 94" xml:space="preserve">
-<g>
- <circle fill="none" cx="47" cy="47" r="47"/>
- <g>
- <path fill="#46A2DA" d="M47,92.979c-11.779,0-23.559-4.484-32.526-13.451C-3.461,61.591-3.461,32.409,14.472,14.474
- C32.41-3.463,61.592-3.461,79.526,14.473c17.935,17.936,17.935,47.119,0.002,65.054l-0.002,0.001
- C70.559,88.495,58.779,92.979,47,92.979z"/>
- </g>
- <path fill="#80C342" d="M93,47C93,21.595,72.405,1,47,1C34.297,1,22.797,6.149,14.473,14.473l65.054,65.054
- C87.851,71.203,93,59.703,93,47z"/>
- <g>
- <path fill="#46A2DA" d="M47,65c-4.808,0-9.328-1.873-12.728-5.272c-7.018-7.019-7.018-18.438,0-25.456
- C37.672,30.873,42.192,29,47,29s9.328,1.873,12.728,5.272c7.018,7.019,7.018,18.438,0,25.456C56.328,63.127,51.808,65,47,65z"/>
- <path fill="#FFFFFF" d="M62.248,59.919c6.671-7.858,6.312-19.644-1.105-27.061C57.237,28.953,52.118,27,47,27
- c-5.118,0-10.237,1.953-14.142,5.858c-7.81,7.81-7.81,20.474,0,28.284C36.763,65.047,41.882,67,47,67
- c4.379,0,8.752-1.441,12.372-4.3L77.88,81.209c0.989-0.895,1.935-1.837,2.843-2.814L62.248,59.919z M35.686,58.314
- c-6.238-6.238-6.238-16.389,0-22.627C38.708,32.664,42.726,31,47,31c4.274,0,8.292,1.664,11.314,4.686
- c6.238,6.238,6.238,16.389,0,22.627C55.292,61.336,51.274,63,47,63C42.726,63,38.708,61.336,35.686,58.314z"/>
- </g>
-</g>
-</svg>
diff --git a/examples/webenginewidgets/printme/data/index.html b/examples/webenginewidgets/printme/data/index.html
index cf286e85a..865152c1d 100644
--- a/examples/webenginewidgets/printme/data/index.html
+++ b/examples/webenginewidgets/printme/data/index.html
@@ -12,13 +12,13 @@
</head>
<body>
<form class="form">
- <img class="logo" src="icon.svg" alt="qtwebengine">
<div class="header">
<h1>Hello Paper World!</h1>
<h2>Press Ctrl+p to print with print preview</h2>
<h2>Press Ctrl+Shift+p to print without print preview</h2>
<h2>Click the button to print using JavaScript</h2>
<p class="button" onclick="printNow()">Print Now</p>
+ </div>
</form>
</body>
</html>
diff --git a/examples/webenginewidgets/printme/data/style.css b/examples/webenginewidgets/printme/data/style.css
index cf6a2b7bf..af8b70fda 100644
--- a/examples/webenginewidgets/printme/data/style.css
+++ b/examples/webenginewidgets/printme/data/style.css
@@ -1,72 +1,74 @@
+@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
+
html,body {
- height:100%;
- width:100%;
- margin:0;
+ height: 100%;
+ width: 100%;
}
+
body {
- display:flex;
-}
- .logo {
- width: 75px;
- height: 75px;
- float: left;
- margin: 20px 20px 0px 20px;
- -webkit-animation:spin 8s linear infinite;
-}
- @-webkit-keyframes spin {
- 100% {
- -webkit-transform: rotate(360deg);
- }
+ display: flex;
}
+
.header {
display: inline
}
+
.form {
- width: 480px;
- height: 170px;
- background: -webkit-linear-gradient(bottom, #ddd, #fff);
- border: 1px solid #999;
- border-radius: 12px;
+ width: 50%;
+ background: #fff;
+ border: 0.5px solid #999;
+ border-radius: 8px;
color: #46a;
- font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
- font-size: 14px;
- font-style: italic;
- font-weight: bold;
+ font-family: 'Titillium Web', sans-serif;
+ font-size: 1rem;
margin: auto;
- padding: 10px;
+ padding: 1.5rem;
position: relative;
- line-height: 26px;
text-decoration: none;
- -webkit-box-shadow: 0px 0px 5px #444;
}
- h1 {
- padding-left:40px;
- color: #46a2da;
+
+h1 {
+ color: #00414A;
+ font-size: 2.5rem;
+ font-weight: 700;
+ margin-top: -0.85rem;
+ margin-bottom: 2rem;
}
- h2 {
- color: #80c342;
- font-size: 13px;
- margin-top: -20px;
-}
- span {
- margin-left: 20px;
+
+h2 {
+ color: #00414A;
+ font-size: 1.125rem;
+ font-weight: 400;
+ font-style: italic;
+ margin-bottom: 1rem;
}
+
.button{
- display: inline-block;
- background: #46a2da;
- width: 100px;
- height: 30px;
- padding: 0px;
- text-align: center;
- font-weight: bold;
- color: #ffffff;
- text-decoration: none;
- border: 1px solid #999;
- margin-left: 190px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.4444em 0.8889em;
+ height: 2.4em;
+ cursor: pointer;
+ background: #00414A;
+ color: #fff;
+ border-radius: 4px;
+ margin-top: 2rem;
+ font-family: 'Titillium Web', sans-serif;
+ font-size: 1.125rem;
+ font-weight: 400;
+ transition: color 300ms ease-out, border 300ms ease-out;
}
+
.button:hover {
- background-color: #46a200
+ background: #19545C;
}
+
.button:active {
- background-color: #3e8e41;
+ background-color: #19545C;
}
diff --git a/examples/webenginewidgets/printme/doc/images/printme-example.png b/examples/webenginewidgets/printme/doc/images/printme-example.png
index a636972fd..dac4e61e6 100644
--- a/examples/webenginewidgets/printme/doc/images/printme-example.png
+++ b/examples/webenginewidgets/printme/doc/images/printme-example.png
Binary files differ
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-08 06:30:27 +0000