Skip to content

Image alignment control #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HazelGrant wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Image alignment control #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e40904c
WIP
Mar 20, 2017
58085cf
Adds ability to left/right align image in editor
Mar 21, 2017
fae22fc
Fixes test failures caused by changes
Mar 21, 2017
39c3298
Refacts alignment tests and adds event.stopPropogation to align funct…
Mar 23, 2017
e687bf1
Fixes floated images overflowing content-editor
Mar 23, 2017
36fbb04
Fixes captions so that they aren't overrun by text
Mar 23, 2017
c8b1839
Builds Trix with new functionality
Mar 23, 2017
a8c5718
Adds debugging statements
Mar 24, 2017
11709f5
Removes console.log debug statements
Mar 24, 2017
ef5a923
Adds trixSerialize: false to image editing buttons
Mar 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions assets/trix/images/clear-align.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions assets/trix/images/left-align.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions assets/trix/images/right-align.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 48 additions & 4 deletions assets/trix/stylesheets/attachments.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,10 @@ trix-editor {
}
}

button.remove {
button.remove,
button.left-align,
button.right-align,
button.clear-align {
cursor: pointer;

&.icon {
Expand All @@ -42,8 +45,6 @@ trix-editor {
z-index: 1;
padding: 0;
margin: 0;
top: -1.1em;
left: calc(50% - 0.8em);
width: 1.8em;
height: 1.8em;
line-height: 1.8em;
Expand All @@ -62,7 +63,6 @@ trix-editor {
left: 0.1em;
opacity: 0.75;
content: "";
background-image: $icon-remove;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
Expand All @@ -78,6 +78,50 @@ trix-editor {
}
}

button.remove {
&.icon {
left: calc(50% - 0.8em);
top: -1.2em;
}

&::before {
background-image: $icon-remove;
}
}

button.left-align {
&.icon {
bottom: 1.1em;
left: calc(50% - 0.8em - 2em);

&::before {
background-image: $icon-left-align;
}
}
}

button.right-align {
&.icon {
bottom: 1.1em;
left: calc(50% - 0.8em + 2em);

&::before {
background-image: $icon-right-align;
}
}
}

button.clear-align {
&.icon {
bottom: 1.1em;
left: calc(50% - 0.8em);

&::before {
background-image: $icon-clear-align;
}
}
}

.caption {
&.caption-editing {
textarea {
Expand Down
27 changes: 23 additions & 4 deletions assets/trix/stylesheets/content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.trix-content {
line-height: 1.5;
overflow: auto;

h1 {
font-size: 1.2em;
Expand Down Expand Up @@ -47,16 +48,37 @@
}
}

.attachment-clear {
margin: 15px 0px 20px 0px;
text-align: center;
width: 100%;
}

.attachment-left {
float: left;
margin: 5px 10px 5px 0px;
}

.attachment-right {
float: right;
margin: 5px 0px 5px 10px;
}

.attachment {
display: inline-block;
position: relative;
max-width: 100%;
margin: 0;
padding: 0;

.caption {
padding: 0;
left: 0;
overflow: hidden;
position: absolute;
text-align: center;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;

.size {
&:before {
Expand All @@ -66,9 +88,6 @@
}

&.attachment-preview {
width: 100%;
text-align: center;

.caption {
color: #666;
font-size: 0.9em;
Expand Down
3 changes: 3 additions & 0 deletions assets/trix/stylesheets/icons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,8 @@ $icon-numbers: svgo-data-uri('trix/images/numbers.svg', $precision: 1);
$icon-quote: svgo-data-uri('trix/images/quote.svg', $precision: 0);
$icon-redo: svgo-data-uri('trix/images/redo.svg', $precision: 1);
$icon-remove: svgo-data-uri('trix/images/remove.svg', $precision: 1);
$icon-left-align: svgo-data-uri('trix/images/left-align.svg', $precision: 1);
$icon-right-align: svgo-data-uri('trix/images/right-align.svg', $precision: 1);
$icon-clear-align: svgo-data-uri('trix/images/clear-align.svg', $precision: 1);
$icon-strike: svgo-data-uri('trix/images/strike.svg', $precision: 2);
$icon-undo: svgo-data-uri('trix/images/undo.svg', $precision: 1);
12 changes: 6 additions & 6 deletions dist/trix-core.js
View file
Open in desktop

Large diffs are not rendered by default.

81 changes: 63 additions & 18 deletions dist/trix.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,17 +168,21 @@ trix-editor .attachment:hover {
cursor: default; }
trix-editor .attachment.attachment-preview .caption:hover {
cursor: text; }
trix-editor .attachment button.remove {
trix-editor .attachment button.remove,
trix-editor .attachment button.left-align,
trix-editor .attachment button.right-align,
trix-editor .attachment button.clear-align {
cursor: pointer; }
trix-editor .attachment button.remove.icon {
trix-editor .attachment button.remove.icon,
trix-editor .attachment button.left-align.icon,
trix-editor .attachment button.right-align.icon,
trix-editor .attachment button.clear-align.icon {
text-indent: -9999px;
display: block;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
top: -1.1em;
left: calc(50% - 0.8em);
width: 1.8em;
height: 1.8em;
line-height: 1.8em;
Expand All @@ -187,7 +191,10 @@ trix-editor .attachment button.remove {
background-color: #fff;
border: 2px solid highlight;
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
trix-editor .attachment button.remove.icon::before {
trix-editor .attachment button.remove.icon::before,
trix-editor .attachment button.left-align.icon::before,
trix-editor .attachment button.right-align.icon::before,
trix-editor .attachment button.clear-align.icon::before {
display: inline-block;
position: absolute;
top: 0.1em;
Expand All @@ -196,14 +203,39 @@ trix-editor .attachment button.remove {
left: 0.1em;
opacity: 0.75;
content: "";
background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
background-position: center;
background-repeat: no-repeat;
background-size: contain; }
trix-editor .attachment button.remove:hover {
trix-editor .attachment button.remove:hover,
trix-editor .attachment button.left-align:hover,
trix-editor .attachment button.right-align:hover,
trix-editor .attachment button.clear-align:hover {
border-color: #333; }
trix-editor .attachment button.remove:hover::before {
trix-editor .attachment button.remove:hover::before,
trix-editor .attachment button.left-align:hover::before,
trix-editor .attachment button.right-align:hover::before,
trix-editor .attachment button.clear-align:hover::before {
opacity: 1; }
trix-editor .attachment button.remove.icon {
left: calc(50% - 0.8em);
top: -1.2em; }
trix-editor .attachment button.remove::before {
background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E); }
trix-editor .attachment button.left-align.icon {
bottom: 1.1em;
left: calc(50% - 0.8em - 2em); }
trix-editor .attachment button.left-align.icon::before {
background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15%2015H3v2h12v-2zm0-8H3v2h12V7zM3%2013h18v-2H3v2zm0%208h18v-2H3v2zM3%203v2h18V3H3z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E); }
trix-editor .attachment button.right-align.icon {
bottom: 1.1em;
left: calc(50% - 0.8em + 2em); }
trix-editor .attachment button.right-align.icon::before {
background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3%2021h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3%203v2h18V3H3z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E); }
trix-editor .attachment button.clear-align.icon {
bottom: 1.1em;
left: calc(50% - 0.8em); }
trix-editor .attachment button.clear-align.icon::before {
background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3%2021h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E); }
trix-editor .attachment .caption.caption-editing textarea {
display: inline-block;
width: 100%;
Expand All @@ -229,7 +261,8 @@ trix-editor .attachment progress {
opacity: 0.9; }
@charset "UTF-8";
.trix-content {
line-height: 1.5; }
line-height: 1.5;
overflow: auto; }
.trix-content h1 {
font-size: 1.2em;
line-height: 1.2;
Expand Down Expand Up @@ -259,24 +292,36 @@ trix-editor .attachment progress {
text-decoration: none; }
.trix-content a[data-trix-attachment]:hover, .trix-content a[data-trix-attachment]:visited:hover {
color: inherit; }
.trix-content .attachment-clear {
margin: 15px 0px 20px 0px;
text-align: center;
width: 100%; }
.trix-content .attachment-left {
float: left;
margin: 5px 10px 5px 0px; }
.trix-content .attachment-right {
float: right;
margin: 5px 0px 5px 10px; }
.trix-content .attachment {
display: inline-block;
position: relative;
max-width: 100%;
margin: 0;
padding: 0; }
.trix-content .attachment .caption {
padding: 0;
text-align: center; }
left: 0;
overflow: hidden;
position: absolute;
text-align: center;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap; }
.trix-content .attachment .caption .size:before {
content: ' · '; }
.trix-content .attachment.attachment-preview {
width: 100%;
text-align: center; }
.trix-content .attachment.attachment-preview .caption {
color: #666;
font-size: 0.9em;
line-height: 1.2; }
.trix-content .attachment.attachment-preview .caption {
color: #666;
font-size: 0.9em;
line-height: 1.2; }
.trix-content .attachment.attachment-file {
color: #333;
line-height: 1;
Expand Down
11 changes: 6 additions & 5 deletions dist/trix.js
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions src/trix/config/css.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ Trix.config.css =
caption: "caption"
captionEdited: "caption-edited"
captionEditor: "caption-editor"
clearAlignButton: "clear-align icon"
editingCaption: "caption-editing"
progressBar: "progress"
removeButton: "remove icon"
rightAlignButton: "right-align icon"
leftAlignButton: "left-align icon"
size: "size"
3 changes: 3 additions & 0 deletions src/trix/config/lang.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,19 @@ Trix.config.lang =
bytes: "Bytes"
captionPlaceholder: "Type a caption here…"
captionPrompt: "Add a caption…"
clearAlign: "Clear Alignment"
code: "Code"
heading1: "Heading"
indent: "Increase Level"
italic: "Italic"
leftAlign: "Left Alignment"
link: "Link"
numbers: "Numbers"
outdent: "Decrease Level"
quote: "Quote"
redo: "Redo"
remove: "Remove"
rightAlign: "Right Alignment"
strike: "Strikethrough"
undo: "Undo"
unlink: "Unlink"
Expand Down
Loading