Adding Welcome Message and Terms of Service button to arsnova theme

[SaifAlDilaimi]

I would like to show a welcome message like the official arsnova.eu server does (image below):

Also we would like to add a link to ToS at the bottom where the privacy links are set. Can you guys give me hints where I can edit it on this repository?

[dgerhardt]

Please have a look at the 2.3 release from february: https://github.com/thm-projects/arsnova-backend/releases/tag/v2.3.0 https://github.com/thm-projects/arsnova-mobile/releases/tag/v2.3.0

[SaifAlDilaimi]

Hello @dgerhardt ,

can you explain a little bit more how I can edit the theme? I don't see any config properties. Also how can I add a link to the bottom part of arsnova?

[dgerhardt]

You can setup the messages with the web frontend and format them using Markdown. Only admins (who can be defined in arsnova.properties) are allowed to create MotDs which are displayed on the start page.

[SaifAlDilaimi]

For everyone else: I have setup like @dgerhardt suggested a admin in my arsnova.properties file. When logged in as a teacher I was able to set a global message with a end date.

For theme specific changes I have cloned this repository and made the following changes. Please install ruby, sencha cmd 4.0.4.48, nodejs & npm to be able to build arsnova-mobile:

Add Icon to login mechanism (#62, #59) : In my cloned arsnova-mobile directory I added following css to this file: arsnova-mobile/src/main/webapp/resources/sass/_theme.scss

.iconBtnImg.login-icon-ldap {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: url(http://www.rubel.rub.de/sites/default/files/documents/rub_label_0.png) no-repeat center center; color: transparent;
}

You can change the CSS class to the button you want to override.

Add another button to the bottom bar:

I wanted to add a Terms of Service button to the bottom bar of arsnova. Theres no config propertie to add aditional button, so you have to make some code changes.

1. Add a new TabPanel.js

Working path: arsnova-mobile/src/main/webapp/app/view/about/

in this path copy AboutTabPanel.js and paste it with a new name. In my case ToSTabPanel.js. In your new file change the URL, title and icon to your desire.

I also had to localize my title so I had to make some other changes:

2. Localize Working path: arsnova-mobile/src/main/webapp/app/internationalization.js

Add a new Message propertie for Germany: L725 English: L1605

In my case I called it Message.ToS. My ToSTabPanel.js file contains this:

Ext.define('ARSnova.view.about.PrivacyTabPanel', {
    extend: 'Ext.tab.Panel',

    requires: ['ARSnova.view.components.EmbeddedPage'],

    config: {
        title: Messages.ToS,
        iconCls: 'icon-book2',

        tabBar: {
            hidden: true
        }
    },

    initialize: function () {
        this.callParent(arguments);

        this.toolbar = Ext.create('Ext.Toolbar', {
            docked: 'top',
            title: this.getTitle(),
            ui: 'light',
            items: [{
                xtype: 'button',
                text: Messages.BACK,
                ui: 'back',
                scope: this,
                handler: function () {
                    ARSnova.app.mainTabPanel.tabPanel.animateActiveItem(ARSnova.app.lastActiveMainTabPanel, {
                        type: 'slide',
                        direction: 'right',
                        duration: 700
                    });
                }
            }]
        });

        this.add(this.toolbar);

        this.on("painted", function () {
            var url = "http://www.rubel.rub.de/sites/default/files/documents/Nutzungsbedingungen_ARSnova.pdf";

            this.add(Ext.create('ARSnova.view.components.EmbeddedPage', {
                src: url
            }));
        });
    }
});

After all changes are done go to your terminal and build arsnova again:

cd /to/your/arsnova-mobile/location/
npm install 
grunt package

Please be sure to have Sencha CMD, Ruby and NodeJS installed.

I hope this helps all other open issues that are related to this.