MyBB Community Forums

Full Version: move Attachment-box into Reply-box
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Hi there,

has anyone tried to move the Attachment-box into the Reply-box? Or has at least some thoughts made about that and can tell me about? Or know where i can look for it?
you could try to modify the newreply Template

search for

{$attachbox}
and remove it, where it is

add it behind:
<textarea id="message" name="message" rows="20" cols="70" tabindex="2" >{$message}</textarea>
{$codebuttons}
{$multiquote_external}

so the td looks like this after that

<td class="trow2" valign="top"><strong>{$lang->your_message}</strong><br />{$smilieinserter}</td>
<td class="trow2">
<textarea id="message" name="message" rows="20" cols="70" tabindex="2" >{$message}</textarea>
{$codebuttons}
{$multiquote_external}
{$attachbox}
</td>

see attachment what it looks like after changes are made
Interesting. Thx. But i more look how i can it implement e.g. instead of the "hoirizontal rule" button. Or better, clicking on the "horizontal rule" button opens the "file upload". No more Attachment-box-field in general.

Whereas your idea would be a good solution for the part "insert into post"
what do you mean with this:

Quote:instead of the "hoirizontal rule" button

Making them disappear completely and only showing them again when requested is certainly possible, but not between tea and coffee Wink

Maybe someone has a CSS solution for this
I mean instead of producing a horizontal bar in the post if one click on this "horizontal rule" button, just rename the button into e.g."file attache" and connect the button with the drop-zone function. Instead clicking of the drop-zone field, you click the button.

Edit:

Does anyone even use the "horizontal bar"? Just hold "------------" and then do bold or like that and you have the same. So this button is better used for other things, e.g. file upload

I think instead of

Quote:horizontalrule:{exec:"inserthorizontalrule",tooltip:"Insert a horizontal rule"}

there must be something like

Quote:horizontalrule:{exec:function()}

whereas the function is the function what open the "file upload" if you click on the "click here" part in the attachment-box. Not sure if it is {$newattach]

in post.js there is a "uploadAttachments" function, but i dont figure out how to lay it on the button. This one

Quote:{exec:function(){uploadAttachments},tooltip:"file attach"}


does not work. Anyone any idea?

meanwhile i found the "codebuttons" template and take out the horizontal and put in the {$newattach} for it

Quote:toolbar: "{$basic1}{$align}{$font}{$size}{$color}{$removeformat}{$newattach}image,{$email}{$link}|video{$emoticon}|{$list}{$code}quote|maximize,source",

but i still somehow have to tell sceditor that it is there. Any ideas?
I tried to make it a button directly in the editor but it doesn't put the attachment directly into the reply area straight away, so sorry but the best I have done is to turn it into a button outside of the codebuttons!

Not what you want but maybe it will move you nearer to doing it?

I tried it under the 'Smilies' and it looked like this:

[attachment=46621]

But if you upload an image with a longer name then it pushes the editor around:

[attachment=46622]

So went with bv64 idea and put it under the text area:

[attachment=46619]

Which then works better with the file names:

[attachment=46620]

As said, not what you want but maybe can help you Undecided

Just had a thought and another look .... so a bit closer to what you want.

Have split things up and now have the attachment upload 'button' under the 'Smilies' but the file links for insert stay under the main text area:

[attachment=46624]


[attachment=46623]

So now just a button (which you could make look however you wish) before uploads!

I forgot to say the changes made to do as the images show .... my silly daft old brain lol

It isn't a lot.

In your templates (this is on a 'default' theme, I know not what it would do on another theme)

post_attachments_new

I changed to:

<tr>
<td class="trow1" width="1"><img src="{$theme['imgdir']}/paperclip.png" alt="" /></td>
<td class="trow1" style="white-space: nowrap"><strong>{$lang->new_attachment}</strong> <input type="file" name="attachments[]" size="30" class="fileupload" multiple="multiple" /></td>
<td class="trow1" style="white-space: nowrap" align="center">{$attach_update_options} {$attach_add_options}</td>
</tr>
<tr style="display: none;">
	<td class="trow1" colspan="3">	
	</td>
</tr>


post_attachments

I changed to:

<br />
			<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
	<td class="thead" colspan="3" style="display: none;"><strong><center>{$lang->attachments}</center></strong></td>
</tr>
<tr>
	<td class="tcat smalltext" colspan="3" style="display: none;">{$lang->attach_quota} {$lang->attach_usage} {$link_viewattachments}</td>
</tr>
{$newattach}
{$attachments}
</table>


newreply

In this template I moved the string attachbox as per bv64 but added some code which I took from the 'post_attachments_new' template .... so best way is to show the changes from string posticons down to below string multiquote_external

{$posticons}
<tr>
<td class="trow2" valign="top"><strong>{$lang->your_message}</strong><br />{$smilieinserter}
	<br />
		<div id="upload_bar" style="background: #0066A2; height: 5px; width: 0%;"></div>
		<div id="dropzone" class="button" style="background-color: #04AA6D; border-radius: 12px; max-width: 50%; margin-left: 25%; color: #fff; text-align: center; border: 2px solid #000000; font-weight: bold;">
		<div style="pointer-events: none;"></div>
		</div>
	</td>
<td class="trow2">
<textarea id="message" name="message" rows="20" cols="70" tabindex="2" >{$message}</textarea>
{$codebuttons}
{$multiquote_external}
{$attachbox}
</td>

Don't know if that helps but lol

Oh also I changed the language file for the text "Click or drop some files here to upload..." to "Click to Upload" which was line 129 in

inc/languages/english/global.lang.php

Just thought .... if you do the above then you also need to change the newthread editor and the editpost editor (not sure if those are the correct names but you would need to change then as well to reflect the changes in newreply .... there are multiple editors (maybe also private message editor))
Hey! That looks great! I will give it definitely a try Smile

The goal was to have it all in one area, not having this up to text-area, down to attach-box, losing focus, up again setting focus, down again pressing "insert into post", up again writing...

Edit:

and yes, bv64 was within the "requirements!, but i really hate this "attachment-field-look". I always waiting for the spaceship landing marks to blink up and for the red alarm to sound up if the cursor is not set correctly in the 33,3° north/northeast approach path by me....just a button and click and all is fine

I like it very much. Thank you Smile

[attachment=46629]
I am pleased that it works for you Smile

I never thought about it, so would like to thank you for this thread, as I now use the changes on my forum and did the same to my 'responsive' theme on my forum which is BootBB, (which is an excellent theme by the way and thanks to the creator of it).

I did change a few bits .... mainly adding css to the global.css rather than having it inline (which is limited).

So rather than (THIS IS ON THE BOOTBB THEME AS IT USES DIVS NOT TABLES SO WILL NOT WORK ON THE MYBB DEFAULT THEME):

<div id="dropzone" class="button" style="background-color: #2980b9; border-radius: 12px; max-width: 50%; margin-left: 25%; color: #fff; text-align: center; border: 2px solid #000000; font-weight: bold;">

in the "newreply" (and the 2 other editors, threadreply and editreply) I just put:

<div id="dropzone" class="but-attach">


and in the global.css at the bottom, I just added:

.but-attach {
  background-color: #2980b9;
  border-radius: 12px;
  max-width: 50%; 
  margin-left: 25%; 
  color: #fff; 
  text-align: center; 
  border: 2px solid #000000; 
  font-weight: bold;
}

.but-attach:hover {
  background-color: #04AA6D;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}


Which then means the css you can add to and change however you wish very simply Big Grin
yes, something like that also in 1.9. I wonder how the new editor/attachment will look like in 1.9. I hope they put it also all in one block. Imagine it is responsive and still has this large attachment section under the new reply....
New thread:

Quote:{$posticons}
<tr>
<td class="trow2" valign="top"><strong>{$lang->your_message}</strong><br />{$smilieinserter}
<br />
<div id="upload_bar" style="background: #0066A2; height: 5px; width: 0%;"></div>
<div id="dropzone" class="button" style="background-color: #04AA6D; border-radius: 12px; max-width: 50%; margin-left: 25%; color: #fff; text-align: center; border: 2px solid #000000; font-weight: bold;">
<div style="pointer-events: none;"></div>
</div>
</td>
<td class="trow2">
<textarea id="message" name="message" rows="20" cols="70" tabindex="2" >{$message}</textarea>
{$codebuttons}{$linktools_js}
{$multiquote_external}
</td>
</tr>
{$postoptions}
{$modoptions}
{$subscriptionmethod}
{$pollbox}
{$captcha}
{$attachbox}
</td>
</table>

[attachment=46644]
Pages: 1 2