summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCarlos Garcia Campos <cgarcia@igalia.com>2015-07-31 12:10:57 +0200
committerCarlos Garcia Campos <carlosgc@gnome.org>2015-08-03 10:53:05 +0200
commitf8b2b4e0e050fe8ff04a6ea1d6260a6527822033 (patch)
treea414f217e75347e0008439d4e5600b0a786d7ea9
parent75d044a556533ab58cd1f895c4aaba29ac5acc8e (diff)
downloadepiphany-f8b2b4e0e050fe8ff04a6ea1d6260a6527822033.tar.gz
overview: Move the overview CSS to about.css and generate the HTML from the code
This way we get rid of the overview.html template resource. All the overview specific classes and ids have been renamed to overview-name, since the CSS is now in the common abbout.css resource. This fixes the problems of using a printf template and makes the generation fo the overview consistent with all other about handlers. https://bugzilla.gnome.org/show_bug.cgi?id=751385
Diffstat
-rw-r--r--embed/ephy-about-handler.c66
-rw-r--r--embed/web-extension/ephy-web-overview.c18
-rw-r--r--src/Makefile.am1
-rw-r--r--src/epiphany.gresource.xml1
-rw-r--r--src/resources/about.css134
-rwxr-xr-xsrc/resources/overview.html204
6 files changed, 188 insertions, 236 deletions
diff --git a/embed/ephy-about-handler.c b/embed/ephy-about-handler.c
index e70bce3f8..f658c3c27 100644
--- a/embed/ephy-about-handler.c
+++ b/embed/ephy-about-handler.c
@@ -433,14 +433,47 @@ history_service_query_urls_cb (EphyHistoryService *history,
WebKitURISchemeRequest *request)
{
GString *data_str;
- GBytes *html_file;
- GString *html = g_string_new ("");
gsize data_length;
char *lang;
GList *l;
data_str = g_string_new (NULL);
+ lang = g_strdup (pango_language_to_string (gtk_get_default_language ()));
+ g_strdelimit (lang, "_-@", '\0');
+
+ g_string_append_printf (data_str,
+ "<html xml:lang=\"%s\" lang=\"%s\" dir=\"%s\">\n"
+ "<head>\n"
+ " <title>%s</title>\n"
+ " <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n"
+ " <link href=\""EPHY_PAGE_TEMPLATE_ABOUT_CSS"\" rel=\"stylesheet\" type=\"text/css\">\n"
+ " <script>\n"
+ " document.onkeypress = function listenKeypress(event) {\n"
+ " // Remove from overview when Del is pressed\n"
+ " if (event.which == 127) {\n"
+ " var focused = document.activeElement;\n"
+ " if (focused.className == \"overview-item\") {\n"
+ " removeFromOverview(focused, event);\n"
+ " }\n"
+ " }\n"
+ " }\n"
+ " function removeFromOverview(elem, event) {\n"
+ " var listItemNode = elem.parentElement;\n"
+ " event.preventDefault();\n"
+ " listItemNode.className +=\" overview-removed \";\n"
+ " window.webkit.messageHandlers.overview.postMessage(elem.href);\n"
+ " }\n"
+ " </script>\n"
+ "</head>\n"
+ "<body>\n"
+ " <div id=\"overview\">\n"
+ " <div id=\"overview-grid\">\n"
+ " <ul id=\"overview-item-list\">\n", lang, lang,
+ ((gtk_widget_get_default_direction () == GTK_TEXT_DIR_RTL) ? "rtl" : "ltr"),
+ _("Most Visited"));
+ g_free (lang);
+
if (success) {
EphySnapshotService *snapshot_service = ephy_snapshot_service_get_default ();
@@ -466,9 +499,9 @@ history_service_query_urls_cb (EphyHistoryService *history,
g_string_append_printf (data_str,
"<li>"
" <a class=\"overview-item\" title=\"%s\" href=\"%s\">"
- " <div class=\"close-button\" onclick=\"removeFromOverview(this.parentNode,event)\" title=\"%s\">&#10006;</div>"
- " <span class=\"thumbnail\"%s></span>"
- " <span class=\"title\">%s</span>"
+ " <div class=\"overview-close-button\" onclick=\"removeFromOverview(this.parentNode, event)\" title=\"%s\">&#10006;</div>"
+ " <span class=\"overview-thumbnail\"%s></span>"
+ " <span class=\"overview-title\">%s</span>"
" </a>"
"</li>",
g_markup_escape_text (url->title, -1), url->url, _("Remove from overview"),
@@ -477,25 +510,16 @@ history_service_query_urls_cb (EphyHistoryService *history,
}
}
- html_file = g_resources_lookup_data (EPHY_PAGE_TEMPLATE_OVERVIEW, 0, NULL);
+ data_str = g_string_append (data_str,
+ " </ul>\n"
+ " </div>\n"
+ " </div>\n"
+ "</body></html>\n");
- lang = g_strdup (pango_language_to_string (gtk_get_default_language ()));
- g_strdelimit (lang, "_-@", '\0');
- g_string_printf (html,
- g_bytes_get_data (html_file, NULL),
- lang, lang,
- ((gtk_widget_get_default_direction () == GTK_TEXT_DIR_RTL) ? "rtl" : "ltr"),
- _("Most Visited"),
- data_str->str);
-
- data_length = html->len;
- ephy_about_handler_finish_request (request, g_string_free (html, FALSE), data_length);
+ data_length = data_str->len;
+ ephy_about_handler_finish_request (request, g_string_free (data_str, FALSE), data_length);
g_object_unref (request);
-
- g_string_free (data_str,TRUE);
- g_bytes_unref (html_file);
- g_free (lang);
}
static gboolean
diff --git a/embed/web-extension/ephy-web-overview.c b/embed/web-extension/ephy-web-overview.c
index 2bfa12444..c1a4ebd3c 100644
--- a/embed/web-extension/ephy-web-overview.c
+++ b/embed/web-extension/ephy-web-overview.c
@@ -78,9 +78,9 @@ overview_item_new (WebKitDOMElement *anchor)
char *class;
class = webkit_dom_element_get_class_name (element);
- if (g_strcmp0 (class, "thumbnail") == 0)
+ if (g_strcmp0 (class, "overview-thumbnail") == 0)
item->thumbnail = g_object_ref (element);
- else if (g_strcmp0 (class, "title") == 0)
+ else if (g_strcmp0 (class, "overview-title") == 0)
item->title = g_object_ref (element);
g_free (class);
@@ -142,8 +142,8 @@ ephy_web_overview_model_urls_changed (EphyWebOverviewModel *model,
item->url = g_strdup (url->url);
class_list = webkit_dom_element_get_class_list (webkit_dom_node_get_parent_element (WEBKIT_DOM_NODE (item->anchor)));
- if (class_list && webkit_dom_dom_token_list_contains (class_list, "removed", NULL))
- webkit_dom_dom_token_list_remove (class_list, "removed", NULL);
+ if (class_list && webkit_dom_dom_token_list_contains (class_list, "overview-removed", NULL))
+ webkit_dom_dom_token_list_remove (class_list, "overview-removed", NULL);
webkit_dom_element_set_attribute (item->anchor, "href", url->url, NULL);
webkit_dom_element_set_attribute (item->anchor, "title", url->title, NULL);
@@ -167,7 +167,7 @@ ephy_web_overview_model_urls_changed (EphyWebOverviewModel *model,
item->url = g_strdup (url->url);
document = webkit_web_page_get_dom_document (overview->priv->web_page);
- item_list = webkit_dom_document_get_element_by_id (document, "item-list");
+ item_list = webkit_dom_document_get_element_by_id (document, "overview-item-list");
new_node = WEBKIT_DOM_NODE (webkit_dom_document_create_element (document, "LI", NULL));
webkit_dom_node_append_child (WEBKIT_DOM_NODE (item_list), WEBKIT_DOM_NODE (new_node), NULL);
@@ -180,22 +180,22 @@ ephy_web_overview_model_urls_changed (EphyWebOverviewModel *model,
webkit_dom_node_append_child (WEBKIT_DOM_NODE (new_node), WEBKIT_DOM_NODE (anchor), NULL);
new_node = WEBKIT_DOM_NODE (webkit_dom_document_create_element (document, "DIV", NULL));
- webkit_dom_element_set_class_name (WEBKIT_DOM_ELEMENT (new_node), "close-button");
- webkit_dom_element_set_attribute (WEBKIT_DOM_ELEMENT (new_node), "onclick", "removeFromOverview(this.parentNode,event)", NULL);
+ webkit_dom_element_set_class_name (WEBKIT_DOM_ELEMENT (new_node), "overview-close-button");
+ webkit_dom_element_set_attribute (WEBKIT_DOM_ELEMENT (new_node), "onclick", "removeFromOverview(this.parentNode, event)", NULL);
webkit_dom_element_set_attribute (WEBKIT_DOM_ELEMENT (new_node), "title", url->title, NULL);
webkit_dom_node_set_text_content (new_node, "✖", NULL);
webkit_dom_node_append_child (WEBKIT_DOM_NODE (anchor), new_node, NULL);
new_node = WEBKIT_DOM_NODE (webkit_dom_document_create_element (document, "SPAN", NULL));
item->thumbnail = g_object_ref (new_node);
- webkit_dom_element_set_class_name (WEBKIT_DOM_ELEMENT (new_node), "thumbnail");
+ webkit_dom_element_set_class_name (WEBKIT_DOM_ELEMENT (new_node), "overview-thumbnail");
if (thumbnail_path)
update_thumbnail_element_style (WEBKIT_DOM_ELEMENT (new_node), thumbnail_path);
webkit_dom_node_append_child (WEBKIT_DOM_NODE (anchor), new_node, NULL);
new_node = WEBKIT_DOM_NODE (webkit_dom_document_create_element (document, "SPAN", NULL));
item->title = g_object_ref (new_node);
- webkit_dom_element_set_class_name (WEBKIT_DOM_ELEMENT (new_node), "title");
+ webkit_dom_element_set_class_name (WEBKIT_DOM_ELEMENT (new_node), "overview-title");
webkit_dom_node_set_text_content (new_node, url->title, NULL);
webkit_dom_node_append_child (WEBKIT_DOM_NODE (anchor), new_node, NULL);
diff --git a/src/Makefile.am b/src/Makefile.am
index 342e3b0e6..5b21ca7b8 100644
--- a/src/Makefile.am
+++ b/src/Makefile.am
@@ -115,7 +115,6 @@ RESOURCE_FILES = \
resources/history-dialog.ui \
resources/incognito.png \
resources/missing-thumbnail.png \
- resources/overview.html \
resources/passwords-dialog.ui \
resources/prefs-dialog.ui \
resources/prefs-lang-dialog.ui \
diff --git a/src/epiphany.gresource.xml b/src/epiphany.gresource.xml
index 0c743cdbf..89975b5bf 100644
--- a/src/epiphany.gresource.xml
+++ b/src/epiphany.gresource.xml
@@ -14,7 +14,6 @@
<file preprocess="xml-stripblanks">epiphany-bookmark-editor-ui.xml</file>
<file>epiphany.css</file>
<file alias="page-templates/error.html" compressed="true">error.html</file>
- <file alias="page-templates/overview.html" compressed="true">overview.html</file>
<file>missing-thumbnail.png</file>
<file alias="page-templates/about.css" compressed="true">about.css</file>
</gresource>
diff --git a/src/resources/about.css b/src/resources/about.css
index ee978e08f..a4f5e8705 100644
--- a/src/resources/about.css
+++ b/src/resources/about.css
@@ -195,3 +195,137 @@ html.epiphany-html {
.incognito-body h1 {
color: #888a85;
}
+
+/* about:overview */
+#overview {
+ padding: 0 5px;
+ max-width: 1200px;
+ margin-left: auto;
+ margin-right: auto;
+ bottom: 0;
+ max-height: 540px;
+ margin: auto;
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+}
+
+#overview-grid {
+ /* Width for 5 thumbnails and their paddings */
+ max-width: 1060px;
+ margin-left: auto;
+ margin-right:auto;
+ padding: 0;
+}
+
+#overview-item-list {
+ padding: 0;
+}
+
+#overview-grid li {
+ list-style-type: none;
+ display: inline-block;
+ vertical-align:top;
+}
+
+.overview-item {
+ width: 180px;
+ height: 220px;
+ display: table-cell;
+ vertical-align: top;
+ overflow: hidden;
+ padding: 15px;
+ outline: 0;
+ position: relative;
+ transition: 0;
+ top: 0;
+ float: left;
+}
+
+.overview-title {
+ width: 180px;
+ height: 50px;
+ display: inline-block;
+ padding: 5px 0;
+ overflow: hidden;
+ font-family: Cantarell, sans-serif;
+ font-size: 11pt;
+ color: #2e3436;
+ text-overflow: ellipsis;
+ text-align: center;
+}
+
+.overview-thumbnail {
+ width: 180px;
+ height: 135px;
+ display: block;
+ border: 1px solid #ccc;
+ background: url(ephy-resource:///org/gnome/epiphany/missing-thumbnail.png) center no-repeat, linear-gradient(to bottom, #e8e8e8, #fff);
+ background-repeat: no-repeat;
+ position: relative;
+}
+
+.overview-thumbnail:hover,
+:focus .overview-thumbnail {
+ border: 1px solid #999;
+ box-shadow: 0 1px 1px rgba(0,0,0,0.3);
+}
+
+.overview-thumbnail:active {
+ border: 1px solid #999;
+ box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
+}
+
+.overview-close-button {
+ -webkit-transition: all 250ms;
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ opacity: 0;
+ z-index: 5;
+ color: #888;
+ font-family: sans-serif;
+ font-size: 14px;
+ width: 13px;
+ height: 14px;
+ color: #fff;
+ padding: 3px 3px 4px 4px;
+ text-shadow: 0 1px 0 rgba(0,0,0,.3);
+ background-color: rgba(80,80,80,.2);
+ border-radius: 50%;
+}
+
+.overview-close-button:hover {
+ background-color: rgba(0,0,0,.8);
+}
+
+.overview-close-button:active {
+ text-shadow: none;
+ background-color: #000;
+}
+
+.overview-item:hover .overview-close-button {
+ opacity: 1;
+}
+
+.overview-removed .overview-item {
+ transition: all 0.75s ease-in-out;
+ width: 0;
+ margin: 15px 0;
+ opacity: 0;
+ padding: 0;
+}
+
+.overview-removed .overview-close-button {
+ display: none;
+}
+
+html[dir="rtl"] .overview-close-button {
+ left: 20px;
+ right: inherit;
+}
+
+html[dir="rtl"] .overview-item {
+ float: right;
+}
diff --git a/src/resources/overview.html b/src/resources/overview.html
deleted file mode 100755
index bf6ccd134..000000000
--- a/src/resources/overview.html
+++ /dev/null
@@ -1,204 +0,0 @@
-<!DOCTYPE html>
-<!--
- This program is free software; you can redistribute it and/or modify
- it under the terms of the GNU General Public License as published by
- the Free Software Foundation; either version 2, or (at your option)
- any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License
- along with this program; if not, write to the Free Software
- Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
--->
-<html xml:lang="%s" lang="%s" dir="%s">
-<head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>%s</title>
- <style type="text/css">
- html {
- background-color: #f6f6f4;
- background-image: -webkit-gradient(
- linear,
- left top,
- left bottom,
- color-stop(0, #eeeeec),
- color-stop(1, #f6f6f4)
- );
- background-size: 100% 5em;
- background-repeat: no-repeat;
- }
-
- #overview {
- padding: 0 5px;
- max-width: 1200px;
- margin-left: auto;
- margin-right: auto;
- bottom: 0;
- max-height: 540px;
- margin: auto;
- position: absolute;
- top: 0;
- right: 0;
- left: 0;
- }
-
- #grid {
- /* Width for 5 thumbnails and their paddings */
- max-width: 1060px;
- margin-left: auto;
- margin-right:auto;
- padding: 0;
- }
-
- #item-list {
- padding: 0;
- }
-
- #grid li {
- list-style-type: none;
- display: inline-block;
- vertical-align:top;
- }
-
- .overview-item {
- width: 180px;
- height: 220px;
- display: table-cell;
- vertical-align: top;
- overflow: hidden;
- padding: 15px;
- outline: 0;
- position: relative;
- transition: 0;
- top: 0;
- float: left;
- }
-
- .title {
- width: 180px;
- height: 50px;
- display: inline-block;
- padding: 5px 0;
- overflow: hidden;
- font-family: Cantarell, sans-serif;
- font-size: 11pt;
- color: #2e3436;
- text-overflow: ellipsis;
- text-align: center;
- }
-
- .thumbnail {
- width: 180px;
- height: 135px;
- display: block;
- border: 1px solid #ccc;
- background: url(ephy-resource:///org/gnome/epiphany/missing-thumbnail.png) center no-repeat,
- linear-gradient(to bottom, #e8e8e8, #fff);
- background-repeat: no-repeat;
- position: relative;
- }
-
- .thumbnail:hover,
- :focus .thumbnail {
- border: 1px solid #999;
- box-shadow: 0 1px 1px rgba(0,0,0,0.3);
- }
-
- .thumbnail:active {
- border: 1px solid #999;
- box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
- }
-
- .close-button {
- -webkit-transition: all 250ms;
- position: absolute;
- top: 20px;
- right: 20px;
- opacity: 0;
- z-index: 5;
- color: #888;
- font-size: 14px;
- width: 14px;
- height: 14px;
- color: #fff;
- padding: 3px 3px 4px 4px;
- text-shadow: 0 1px 0 rgba(0,0,0,.3);
- background-color: rgba(80,80,80,.2);
- border-radius: 50%;
- }
- .close-button:hover {
- background-color: rgba(0,0,0,.8);
- }
- .close-button:active {
- text-shadow: none;
- background-color: #000;
- }
-
- .overview-item:hover .close-button {
- opacity: 1;
- }
-
- .removed .overview-item {
- transition: all 0.75s ease-in-out;
- width: 0;
- margin: 15px 0;
- opacity: 0;
- padding: 0;
- }
-
- .removed .close-button {
- display: none;
- }
-
- html[dir="rtl"] .close-button {
- left: 20px;
- right: inherit;
- }
-
- html[dir="rtl"] .overview-item {
- float: right;
- }
-
- </style>
-
- <script>
-
- document.onkeypress = listenKeypress;
-
- function listenKeypress(event) {
- // Remove from overview when Del is pressed
- if (event.which == 127) {
- var focused = document.activeElement;
- if (focused.className == "overview-item") {
- removeFromOverview(focused, event);
- }
- }
- }
-
- function removeFromOverview(elem, event) {
- var listItemNode = elem.parentElement;
- event.preventDefault();
- listItemNode.className +=" removed ";
- window.webkit.messageHandlers.overview.postMessage(elem.href);
- }
- </script>
-
-</head>
-
-<body>
-
- <div id="overview">
- <div id="grid">
- <ul id="item-list">
- %s
- </ul>
- </div>
- </div>
-
-</body>
-
-</html>
View Lorry Controller Status