summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorKarolina Sofia Bang <karolina.bang@qt.io>2023-12-05 13:28:37 +0100
committerQt Cherry-pick Bot <cherrypick_bot@qt-project.org>2023-12-21 02:56:12 +0000
commitb009e9b51eab36494bdadbacae0bf1484bc43e86 (patch)
treed65fc1b53bc70157a618a1496676928f0e9d153f
parentcebe50498b26c2677337f97ebf0548c025c64be6 (diff)
Redesign spellchecker example
Fixes: QTBUG-119732 Change-Id: Ibfdc2989cea704a05fa5f6ed038c2b08498285e7 Reviewed-by: Michal Klocek <michal.klocek@qt.io> (cherry picked from commit 42193e1ee934dabbe5f653c016756f08e3d99c81) Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org> (cherry picked from commit 0fcc4e584662742cf6a797ca0c9b7d475aa75eaf)
Diffstat
-rw-r--r--examples/webenginewidgets/spellchecker/CMakeLists.txt1
-rw-r--r--examples/webenginewidgets/spellchecker/data/icon.svg24
-rw-r--r--examples/webenginewidgets/spellchecker/data/index.html47
-rw-r--r--examples/webenginewidgets/spellchecker/data/spellchecker.qrc1
-rw-r--r--examples/webenginewidgets/spellchecker/data/style.css145
-rw-r--r--examples/webenginewidgets/spellchecker/doc/images/spellchecker-example.pngbin15978 -> 28507 bytes
-rw-r--r--examples/webenginewidgets/spellchecker/main.cpp2
7 files changed, 112 insertions, 108 deletions
diff --git a/examples/webenginewidgets/spellchecker/CMakeLists.txt b/examples/webenginewidgets/spellchecker/CMakeLists.txt
index 74cb626e1..6e6277d8e 100644
--- a/examples/webenginewidgets/spellchecker/CMakeLists.txt
+++ b/examples/webenginewidgets/spellchecker/CMakeLists.txt
@@ -32,7 +32,6 @@ target_link_libraries(spellchecker PUBLIC
# Resources:
set(spellchecker_resource_files
- "data/icon.svg"
"data/index.html"
"data/style.css"
)
diff --git a/examples/webenginewidgets/spellchecker/data/icon.svg b/examples/webenginewidgets/spellchecker/data/icon.svg
deleted file mode 100644
index b90ff26dd..000000000
--- a/examples/webenginewidgets/spellchecker/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/spellchecker/data/index.html b/examples/webenginewidgets/spellchecker/data/index.html
index b6cec5fe0..f68d64bc4 100644
--- a/examples/webenginewidgets/spellchecker/data/index.html
+++ b/examples/webenginewidgets/spellchecker/data/index.html
@@ -6,28 +6,29 @@
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
- <form class="form">
- <img class="logo" src="icon.svg" alt="qtwebengine">
- <div class="header">
- <h1>Contact us</h1>
- <h2>We are here to help</h2>
- </div>
- <label>
- <span>First Name:</span><input id="firstname" type="text" name="name" />
- </label>
- <label>
- <span>Last Name:</span><input id="lastName" type="text" name="name" />
- </label>
- <label>
- <span>Email Address:</span><input id="email" type="text" name="email" />
- </label>
- <label>
- <span>Subject:</span><input id="subject" type="text" name="subject" />
- </label>
- <label>
- <span>Message:</span><textarea id="feedback" name="feedback"></textarea>
- </label>
- <input type="submit" value="Send" />
- </form>
+ <main>
+ <form class="form">
+ <div class="header">
+ <h1>Contact us</h1>
+ <h2>We are here to help</h2>
+ </div>
+ <label>
+ <span>First Name</span><input id="firstname" type="text" name="name" />
+ </label>
+ <label>
+ <span>Last Name</span><input id="lastName" type="text" name="name" />
+ </label>
+ <label>
+ <span>Email</span><input id="email" type="text" name="email" />
+ </label>
+ <label>
+ <span>Subject</span><input id="subject" type="text" name="subject" />
+ </label>
+ <label>
+ <span>Message</span><textarea id="feedback" name="feedback"></textarea>
+ </label>
+ <input type="submit" value="Send" />
+ </form>
+ </main>
</body>
</html>
diff --git a/examples/webenginewidgets/spellchecker/data/spellchecker.qrc b/examples/webenginewidgets/spellchecker/data/spellchecker.qrc
index a9c76cc7e..b5e0b1fe0 100644
--- a/examples/webenginewidgets/spellchecker/data/spellchecker.qrc
+++ b/examples/webenginewidgets/spellchecker/data/spellchecker.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/spellchecker/data/style.css b/examples/webenginewidgets/spellchecker/data/style.css
index 7b6736f1f..38873c5a0 100644
--- a/examples/webenginewidgets/spellchecker/data/style.css
+++ b/examples/webenginewidgets/spellchecker/data/style.css
@@ -1,90 +1,119 @@
-.logo {
- width: 50px;
- height: 50px;
- float: left;
- margin: 20px 20px 0px 20px;
- -webkit-animation:spin 8s linear infinite;
+@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;
+}
+
+
+body {
+ width: 100%;
+ padding: 0px;
+ margin: 0px;
}
-@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
.header {
- display: inline
+ display: inline;
+}
+
+.main {
+ max-width: 100%;
}
.form {
- width: 450px;
- height: 600px;
- background: -webkit-linear-gradient(bottom, #ddd, #fff);
- border: 1px solid #999;
- border-radius: 12px;
- color: #46a;
- font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
- font-size: 14px;
- font-style: italic;
- font-weight: bold;
- margin: auto;
- padding: 10px;
- position: relative;
- line-height: 26px;
- text-decoration: none;
- -webkit-box-shadow: 0px 0px 5px #444;
+ width: 100%;
+ height: 100%;
+ background: #fff;
+ border: 0px solid #999;
+ border-radius: 8px;
+ color: #46a;
+ font-family: 'Titillium Web', sans-serif;
+ font-size: 1rem;
+ margin: auto;
+ padding: 40px;
+ position: relative;
+ line-height: 26px;
+ text-decoration: none;
}
h1 {
- padding-left:40px;
- color: #46a2da;
+ padding-left: 20px;
+ color: #00414A;
+ font-size: 2.5rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
}
h2 {
- color: #80c342;
- font-size: 13px;
- margin-top: -20px;
+ padding-left: 20px;
+ color: #00414A;
+ font-size: 1.125rem;
+ font-weight: 400;
+ font-style: italic;
+ margin-bottom: 1.75rem;
}
span {
- margin-left: 20px;
+ font-size: 1.5rem;
+ margin-left: 20px;
+ color: #00414A;
+ font-weight: 700;
}
input {
- width: 400px;
- display: block;
- border: 1px solid #999;
- height: 25px;
- margin-left: 20px;
- margin-bottom: 10px;
- padding-left: 10px;
- -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+ width: 90%;
+ display: block;
+ height: 2.25rem;
+ margin-left: 20px;
+ margin-right: 20px;
+ margin-bottom: 8px;
+ padding-left: 10px;
+ box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
+ border-radius: var(--radius-radius-minimal, 0.25rem);
+ border: 1px solid var(--color-background-normal, #CCC);
+ background: var(--color-text-input-background, #FFF);
}
textarea {
- width: 400px;
- max-width: 400px;
- height: 180px;
- max-height: 400px;
- display: block;
- margin-left: 20px;
- padding-left: 10px;
- padding-right: 10px;
- -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+ width: 90%;
+ max-width: 90%;
+ height: 10rem;
+ max-height: 14rem;
+ display: block;
+ margin-left: 20px;
+ margin-right: 20px;
+ padding-left: 10px;
+ padding-top: 10px;
+ box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
+ border-radius: var(--radius-radius-minimal, 0.25rem);
+ border: 1px solid var(--color-background-normal, #CCC);
+ background: var(--color-text-input-background, #FFF);
}
input:focus, textarea:focus {
- outline:none;
- border: 1px solid #46a2da;
+ outline: none;
+ border: 1px solid #00414A;
}
input[type=submit] {
- width: 100px;
- left: 170px;
- bottom: 10px;
- background: #46a2da;
- color: #fff;
- height: 30px;
- position: absolute;
- border-radius: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center; /* Add this to horizontally center the content */
+ padding: 0.4444em 0.8889em;
+ height: 2.4em;
+ cursor: pointer;
+ width: 6.5rem;
+ background: #00414A;
+ color: #fff;
+ border-radius: 4px;
+ margin-top: 28px;
+ font-family: 'Titillium Web', sans-serif;
+ font-size: 1.125rem;
+ font-weight: 400;
+ transition: color 300ms ease-out, border 300ms ease-out;
}
input[type=submit]:hover {
- background: #80c342;
+ background: #19545C;
}
diff --git a/examples/webenginewidgets/spellchecker/doc/images/spellchecker-example.png b/examples/webenginewidgets/spellchecker/doc/images/spellchecker-example.png
index cc4e74946..1cbe9e6d3 100644
--- a/examples/webenginewidgets/spellchecker/doc/images/spellchecker-example.png
+++ b/examples/webenginewidgets/spellchecker/doc/images/spellchecker-example.png
Binary files differ
diff --git a/examples/webenginewidgets/spellchecker/main.cpp b/examples/webenginewidgets/spellchecker/main.cpp
index 63cccb6ea..55e06a874 100644
--- a/examples/webenginewidgets/spellchecker/main.cpp
+++ b/examples/webenginewidgets/spellchecker/main.cpp
@@ -11,7 +11,7 @@ int main(int argc, char *argv[])
WebView view;
view.setUrl(QUrl(QStringLiteral("qrc:/index.html")));
- view.resize(500, 640);
+ view.resize(500, 750);
view.show();
return app.exec();
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-08 03:36:17 +0000