ElkArte Community

Elk Development => Theme development => Topic started by: Jorin on March 14, 2015, 02:56:12 am

Title: mobile menu icons?
Post by: Jorin on March 14, 2015, 02:56:12 am
Hi again,

I want to tweak my menu a little and want to show new entries in the mobilke view as well. Therefor I need to know:

1. What are the mobile icons made with? Is it:

Code: [Select]
				'data-icon' => '',

I tried to look here (http://fontawesome.io/icon/check-square/) for more informations, but there is no such code as used in Subs.php anywhere.

2. What must I edit in Subs.php so that new menu entries will be shown in mobile view of the board?

Thank you!  :)
Title: Re: mobile menu icons?
Post by: Spuds on March 14, 2015, 02:22:36 pm
Look in the function setupMenuContext in Subs.php.

You will find lines like 'data-icon' => '& #xf015;'  in the buttons array.  That is the hex code for a font awesome character to use.  You can find all those codes listed next to the icons here: http://fortawesome.github.io/Font-Awesome/cheatsheet/

Alternatively, you could do it all in the css but you will have to specify all the buttons ... so today we have:
	[data-icon]:before {
font-family: 'FontAwesome';
border: 3px solid #666;
padding: 1px;
margin: 2px;
height: 1.15em;
width: 1.15em;
text-align: center;
display: inline-block;
border-radius: 4px;
line-height: 1.2em;
font-size: 2em;
color: #555;
content: attr(data-icon);
}
That single blocks defines all of the mobile icons, the content is set from the data-icon attribute. You could replace that block with for example
Code: [Select]
	#button_home:before, #button_pm:before {
font-family: 'FontAwesome';
border: 3px solid #666;
padding: 1px;
margin: 2px;
height: 1.15em;
width: 1.15em;
text-align: center;
display: inline-block;
border-radius: 4px;
line-height: 1.2em;
font-size: 2em;
color: #555;
}
#button_home:before {
content: '\f015';
}
#button_pm:before {
content: '\f19c';
}
for the home button, and the PM button as an example.  You would have to add for all of the other buttons you want.
Title: Re: mobile menu icons?
Post by: emanuele on March 14, 2015, 04:27:02 pm
I wonder if at some point we will be able to move that icons out of setupMenuContext and into the theme...
Title: Re: mobile menu icons?
Post by: Spuds on March 14, 2015, 05:47:33 pm
May make sense for 1.1, I think what I posted above would work fine, and then simply remove the data_icon attribute from subs.
Title: Re: mobile menu icons?
Post by: Jorin on March 15, 2015, 01:19:30 am
Thanks, @Spuds worked great!  :)

Another question I have with this idea is that - remember I am absoluty not into coding - my menu button für drafts will not work for registered members. I have added this in Subs.php:

Code: [Select]
			// Eigener Button zu den Entwürfen.
'drafts1' => array(
'title' => 'Entwürfe',
'href' => $scripturl . '?action=profile;area=showdrafts',
'show' => !empty($modSettings['drafts_enabled']) && !empty($modSettings['drafts_post_enabled']) && allowedTo('post_draft'),
),

But it doesn't work, the button is not shown. It only is when I use this:

Code: [Select]
			// Eigener Button zu den Entwürfen.
'drafts1' => array(
'title' => 'Entwürfe',
'href' => $scripturl . '?action=profile;area=showdrafts',
'show' => !$user_info['is_guest'],
),

I want to display the button only if the function is enabled und the user has the permission to use it. Can anyone see my error?
Title: Re: mobile menu icons?
Post by: Spuds on March 15, 2015, 09:45:07 am
That looks fine to me ... not sure why its not working for you.  I took you code and placed it in subs and the button was shown.
Title: Re: mobile menu icons?
Post by: Jorin on March 15, 2015, 09:59:25 am
As a normal member? Logged in as administrator I see the button too. But not as normal member (which has the permission to use drafts).
Title: Re: mobile menu icons?
Post by: Jorin on March 17, 2015, 02:36:22 am
Another small question. When I add a code like this into Subs.php:

Code: [Select]
		// Eigener Button für die Stromtankstellen-Karte.
'tankstellen' => array(
'title' => 'Stromtankstellen',
'href' => 'http://elektro-piloten.de/karte.html',
'show' => !$user_info['is_guest'],

),

...to create a new button in the menu, is there something more I have to do? Maybe because of "tankstellen", does this need to be in any more files?
Title: Re: mobile menu icons?
Post by: emanuele on March 17, 2015, 04:02:19 am
Nope.
The "tankstellen" (the key) is there to identify the button if you need to access it from other places. ;)
Title: Re: mobile menu icons?
Post by: Jorin on March 17, 2015, 04:16:58 am
Great, thanks! So the only problem is this:

Quote from: Jorin – ...my menu button für drafts will not work for registered members.

[...]

I want to display the button only if the function is enabled und the user has the permission to use it. Can anyone see my error?

 O:-)
Title: Re: mobile menu icons?
Post by: emanuele on March 17, 2015, 05:31:11 am
Can you attach the modified file that doesn't work?
Title: Re: mobile menu icons?
Post by: Jorin on March 17, 2015, 05:49:22 am
Sure. This is the part that doesn't work:

Code: [Select]
			// Eigener Button zu den Entwürfen.
'drafts1' => array(
'title' => 'Entwürfe',
'href' => $scripturl . '?action=profile;area=showdrafts',
/* 'show' => !$user_info['is_guest'], */
'show' => !empty($modSettings['drafts_enabled']) && !empty($modSettings['drafts_post_enabled']) && allowedTo('post_draft'),
),

It's line 3565.
Title: Re: mobile menu icons?
Post by: emanuele on March 17, 2015, 06:17:10 am
"post_draft" is a board-level permission[1], that means it will return a correct value only when inside a specific board.
So, the easy way out is to use simply:
Code: [Select]
			// Eigener Button zu den Entwürfen.
'drafts1' => array(
'title' => 'Entwürfe',
'href' => $scripturl . '?action=profile;area=showdrafts',
'show' => !empty($modSettings['drafts_enabled']) && !empty($modSettings['drafts_post_enabled']),
),
And I wonder why it is board-level... would be easier make it forum-wide? I guess not many admins go and allow to save drafts in one board, but not in the other. Or is there a use-case that I missed?
Title: Re: mobile menu icons?
Post by: Jorin on March 17, 2015, 06:21:12 am
Maybe boards for authors need the possibility to allow drafts in some boards and in some not?

Thanks for the support!  :)
Title: Re: mobile menu icons?
Post by: Joshua Dickerson on March 18, 2015, 10:34:00 am
@Jorin, I encourage you to use a hook here instead of editing Subs.php directly. Future updates of Elk will surely break this.
Title: Re: mobile menu icons?
Post by: emanuele on March 18, 2015, 04:09:05 pm
I was thinking the same, though I always feel uneasy suggesting use hooks to non-coders...
And that's also for that reason that I have introduced some trick in 1.1 that should make much easier to use hooks for non-coders (I hope).
Title: Re: mobile menu icons?
Post by: Jorin on March 19, 2015, 01:46:03 am
I hope too!  :D  At the moment I wrote down all changes to a text file so I can make them after an update again. An easy way to use hooks and/or a really easy to understand manual would be great!
Title: Re: mobile menu icons?
Post by: emanuele on March 19, 2015, 07:05:06 am
Easy, easy, easy, may be too much, but at least easier.
Your change should look something like this:
Code: [Select]
<?php

class Custom_Integrate
{
public static function register()
{
// $hook, $function, $file
return array(
array(
'integrate_menu_buttons',
'Custom_Integrate::menu_buttons',
),
);
}

public static function menu_buttons(&$buttons)
{
global $modSettings, $scripturl;

$buttons = elk_array_insert($buttons, 'pm', array(
// Eigener Button zu den Entwürfen.
'drafts1' => array(
'title' => 'Entwürfe',
'href' => $scripturl . '?action=profile;area=showdrafts',
'show' => !empty($modSettings['drafts_enabled']) && !empty($modSettings['drafts_post_enabled']),
)
),
'after',
false
);
}
}

And you would be able to enable/disable the "integration" directly from the admin panel.