diff options
Diffstat (limited to 'examples/webenginewidgets/spellchecker')
-rw-r--r-- | examples/webenginewidgets/spellchecker/CMakeLists.txt | 1 | ||||
-rw-r--r-- | examples/webenginewidgets/spellchecker/data/icon.svg | 24 | ||||
-rw-r--r-- | examples/webenginewidgets/spellchecker/data/index.html | 47 | ||||
-rw-r--r-- | examples/webenginewidgets/spellchecker/data/spellchecker.qrc | 1 | ||||
-rw-r--r-- | examples/webenginewidgets/spellchecker/data/style.css | 145 | ||||
-rw-r--r-- | examples/webenginewidgets/spellchecker/doc/images/spellchecker-example.png | bin | 15978 -> 28507 bytes | |||
-rw-r--r-- | examples/webenginewidgets/spellchecker/doc/src/spellchecker.qdoc | 1 | ||||
-rw-r--r-- | examples/webenginewidgets/spellchecker/main.cpp | 2 |
8 files changed, 113 insertions, 108 deletions
diff --git a/examples/webenginewidgets/spellchecker/CMakeLists.txt b/examples/webenginewidgets/spellchecker/CMakeLists.txt index 0ed993add..3a5ea08ca 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 Binary files differindex cc4e74946..1cbe9e6d3 100644 --- a/examples/webenginewidgets/spellchecker/doc/images/spellchecker-example.png +++ b/examples/webenginewidgets/spellchecker/doc/images/spellchecker-example.png diff --git a/examples/webenginewidgets/spellchecker/doc/src/spellchecker.qdoc b/examples/webenginewidgets/spellchecker/doc/src/spellchecker.qdoc index 85b1b950c..1d9d7b73c 100644 --- a/examples/webenginewidgets/spellchecker/doc/src/spellchecker.qdoc +++ b/examples/webenginewidgets/spellchecker/doc/src/spellchecker.qdoc @@ -6,6 +6,7 @@ \title WebEngine Widgets Spellchecker Example \ingroup webengine-widgetexamples \brief Integrates a spellchecker into a simple HTML form. + \examplecategory {Web Technologies} \image spellchecker-example.png 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(); |