[epiphany/gnome-3-16] 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/gnome-3-16] overview: Move the overview CSS to about.css and generate the HTML from the code
- Date: Mon, 3 Aug 2015 08:53:58 +0000 (UTC)
commit 30470cbc4cf8bf501ef7c840b3a90caaacaad092
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 597fb8c..7da6d91 100644
--- a/src/Makefile.am
+++ b/src/Makefile.am
@@ -115,7 +115,6 @@ RESOURCE_FILES = \
resources/incognito-tinted.png \
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 55ee118..b446a62 100644
--- a/src/epiphany.gresource.xml
+++ b/src/epiphany.gresource.xml
@@ -15,7 +15,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 2594b58..bc99892 100644
--- a/src/resources/about.css
+++ b/src/resources/about.css
@@ -206,3 +206,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]
