[epiphany] overview: Move the overview CSS to about.css and generate the HTML from the code
- From: Carlos Garcia Campos <carlosgc src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [epiphany] overview: Move the overview CSS to about.css and generate the HTML from the code
- Date: Mon, 3 Aug 2015 08:53:20 +0000 (UTC)
commit f8b2b4e0e050fe8ff04a6ea1d6260a6527822033
Author: Carlos Garcia Campos <cgarcia igalia com>
Date: Fri Jul 31 12:10:57 2015 +0200
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
embed/ephy-about-handler.c | 66 +++++++---
embed/web-extension/ephy-web-overview.c | 18 ++--
src/Makefile.am | 1 -
src/epiphany.gresource.xml | 1 -
src/resources/about.css | 134 ++++++++++++++++++++
src/resources/overview.html | 204 -------------------------------
6 files changed, 188 insertions(+), 236 deletions(-)
---
diff --git a/embed/ephy-about-handler.c b/embed/ephy-about-handler.c
index e70bce3..f658c3c 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\">✖</div>"
- " <span class=\"thumbnail\"%s></span>"
- " <span class=\"title\">%s</span>"
+ " <div class=\"overview-close-button\"
onclick=\"removeFromOverview(this.parentNode, event)\" title=\"%s\">✖</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 2bfa124..c1a4ebd 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 342e3b0..5b21ca7 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 0c743cd..89975b5 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 ee978e0..a4f5e87 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;
+}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
