improve permission screen design

drawable_resources/key.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M7,14A2,2 0 0,1 5,12A2,2 0 0,1 7,10A2,2 0 0,1 9,12A2,2 0 0,1 7,14M12.65,10C11.83,7.67 9.61,6 7,6A6,6 0 0,0 1,12A6,6 0 0,0 7,18C9.61,18 11.83,16.33 12.65,14H17V18H21V14H23V10H12.65Z" /></svg>

src/main/AndroidManifest.xml

@@ -309,4 +309,4 @@
             android:exported="true"/>
     </application>
 
-</manifest>
+</manifest>

src/main/java/com/owncloud/android/ui/activity/SsoGrantPermissionActivity.java

@@ -1,3 +1,25 @@
+/*
+ * Nextcloud Android client application
+ *
+ * @author David Luhmer
+ * @author Andy Scherzinger
+ * Copyright (C) 2018 David Luhmer
+ * Copyright (C) 2018 Andy Scherzinger
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
 package com.owncloud.android.ui.activity;
 
 import android.accounts.Account;
@@ -8,9 +30,18 @@ import android.content.Intent;
 import android.content.SharedPreferences;
 import android.content.pm.ApplicationInfo;
 import android.content.pm.PackageManager;
+import android.graphics.Color;
+import android.graphics.Typeface;
 import android.graphics.drawable.Drawable;
 import android.os.Bundle;
+import android.support.v4.content.ContextCompat;
+import android.support.v4.graphics.drawable.DrawableCompat;
+import android.text.Spannable;
+import android.text.SpannableStringBuilder;
+import android.text.style.ForegroundColorSpan;
+import android.text.style.StyleSpan;
 import android.util.Log;
+import android.widget.Button;
 import android.widget.ImageView;
 import android.widget.TextView;
 
@@ -21,12 +52,14 @@ import com.owncloud.android.lib.common.OwnCloudAccount;
 import com.owncloud.android.lib.common.accounts.AccountUtils;
 import com.owncloud.android.lib.common.utils.Log_OC;
 import com.owncloud.android.utils.EncryptionUtils;
+import com.owncloud.android.utils.ThemeUtils;
 
 import java.util.UUID;
 
 import butterknife.BindView;
 import butterknife.ButterKnife;
 import butterknife.OnClick;
+import butterknife.Unbinder;
 
 import static com.nextcloud.android.sso.Constants.EXCEPTION_ACCOUNT_ACCESS_DECLINED;
 import static com.nextcloud.android.sso.Constants.EXCEPTION_ACCOUNT_NOT_FOUND;
@@ -35,36 +68,54 @@ import static com.nextcloud.android.sso.Constants.NEXTCLOUD_SSO;
 import static com.nextcloud.android.sso.Constants.NEXTCLOUD_SSO_EXCEPTION;
 import static com.nextcloud.android.sso.Constants.SSO_SHARED_PREFERENCE;
 
-
+/**
+ * Activity for granting access rights to a Nextcloud account, used for SSO.
+ */
 public class SsoGrantPermissionActivity extends BaseActivity {
 
     private static final String TAG = SsoGrantPermissionActivity.class.getCanonicalName();
 
+    private StyleSpan styleSpanBold = new StyleSpan(Typeface.BOLD);
+    private ForegroundColorSpan foregroundColorSpanBlack = new ForegroundColorSpan(Color.BLACK);
+
     private String packageName;
     private Account account;
 
+    private Unbinder unbinder;
+
+    @BindView(R.id.appIcon)
+    ImageView appIcon;
+
+    @BindView(R.id.permissionText)
+    TextView permissionText;
 
-    @BindView(R.id.imageView)
-    ImageView imageView;
+    @BindView(R.id.ticker)
+    ImageView ticker;
 
-    @BindView(R.id.tvInfoText)
-    TextView tvInfo;
+    @BindView(R.id.btnGrant)
+    Button grantPermissionButton;
 
+    @BindView(R.id.btnDecline)
+    Button declinePermissionButton;
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_sso_grant_permission);
 
-        ButterKnife.bind(this);
+        unbinder = ButterKnife.bind(this);
 
         ComponentName callingActivity = getCallingActivity();
 
-        if(callingActivity != null) {
+        if (callingActivity != null) {
             packageName = callingActivity.getPackageName();
             String appName = getAppNameForPackage(packageName);
             account = getIntent().getParcelableExtra(NEXTCLOUD_FILES_ACCOUNT);
-            tvInfo.setText(getString(R.string.single_sign_on_request_token, appName, account.name));
+            permissionText.setText(makeSpecialPartsBold(
+                    getString(R.string.single_sign_on_request_token, appName, account.name),
+                    appName,
+                    account.name)
+            );
             Log.v(TAG, "TOKEN-REQUEST: Calling Package: " + packageName);
             Log.v(TAG, "TOKEN-REQUEST: App Name: " + appName);
         } else {
@@ -74,13 +125,45 @@ public class SsoGrantPermissionActivity extends BaseActivity {
         }
 
         try {
-            if(packageName != null) {
+            if (packageName != null) {
                 Drawable appIcon = getPackageManager().getApplicationIcon(packageName);
-                imageView.setImageDrawable(appIcon);
+                this.appIcon.setImageDrawable(appIcon);
             }
         } catch (PackageManager.NameNotFoundException e) {
-                Log.e(TAG, e.getMessage());
+            Log.e(TAG, e.getMessage());
+        }
+
+        themeUI();
+    }
+
+    private void themeUI() {
+        int primaryColor = ThemeUtils.primaryColor(this, true);
+        grantPermissionButton.setTextColor(primaryColor);
+        declinePermissionButton.setTextColor(primaryColor);
+
+        Drawable mTintedCheck = DrawableCompat.wrap(
+                ContextCompat.getDrawable(this, R.drawable.account_circle_white));
+        int tint = ThemeUtils.elementColor(this);
+        DrawableCompat.setTint(mTintedCheck, tint);
+        ticker.setImageDrawable(mTintedCheck);
+    }
+
+    @Override
+    protected void onDestroy() {
+        super.onDestroy();
+        unbinder.unbind();
+    }
+
+    private SpannableStringBuilder makeSpecialPartsBold(String text, String... toBeStyledText) {
+        SpannableStringBuilder ssb = new SpannableStringBuilder(text);
+        for (String textBlock : toBeStyledText) {
+            int start = text.indexOf(textBlock);
+            int end = start + textBlock.length();
+            ssb.setSpan(styleSpanBold, start, end, 0);
+            ssb.setSpan(foregroundColorSpanBlack, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
         }
+
+        return ssb;
     }
 
     private void setResultAndExit(String exception) {
@@ -133,11 +216,11 @@ public class SsoGrantPermissionActivity extends BaseActivity {
         }
 
         final Bundle result = new Bundle();
-        result.putString(AccountManager.KEY_ACCOUNT_NAME,  account.name);
-        result.putString(AccountManager.KEY_ACCOUNT_TYPE,  MainApp.getAccountType(this));
-        result.putString(AccountManager.KEY_AUTHTOKEN,     NEXTCLOUD_SSO);
-        result.putString(Constants.SSO_USERNAME,   userId);
-        result.putString(Constants.SSO_TOKEN,      token);
+        result.putString(AccountManager.KEY_ACCOUNT_NAME, account.name);
+        result.putString(AccountManager.KEY_ACCOUNT_TYPE, MainApp.getAccountType(this));
+        result.putString(AccountManager.KEY_AUTHTOKEN, NEXTCLOUD_SSO);
+        result.putString(Constants.SSO_USERNAME, userId);
+        result.putString(Constants.SSO_TOKEN, token);
         result.putString(Constants.SSO_SERVER_URL, serverUrl);
 
         Intent data = new Intent();
@@ -145,5 +228,4 @@ public class SsoGrantPermissionActivity extends BaseActivity {
         setResult(RESULT_OK, data);
         finish();
     }
-
 }

src/main/res/drawable/ic_key.xml

@@ -0,0 +1,8 @@
+<!-- drawable/key.xml -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="24dp"
+    android:width="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path android:fillColor="#FFF" android:pathData="M7,14A2,2 0 0,1 5,12A2,2 0 0,1 7,10A2,2 0 0,1 9,12A2,2 0 0,1 7,14M12.65,10C11.83,7.67 9.61,6 7,6A6,6 0 0,0 1,12A6,6 0 0,0 7,18C9.61,18 11.83,16.33 12.65,14H17V18H21V14H23V10H12.65Z" />
+</vector>

src/main/res/layout/activity_sso_grant_permission.xml

@@ -1,45 +1,84 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?><!--
+  Nextcloud Android client application
+
+  Copyright (C) 2018 Andy Scherzinger
+
+  This program is free software; you can redistribute it and/or
+  modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
+  License as published by the Free Software Foundation; either
+  version 3 of the License, or any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU AFFERO GENERAL PUBLIC LICENSE for more details.
+
+  You should have received a copy of the GNU Affero General Public
+  License along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:layout_margin="@dimen/standard_margin"
     tools:context="com.owncloud.android.ui.activity.SsoGrantPermissionActivity">
 
+    <FrameLayout
+        android:id="@+id/appIcon_container"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_constraintTop_toTopOf="@+id/permissionText">
+
+        <ImageView
+            android:id="@+id/appIcon"
+            android:layout_width="@dimen/user_icon_size"
+            android:layout_height="@dimen/user_icon_size"
+            android:layout_gravity="top|start"
+            android:contentDescription="@null"
+            android:src="@drawable/background" />
+
+        <ImageView
+            android:id="@+id/ticker"
+            android:layout_width="18dp"
+            android:layout_height="18dp"
+            android:layout_gravity="bottom|end"
+            android:background="@drawable/round_bgnd"
+            android:contentDescription="@string/active_user"
+            android:src="@drawable/ic_key" />
+    </FrameLayout>
 
     <TextView
-        android:id="@+id/tvInfoText"
+        android:id="@+id/permissionText"
         android:layout_width="wrap_content"
-        android:layout_height="wrap_content" />
+        android:layout_height="wrap_content"
+        android:paddingEnd="@dimen/zero"
+        android:paddingLeft="@dimen/permission_dialog_text_padding"
+        android:paddingRight="@dimen/zero"
+        android:paddingStart="@dimen/permission_dialog_text_padding"
+        android:textSize="@dimen/permission_dialog_text_size"
+        app:layout_constraintBottom_toTopOf="@+id/btnGrant"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:text="Grant Nextcloud News access to your Nextcloud account incrediblyLong_username_with_123456789_number@Nextcloud_dummy.com?" />
 
-    <Button
+    <android.support.v7.widget.AppCompatButton
         android:id="@+id/btnGrant"
-        android:layout_width="180dp"
+        style="@style/Button.Borderless"
+        android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:text="@android:string/ok"
-        app:layout_constraintStart_toStartOf="parent"
+        android:text="@string/permission_allow"
         app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toStartOf="@+id/btnDecline"
-        app:layout_constraintHorizontal_bias="0.5" />
+        app:layout_constraintEnd_toEndOf="parent" />
 
-    <Button
+    <android.support.v7.widget.AppCompatButton
         android:id="@+id/btnDecline"
-        android:layout_width="180dp"
-        android:layout_height="wrap_content"
-        android:layout_marginEnd="8dp"
-        android:layout_marginRight="8dp"
-        android:text="@android:string/cancel"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintHorizontal_bias="0.5"
-        app:layout_constraintStart_toEndOf="@+id/btnGrant" />
-
-    <ImageView
-        android:id="@+id/imageView"
+        style="@style/Button.Borderless"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        app:srcCompat="@drawable/background"
-        app:layout_constraintTop_toBottomOf="@id/tvInfoText"
-        android:contentDescription="@string/single_sign_on_request_token_app_icon" />
+        android:layout_marginEnd="@dimen/standard_half_margin"
+        android:layout_marginRight="@dimen/standard_half_margin"
+        android:text="@string/permission_deny"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toStartOf="@+id/btnGrant" />
 
 </android.support.constraint.ConstraintLayout>

src/main/res/values/dims.xml

@@ -147,5 +147,7 @@
     <dimen name="synced_folders_recycler_view_layout_margin">-3dp</dimen>
     <dimen name="toolbar_user_information_layout_margin">12dp</dimen>
     <dimen name="bottom_sheet_text_size">16sp</dimen>
+    <dimen name="permission_dialog_text_size">18sp</dimen>
+    <dimen name="permission_dialog_text_padding">56dp</dimen>
     <integer name="media_grid_width">4</integer>
 </resources>

src/main/res/values/strings.xml

@@ -818,6 +818,8 @@
     <string name="fab_label">Add or upload</string>
     <string name="account_creation_failed">Account creation failed</string>
 
-    <string name="single_sign_on_request_token" formatted="true">App %1$s wants access to your Nextcloud account (%2$s), do you want to grant permission?</string>
-    <string name="single_sign_on_request_token_app_icon" translatable="false">AppIcon</string>
+    <string name="single_sign_on_request_token" formatted="true">Grant %1$s access to your Nextcloud account (%2$s)?</string>
+    <string name="permission_deny">Deny</string>
+    <string name="permission_allow">Allow</string>
+
 </resources>