Better new file dialog

[TheInitializer]

https://thimbleprojects.org/theinitializer/46355/
here's a thing I made

someone implement it and pr it

[TheInitializer]

just realized we have 218 issues/prs - waaaat

[TheInitializer]

btw there are supposed to be images on the buttons - I was lazy so didn't use an iconfont

[matthewr6]

implement it pls
I'm busy making a brain

[towerofnix]

implement it pls
I'm busy making a brain

A gopher-brain! :P

[matthewr6]

who is implementing this? @ElementalCode/programmers

[joker314]

Hello, I am not a developer.

That thing looked lovely. Do you think there is a way to keep the cursor from going into a text selection cursor when you hover over the text within the button. Perhaps by using the cursor: ... CSS thing? It doesn't matter too much though.

Otherwise it looks great! :)

P.S. Remember to check if the user types the file extension in themselves: if they do, then you shouldn't apend it again. You could do a regex: /\.html$/i To match it, and then you could use the .test() method to check if they have typed it in. To create the RegExp so that it can match any extension that you choose, you can use ext to store the extension you are testing against and then do new RegExp("\\." + ext + "$") to do that

[mrjacobbloom]

What about something like this? http://jsfiddle.net/Airhogs777/9jnhmku6/embedded/result/

(I know it's hacky but it can be rewritten later)

[PullJosh]

Cursor pointer pls: http://jsfiddle.net/PullJosh/6sp0podq/

[mrjacobbloom]

Cursor pointer pls: http://jsfiddle.net/PullJosh/6sp0podq/

pshh who needs usability when you have design (jkjk)

that was more of a proof of concept for the inputbox than the buttons anyway 📦

[joker314]

Yes, that is what I had in mind. Well Done everybody!

Out of interest, are you guys accepting any more developers

[mrjacobbloom]

How's this look? It's less sketchy than the last version: http://jsfiddle.net/Airhogs777/7hb4tj8a/

[PullJosh]

How's this look? It's less sketchy than the last version: http://jsfiddle.net/Airhogs777/7hb4tj8a/

Ctrl+a will show the file extension is also before the file name as well as after. It's a clever trick for centering everything nicely, but I'd be great if there was a better solution...

[mrjacobbloom]

Ctrl+a will show the file extension is also before the file name as well as after. It's a clever trick for centering everything nicely, but I'd be great if there was a better solution...

Once we know how wide the extension text is, we could probably use relative positioning or a transform

[mrjacobbloom]

Okay, try this: http://jsfiddle.net/Airhogs777/7hb4tj8a/

[mrjacobbloom]

more robust JS and sassified, I think this is almost ready to go into the editor: http://jsfiddle.net/Airhogs777/7hb4tj8a/

[mrjacobbloom]

todo: put standard validation on the file name

[joker314]

Maybe you could do an onkeyup -> check for invalid chars, if found, show notice, and remove?

[mrjacobbloom]

Maybe you could do an onkeyup -> check for invalid chars, if found, show notice, and remove?

Either that or when you try to create the file it throws an error... I haven't decided yet

[joker314]

If you do that, it always looks cool if you make the filename go really red then fade back to black? Or just keep it red?

[joker314]

I think it is annoying for a user to type something like ¬!"£$%^&I&^%$£"£$%^&*(.html only to have all their work rejected. If, when they type ¬.html it turns red immediately, they don't waste their time...

[matthewr6]

Maybe do a regex to match something like [a-zA-Z0-9] and if the match fails, turn the border red (and reject it if they try to submit)

[mrjacobbloom]

ta-da http://jsfiddle.net/Airhogs777/7hb4tj8a/6/

[matthewr6]

Awesome! This is just me, but it'd be nice to make the red border a bit brighter and gray out the Create button if you can't create the file.

[mrjacobbloom]

done http://jsfiddle.net/Airhogs777/7hb4tj8a/7/

[joker314]

I like it, maybe you could add some kind f explanation when th user hovers over the disabled "Create" button? Like a "Filename too short" or a "Filenames can only contain characters a-z 0-9 - _"?

[matthewr6]

Can a filename even be too short? :P

The only exceptions I can think of:

• no file name (which might still be valid)
• duplicate file name
• invalid characters

[mrjacobbloom]

Right now I'm using the regex /^[\w,\s-]{1,255}$/, which limits it to valid characters and length. I'll have to wait until I add it into the editor to check for duplicate file names. As for telling the user what they did wrong, I can probably add an errorbox

[joker314]

Yeah when I said too short I meant length 0 :P

[mrjacobbloom]

how's this? http://jsfiddle.net/Airhogs777/7hb4tj8a/8/

I can tailor it to the specific error but that'll be more work

[joker314]

I can do it for you if you like? Give me a sec to do it

[joker314]

Your regex is faulty somehow: file with spaces.html is valid, but spaces .html is not

[mrjacobbloom]

good catch, it looks like contenteditable automatically converts trailing spaces to nbsp

[mrjacobbloom]

same for spaces at the start. That might be as simple as a find-and-replace

[joker314]

Yup

[joker314]

I am in UTC+3 so I better go to bed soon...

[matthewr6]

You theoretically could have .html :P

[joker314]

Well yeah but should you allow it?

EDIT: Why am I using first person? I am not on the team.. :P

[matthewr6]

Sure. As long as they don't have two files with the same (lack of) name, there's nothing really wrong.

Probably not though because it won't show up in most file explorers

[joker314]

It seems a little weird but you do have a point

[mrjacobbloom]

It makes me uncomfortable, but... low floor, wide walls, as the ST likes to say

[TheInitializer]

wow, people have made so many great improvements to my original design!

one thing is I don't like how the text becomes unselected when you click a button; is there a way for it to stay selected?

[mrjacobbloom]

is there a way for it to stay selected?

You mean, when you click the JS/HTML/CSS buttons, the caret should stay in the same place in the textbox?

[PolyEdge]

(Sorry, I had to bump...)
Why not just remove any invalid characters with a keydown callback?

[mrjacobbloom]

shrug