Skip to content
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.

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

Adding prompt area to non-CodeCells to indent content. #4567

Merged
merged 2 commits into from Dec 5, 2013

Conversation

ellisonbg
Copy link
Member

This is a reponse to the problem of having really long lines in Markdown cells, which makes the content difficult to read. Users want wide code cells, so we don't want to narrow everything. The solution here is to give a prompt area to the heading/md cells to narrow their content area slightly. The only problem is that this makes it more difficult to distinguish between output and md content that follows that output. The solve this, we are adding a narrow line between output and following md.

This is a continuation of #4155 that removes the other stuff that wasn't ready for review/merge. I am going to close #4155.

@Carreau
Copy link
Member

Carreau commented Nov 21, 2013

want to move the logic into all cells ? Raw included ?

WIll try, but otherwise a screenshot would be good.

@ellisonbg
Copy link
Member Author

Here are some screen shots:

screen shot 2013-11-21 at 10 04 41 am

screen shot 2013-11-21 at 10 06 01 am

@damianavila
Copy link
Member

I use this branch with some of my notebooks. The experience was very good with the new indentation... I really like it. But (there is always one 😉 ) I am not sure about the line to separate md from outputs of code cells, because in some places it looks ugly (at least for me)

I am adding a screenshot below:

line

As you can see, I am using little chucks of text to interconnect the code cells, trying to get a flow in the narrative.
The new line, just "stop" this linear flow... and in this use case, I think it adds nothing, just "cut" the flow. I know that this is probably a very subjective things, but I also think that probably is an extended use case when you are preparing tutorials...

@Carreau
Copy link
Member

Carreau commented Nov 27, 2013

Something like that ?

capture decran 2013-11-27 a 15 12 40

@damianavila
Copy link
Member

Yep... Having a delimiter in a vertical position as presented in the last image in less disruptive (maybe not disruptive at all) than the horizontal rule which cut the flow of information...

@ellisonbg
Copy link
Member Author

The problem with the vertical line is that each part of the output would have its own line causing a lot of visual clutter. Also, the smooth hr idea is not trivial to implement without resorting to JavaScript. Not sure where to go with this one.

@Carreau
Copy link
Member

Carreau commented Dec 4, 2013

The problem with the vertical line is that each part of the output would have its own line

capture decran 2013-12-04 a 21 46 24

But in practice you wouldn't see it.

I've been working with the hline for a wek now and I don't like it.

Also, the smooth hr idea is not trivial to implement without resorting to JavaScript

Even with a css-before ?

@ellisonbg
Copy link
Member Author

Ahh yes, using css-before it might be possible. Thoughts on the vertical line:

  • It is really important for the text in output areas to line up horizontally with the text in the input area. Adding the vertical line messes that up.
  • Red is way too bold for a non-error related UI element.
  • I am open to a vertical line - maybe try it on the right side of a cell? The grey horizontal line in his PR is already really subtle. I think whatever we come up with will have to be even more suble...hmmm

@ellisonbg
Copy link
Member Author

I should note that I think the smooth hr will have the same problem as the solid line.

@Carreau
Copy link
Member

Carreau commented Dec 4, 2013

Ahh yes, using css-before it might be possible

After tests, only if line is an actual image (or base 64 encoded), you canot do divs and alike.

It is really important for the text in output areas to line up horizontally with the text in the input area. Adding the vertical line messes that up.

That's fixable. if you know the with of the line, you pad minus this width

Red is way too bold for a non-error related UI element.

But red is 3 letters when you modify css live :-)

I am open to a vertical line - maybe try it on the right side of a cell?

I think it's problematic with extra wide input that leak on the right.

Not red, thinner, lighter, right margin give that:
capture decran 2013-12-04 a 22 26 19

@Carreau
Copy link
Member

Carreau commented Dec 4, 2013

And on the right.
capture decran 2013-12-04 a 22 28 48

@takluyver
Copy link
Member

I quite like the right-hand-side marker in the last comment - it's subtler than putting it on the left.

@ellisonbg
Copy link
Member Author

I too like the thin line on the right side. I will push commits in this PR that add that, but I am running into some CSS problems that I have started to fix in #4576

@ellisonbg
Copy link
Member Author

Here is a screenshot of the latest:

screen shot 2013-12-04 at 5 06 43 pm

@minrk
Copy link
Member

minrk commented Dec 5, 2013

In that case, is it possible to get a continuous line with some input + output css magic, similar to what happens with the cell toolbar?
Rounded corner followed by space followed by continuation of the border
seems less than ideal.

On Wed, Dec 4, 2013 at 5:07 PM, Brian E. Granger
notifications@github.comwrote:

Here is a screenshot of the latest:

[image: screen shot 2013-12-04 at 5 06 43 pm]https://f.cloud.github.com/assets/27600/1679214/9a61569a-5d49-11e3-89ab-56f94a3e5bb2.png


Reply to this email directly or view it on GitHubhttps://github.com//pull/4567#issuecomment-29862826
.

@damianavila
Copy link
Member

OK, the right, thinner, vertical, non-visually aggressive vertical line seems the way to go... I really like!

@Carreau
Copy link
Member

Carreau commented Dec 5, 2013

+1 with min's comment to see how it looks.

@jdfreder
Copy link
Member

jdfreder commented Dec 5, 2013

+1 for the right vertical line

@minrk
Copy link
Member

minrk commented Dec 5, 2013

Consensus from dev meeting: No UI for delimiting, and see how it goes in practice.

This is a reponse to the problem of having really long lines in
Markdown cells, which makes the content difficult to read. Users
want wide code cells, so we don't want to narrow everything. The
solution here is to give a prompt area to the heading/md cells
to narrow their content area slightly. The only problem is that
this makes it more difficult to distinguish between output
and md content that follows that output. The solve this, we are
adding a narrow line between output and following md.
@ellisonbg
Copy link
Member Author

OK this is clean up and ready for merge.

minrk added a commit that referenced this pull request Dec 5, 2013
Adding prompt area to non-CodeCells to indent content.

prompts now appear in the margin of the document.
@minrk minrk merged commit 1695bf9 into ipython:master Dec 5, 2013
@ellisonbg ellisonbg deleted the indent-cell branch January 28, 2014 17:44
mattvonrocketstein pushed a commit to mattvonrocketstein/ipython that referenced this pull request Nov 3, 2014
Adding prompt area to non-CodeCells to indent content.

prompts now appear in the margin of the document.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants