How to create a border around my button when being click?


#1

Currently I am trying to make my mobile app to be like, a default border around my button “OFF” when i go in my app. After “ON” button is being click, the border will be around my “ON” button, When i click “OFF” button, the border will change back to be around my “OFF” button.

HTML

 <ion-view title="Single Projector Room" id="page9">

 <ion-nav-buttons side="left">
     <button class="button back-button buttons button-clear header-item" ng-click="goBack()">
       <i class="icon ion-ios-arrow-back"> Back</i> 
     </button>
   </ion-nav-buttons>

   <ion-content padding="true" style="background: url(img/EDD79InSMCeYeMOSchjm_remote.jpg) no-repeat center;background-size:cover;" class="has-header">
     
   <div class="row">
     <div class="col"><br><br><br><br></div>
   </div>

   <div class="row">
   <div class="col col-offset-5 col-30 text-center"><h4 style="color: #FFFFFF;">Single Projector Control</h4></div>
   <div class="col col-30 text-center"><h4 style="color: #FFFFFF;">Screen Control</h4></div>
   </div>

   <div class="row">
     <div class="col col-offset-5 col-30 text-center"><button class="button button-balanced button-large icon-right ion-power">On</button></div>
     <div class="col col-30 text-center"><button class="button button-dark button-large icon-right ion-arrow-up-c">Up</button></div>
   </div>

   <div class="row">
     <div class="col col-offset-5 col-30 text-center"><button class="button button-assertive button-large icon-right ion-android-cancel">Off</button></div>
     <div class="col col-30 text-center"><button class="button button-dark button-large icon-right ion-arrow-down-c">Down</button></div>
   </div>

   <div class="row">
     <div class="col"><br><br></div>
   </div>

   <div class="row">
   <div class="col col-offset-5 col-30 text-center"><h4 style="color: #FFFFFF;">Mic Control</h4></div>
   </div>

   <div class="row">
     <div class="col col-offset-5 col-30 text-center"><button class="button button-balanced button-large icon-right ion-power">On</button></div>
   </div>

   <div class="row">
     <div class="col col-offset-5 col-30 text-center"><button class="button button-assertive button-large icon-right ion-android-cancel">Off</button></div>
   </div>
 </div>

   </ion-content>
 </ion-view>

controller.js

angular.module('app.controllers', [])
  
.controller("remoteCtrl", function($scope, $stateParams, $state, $ionicHistory) {

$scope.single = function() {
    $state.go("singleProjectorRoom");
  }
$scope.dual = function() {
    $state.go("dualProjectorRoom");
  }

$scope.myGoBack = function() {
                $ionicHistory.goBack();
            }

})
      
.controller('menuCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {


}])
   
.controller('loginCtrl', function($scope, $rootScope, $ionicHistory, sharedUtils, $state, $ionicSideMenuDelegate) {
    $rootScope.extras = false;  // For hiding the side bar and nav icon
 
    // When the user logs out and reaches login page,
    // we clear all the history and cache to prevent back link
    $scope.$on('$ionicView.enter', function(ev) {
      if(ev.targetScope !== $scope){
        $ionicHistory.clearHistory();
        $ionicHistory.clearCache();
      }
    });
 
 
    //Check if user already logged in
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
 
    //Removes back link to login page
        $ionicHistory.nextViewOptions({
          historyRoot: true
        });
        $ionicSideMenuDelegate.canDragContent(true);  // Sets up the sideMenu dragable
        $rootScope.extras = true;
        sharedUtils.hideLoading();
        $state.go('tabs.home', {}, {location: "replace"});
 
      }
    });
 
 
    $scope.loginEmail = function(formName,cred) {
 
 
      if(formName.$valid) {  // Check if the form data is valid or not
 
          sharedUtils.showLoading(); //starts the loading popup
 
          //Email Login via Firebase
          firebase.auth().signInWithEmailAndPassword(cred.email,cred.password).then(function(result) {
 
                // You dont need to save the users session in your local session or cookies. Firebase handles it.
                
        // You only need to :
                // 1. clear the login page history from the history stack so that you cant come back
                // 2. Set rootScope.extra;
                // 3. Turn off the loading
                // 4. Got to menu page
 
      
              $ionicHistory.nextViewOptions({
                historyRoot: true   //1
              });
              $rootScope.extras = true;  //2
              sharedUtils.hideLoading();  //3
              $state.go('tabs.home', {}, {location: "replace"}); //4
 
            },
            function(error) {
              sharedUtils.hideLoading();
              sharedUtils.showAlert("ERROR!","Authentication Error");
            }
        );
 
      }else{
        sharedUtils.showAlert("ERROR!","Enter in email format");
      }
 
 
 
    };
})
   
.controller("logoutCtrl", function($scope, $state, $ionicPopup, $rootScope, sharedUtils, $ionicHistory,$ionicSideMenuDelegate, intentService, errorMessageService) {

    $scope.logoutNo = function() {
      intentService.setloginFlagTrue();
      $state.go("tabs.home");
      console.log("Logout is reverted.The flag is now set as " + intentService.getloginFlagStatus());
    }

    $scope.logoutYes = function() {

      sharedUtils.showLoading();

      // Main Firebase logout
      firebase.auth().signOut().then(function() {

        errorMessageService.write("Thank you","You have logout successfully.");
        
        $ionicSideMenuDelegate.canDragContent(false);  // To remove the sidemenu white space

        $ionicHistory.nextViewOptions({
          historyRoot: true
        });


        $rootScope.extras = false;
        sharedUtils.hideLoading();
        $state.go('login', {}, {location: "replace"});

      }, function(error) {
         sharedUtils.showAlert("Error","Logout Failed")
      });

    }
})
   
.controller('singleProjectorRoomCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
$scope.goBack = function() {
window.history.back();
}
}])
   
.controller('dualProjectorRoomCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
$scope.goBack = function() {
window.history.back();
}

}])
   
.controller('homeCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {


}])

#2

Use active and focus selectors

button-balanced:active,
button-balanced:focus
{
 border:1.5em solid #00c; /* here change your border */
 
}

#3

I am still quite new to ionic, may I know where and how should I put the codes in? Thank you.


#4

@blanko have a look at the components library here

It will show you in left panel all built in block that are sure to work when you after build something for android and ios.

Hope that helps :slight_smile:


#5

I’ve seen it. However, what i planning to do is to let user know which button is “activated” by using border around whichever button that is click. Thank you anyway :slight_smile: