Added support for lists in composer

This attempts to solve bug
[#714921](https://bugzilla.gnome.org/show_bug.cgi?id=714921).

They are available as two buttons on the format bar, next to font
options. The icons I used are taken from a free icons site just for demo
purposes and should be replaced by new icons. Also I did not include
hotkeys mainly because I could not come up with a good one, also they
are pretty uncommon I think.

Also added new icons to icons/CMakeLists.txt
This commit is contained in:
Nikolas Tapia 2017-12-06 17:04:18 -03:00 committed by Michael James Gratton
parent 473a0b8859
commit 63521d8566
7 changed files with 508 additions and 7 deletions

View file

@ -7,6 +7,8 @@ set(ICON_FILES
text-x-generic-symbolic.svg
edit-symbolic.svg
format-text-remove-symbolic.svg
format-ordered-list-symbolic.svg
format-unordered-list-symbolic.svg
mail-drafts-symbolic.svg
mail-drafts-symbolic-rtl.svg
mail-forward-symbolic.svg

View file

@ -0,0 +1,208 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="format-ordered-list-symbolic.svg"
inkscape:export-filename="/home/sam/dev/RESOURCES/gnome-icon-theme-symbolic/src/gnome-stencils.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90"
height="16"
id="svg7384"
version="1.1"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"
width="16">
<metadata
id="metadata90">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>Gnome Symbolic Icon Theme</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
inkscape:bbox-nodes="true"
inkscape:bbox-paths="true"
bordercolor="#666666"
borderopacity="1"
inkscape:current-layer="layer12"
inkscape:cx="12.475663"
inkscape:cy="5.4387395"
gridtolerance="10"
inkscape:guide-bbox="true"
guidetolerance="10"
id="namedview88"
inkscape:object-nodes="true"
inkscape:object-paths="false"
objecttolerance="10"
pagecolor="#3a3b39"
inkscape:pageopacity="1"
inkscape:pageshadow="2"
showborder="false"
showgrid="true"
showguides="true"
inkscape:snap-bbox="true"
inkscape:snap-bbox-midpoints="false"
inkscape:snap-global="true"
inkscape:snap-grids="true"
inkscape:snap-nodes="false"
inkscape:snap-others="false"
inkscape:snap-to-guides="true"
inkscape:window-height="704"
inkscape:window-maximized="1"
inkscape:window-width="1366"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:zoom="22.627417">
<inkscape:grid
dotted="false"
empspacing="2"
enabled="true"
id="grid4866"
originx="199.9998"
originy="650"
snapvisiblegridlinesonly="true"
spacingx="1"
spacingy="1"
type="xygrid"
visible="true" />
</sodipodi:namedview>
<title
id="title9167">Gnome Symbolic Icon Theme</title>
<defs
id="defs7386">
<linearGradient
gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)"
id="linearGradient19282"
osb:paint="solid">
<stop
id="stop19284"
offset="0"
style="stop-color:#666666;stop-opacity:1;" />
</linearGradient>
</defs>
<g
inkscape:groupmode="layer"
id="layer9"
inkscape:label="status"
style="display:inline"
transform="translate(-41.000401,-867)" />
<g
inkscape:groupmode="layer"
id="layer10"
inkscape:label="devices"
style="display:inline"
transform="translate(-41.000401,-867)" />
<g
inkscape:groupmode="layer"
id="layer11"
inkscape:label="apps"
transform="translate(-41.000401,-867)" />
<g
inkscape:groupmode="layer"
id="layer13"
inkscape:label="places"
style="display:inline"
transform="translate(-41.000401,-867)" />
<g
inkscape:groupmode="layer"
id="layer14"
inkscape:label="mimetypes"
transform="translate(-41.000401,-867)" />
<g
inkscape:groupmode="layer"
id="layer15"
inkscape:label="emblems"
style="display:inline"
transform="translate(-41.000401,-867)" />
<g
inkscape:groupmode="layer"
id="g71291"
inkscape:label="emotes"
style="display:inline"
transform="translate(-41.000401,-867)" />
<g
inkscape:groupmode="layer"
id="g4953"
inkscape:label="categories"
style="display:inline"
transform="translate(-41.000401,-867)" />
<g
inkscape:groupmode="layer"
id="layer12"
inkscape:label="actions"
style="display:inline"
transform="translate(-41.000401,-867)">
<rect
height="2"
id="rect5356"
inkscape:label="a"
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:1;marker:none"
width="5.999999"
x="49.000202"
y="874" />
<rect
height="2"
id="rect5358"
inkscape:label="a"
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:1;marker:none"
width="5.999999"
x="49.000198"
y="878.98438" />
<rect
height="2"
id="rect5358-3"
inkscape:label="a"
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:1;marker:none"
width="5.999999"
x="49.000202"
y="869" />
<text
xml:space="preserve"
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;font-style:normal;font-weight:normal;font-size:2.73056865px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:0.06826421;marker:none"
x="39.827774"
y="968.95056"
id="text3813"
transform="scale(1.1111819,0.89994265)"><tspan
sodipodi:role="line"
id="tspan3811"
x="39.827774"
y="968.95056"
style="font-size:6.09691095px;stroke-width:0.06826421;fill:#bebebe;fill-opacity:1;">1</tspan></text>
<text
xml:space="preserve"
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;font-style:normal;font-weight:normal;font-size:2.73056865px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:0.06826421;marker:none"
x="40.603065"
y="961.72247"
id="text4622"
transform="scale(1.0966049,0.91190548)"><tspan
sodipodi:role="line"
id="tspan4620"
x="40.603065"
y="961.72247"
style="stroke-width:0.14775175;fill:#bebebe;fill-opacity:1;">2</tspan></text>
<text
xml:space="preserve"
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;font-style:normal;font-weight:normal;font-size:2.73056865px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:0.06826421;marker:none"
x="42.235889"
y="929.96796"
id="text4626"
transform="scale(1.0541771,0.9486072)"><tspan
sodipodi:role="line"
id="tspan4624"
x="42.235889"
y="929.96796"
style="stroke-width:0.14822583;fill:#bebebe;fill-opacity:1;">3</tspan></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.9 KiB

View file

@ -0,0 +1,199 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="format-unordered-list-symbolic.svg"
inkscape:export-filename="/home/sam/dev/RESOURCES/gnome-icon-theme-symbolic/src/gnome-stencils.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90"
height="16"
id="svg7384"
version="1.1"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"
width="16">
<metadata
id="metadata90">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>Gnome Symbolic Icon Theme</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
inkscape:bbox-nodes="true"
inkscape:bbox-paths="true"
bordercolor="#666666"
borderopacity="1"
inkscape:current-layer="layer12"
inkscape:cx="5.9862882"
inkscape:cy="6.3448378"
gridtolerance="10"
inkscape:guide-bbox="true"
guidetolerance="10"
id="namedview88"
inkscape:object-nodes="true"
inkscape:object-paths="false"
objecttolerance="10"
pagecolor="#3a3b39"
inkscape:pageopacity="1"
inkscape:pageshadow="2"
showborder="false"
showgrid="true"
showguides="true"
inkscape:snap-bbox="true"
inkscape:snap-bbox-midpoints="false"
inkscape:snap-global="true"
inkscape:snap-grids="true"
inkscape:snap-nodes="false"
inkscape:snap-others="false"
inkscape:snap-to-guides="true"
inkscape:window-height="704"
inkscape:window-maximized="1"
inkscape:window-width="1366"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:zoom="22.627417">
<inkscape:grid
dotted="false"
empspacing="2"
enabled="true"
id="grid4866"
originx="199.9998"
originy="650"
snapvisiblegridlinesonly="true"
spacingx="1"
spacingy="1"
type="xygrid"
visible="true" />
</sodipodi:namedview>
<title
id="title9167">Gnome Symbolic Icon Theme</title>
<defs
id="defs7386">
<linearGradient
gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)"
id="linearGradient19282"
osb:paint="solid">
<stop
id="stop19284"
offset="0"
style="stop-color:#666666;stop-opacity:1;" />
</linearGradient>
</defs>
<g
inkscape:groupmode="layer"
id="layer9"
inkscape:label="status"
style="display:inline"
transform="translate(-41.000401,-867)" />
<g
inkscape:groupmode="layer"
id="layer10"
inkscape:label="devices"
style="display:inline"
transform="translate(-41.000401,-867)" />
<g
inkscape:groupmode="layer"
id="layer11"
inkscape:label="apps"
transform="translate(-41.000401,-867)" />
<g
inkscape:groupmode="layer"
id="layer13"
inkscape:label="places"
style="display:inline"
transform="translate(-41.000401,-867)" />
<g
inkscape:groupmode="layer"
id="layer14"
inkscape:label="mimetypes"
transform="translate(-41.000401,-867)" />
<g
inkscape:groupmode="layer"
id="layer15"
inkscape:label="emblems"
style="display:inline"
transform="translate(-41.000401,-867)" />
<g
inkscape:groupmode="layer"
id="g71291"
inkscape:label="emotes"
style="display:inline"
transform="translate(-41.000401,-867)" />
<g
inkscape:groupmode="layer"
id="g4953"
inkscape:label="categories"
style="display:inline"
transform="translate(-41.000401,-867)" />
<g
inkscape:groupmode="layer"
id="layer12"
inkscape:label="actions"
style="display:inline"
transform="translate(-41.000401,-867)">
<rect
height="2"
id="rect5356"
inkscape:label="a"
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:new"
width="5.999999"
x="49.000202"
y="874" />
<rect
height="2"
id="rect5358"
inkscape:label="a"
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:new"
width="5.999999"
x="49.000198"
y="878.98438" />
<rect
height="4.0000033"
id="rect5398"
rx="0.38461545"
ry="0.3787879"
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:new"
width="4.0000014"
x="43.000202"
y="873" />
<rect
height="3.9791701"
id="rect5401"
rx="0.38461545"
ry="0.37878785"
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:new"
width="4.0000014"
x="43.000198"
y="878" />
<rect
height="2"
id="rect5358-3"
inkscape:label="a"
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:new"
width="5.999999"
x="49.000202"
y="869" />
<rect
height="3.9791701"
id="rect5401-6"
rx="0.38461545"
ry="0.37878785"
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:new"
width="4.0000014"
x="43.000202"
y="868.01562" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.2 KiB

View file

@ -376,6 +376,14 @@ public class ComposerWebView : ClientWebView {
this.call.begin(Geary.JS.callable("geary.indentLine"), null);
}
public void insert_olist() {
this.call.begin(Geary.JS.callable("geary.insertOrderedList"), null);
}
public void insert_ulist() {
this.call.begin(Geary.JS.callable("geary.insertUnorderedList"), null);
}
/**
* Updates the signature block if it has not been deleted.
*/

View file

@ -67,6 +67,8 @@ public class ComposerWidget : Gtk.EventBox {
private const string ACTION_REMOVE_FORMAT = "remove-format";
private const string ACTION_INDENT = "indent";
private const string ACTION_OUTDENT = "outdent";
private const string ACTION_OLIST = "olist";
private const string ACTION_ULIST = "ulist";
private const string ACTION_JUSTIFY = "justify";
private const string ACTION_COLOR = "color";
private const string ACTION_INSERT_IMAGE = "insert-image";
@ -88,7 +90,8 @@ public class ComposerWidget : Gtk.EventBox {
private const string[] html_actions = {
ACTION_BOLD, ACTION_ITALIC, ACTION_UNDERLINE, ACTION_STRIKETHROUGH,
ACTION_FONT_SIZE, ACTION_FONT_FAMILY, ACTION_COLOR, ACTION_JUSTIFY,
ACTION_INSERT_IMAGE, ACTION_COPY_LINK, ACTION_PASTE_WITH_FORMATTING
ACTION_INSERT_IMAGE, ACTION_COPY_LINK, ACTION_PASTE_WITH_FORMATTING,
ACTION_OLIST, ACTION_ULIST
};
private const ActionEntry[] action_entries = {
@ -109,6 +112,8 @@ public class ComposerWidget : Gtk.EventBox {
{ACTION_FONT_FAMILY, on_font_family, "s", "'sans'" },
{ACTION_REMOVE_FORMAT, on_remove_format, null, "false" },
{ACTION_INDENT, on_indent },
{ACTION_OLIST, on_olist },
{ACTION_ULIST, on_ulist },
{ACTION_OUTDENT, on_action },
{ACTION_JUSTIFY, on_justify, "s", "'left'" },
{ACTION_COLOR, on_select_color },
@ -310,6 +315,8 @@ public class ComposerWidget : Gtk.EventBox {
[GtkChild]
private Gtk.Box font_style_buttons;
[GtkChild]
private Gtk.Box list_buttons;
[GtkChild]
private Gtk.Button insert_link_button;
[GtkChild]
private Gtk.Button remove_format_button;
@ -1748,6 +1755,7 @@ public class ComposerWidget : Gtk.EventBox {
this.insert_buttons.visible = compose_as_html;
this.font_style_buttons.visible = compose_as_html;
this.list_buttons.visible = compose_as_html;
this.remove_format_button.visible = compose_as_html;
this.menu_button.menu_model = (compose_as_html) ? this.html_menu : this.plain_menu;
@ -1806,6 +1814,14 @@ public class ComposerWidget : Gtk.EventBox {
this.editor.indent_line();
}
private void on_olist(SimpleAction action, Variant? param) {
this.editor.insert_olist();
}
private void on_ulist(SimpleAction action, Variant? param) {
this.editor.insert_ulist();
}
private void on_mouse_target_changed(WebKit.WebView web_view,
WebKit.HitTestResult hit_test,
uint modifiers) {

View file

@ -212,6 +212,12 @@ ComposerPageState.prototype = {
element.setAttribute("type", "cite");
}
},
insertOrderedList: function() {
document.execCommand("insertOrderedList", false, null);
},
insertUnorderedList: function() {
document.execCommand("insertUnorderedList", false, null);
},
updateSignature: function(signature) {
if (this.signaturePart != null) {
console.log(signature);

View file

@ -506,6 +506,68 @@
<property name="position">1</property>
</packing>
</child>
<child>
<object class="GtkBox" id="list_buttons">
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<object class="GtkButton" id="olist_button">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="focus_on_click">False</property>
<property name="receives_default">False</property>
<property name="tooltip_text" translatable="yes">Insert ordered list</property>
<property name="action_name">cmp.olist</property>
<property name="always_show_image">True</property>
<child>
<object class="GtkImage" id="olist_image">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="pixel_size">16</property>
<property name="icon_name">format-ordered-list-symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkButton" id="ulist_button">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="focus_on_click">False</property>
<property name="receives_default">False</property>
<property name="tooltip_text" translatable="yes">Insert unordered list</property>
<property name="action_name">cmp.ulist</property>
<property name="always_show_image">True</property>
<child>
<object class="GtkImage" id="ulist_image">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="pixel_size">16</property>
<property name="icon_name">format-unordered-list-symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<style>
<class name="linked"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">2</property>
</packing>
</child>
<child>
<object class="GtkBox" id="indentation_buttons">
<property name="visible">True</property>
@ -565,7 +627,7 @@
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">2</property>
<property name="position">3</property>
</packing>
</child>
<child>
@ -627,7 +689,7 @@
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">3</property>
<property name="position">4</property>
</packing>
</child>
<child>
@ -651,7 +713,7 @@
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">4</property>
<property name="position">5</property>
</packing>
</child>
<child>
@ -675,7 +737,7 @@
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">5</property>
<property name="position">6</property>
</packing>
</child>
<child>
@ -692,7 +754,7 @@
<property name="expand">False</property>
<property name="fill">True</property>
<property name="pack_type">end</property>
<property name="position">5</property>
<property name="position">7</property>
</packing>
</child>
<child>
@ -707,7 +769,7 @@
<property name="expand">False</property>
<property name="fill">True</property>
<property name="pack_type">end</property>
<property name="position">6</property>
<property name="position">8</property>
</packing>
</child>
</object>