On hover of list view's avatar it should change into checkbox

Question

I have a requirement where I am facing problem. The requirement is : I have a LIST VIEW in which every LIST ITEM having an CIRCULAR AVATAR.

What I want? On hover of CIRCULAR AVATAR of LIST ITEM it should change into a checkbox to select this list item.

And Also all the LIST ITEM above and below should also show CHECKBOX instead of avatar for MULTI-SELECT of LIST ITEMS.

I am using angular-material and angularJs in my project.

For Demo purpose please check the link. https://inbox.google.com/

Thanks in advance.

I am editing this post with code

<md-button  ng-click="toggle = !toggle">
    toggle
</md-button>
<div class="container" layout="row" flex>
    <md-sidenav md-is-locked-open="$mdMedia('gt-sm')" class="md-whiteframe-4dp" flex md-component-id="left">
        <md-list flex>
            <md-subheader class="md-no-sticky">Tapplent Team</md-subheader>
            <md-list-item class="md-3-line" ng-repeat="user in users" ng-click="setSelectedUser(user)">
              <img ng-src="{{user.avatar}}" class="md-avatar" alt="{{item.who}}" ng-show="toggle"/>
                <md-checkbox ng-model="data.cb1" aria-label="Checkbox 1" ng-hide="toggle">
                    Checkbox 1: {{ data.cb1 }}
                </md-checkbox>
              <div class="md-list-item-text" layout="column">
                <h3>{{ user.name }}</h3>
                <h4>{{user.designation}}</h4>
                <p>{{user.technology}}</p>
              </div>
            </md-list-item>
        </md-list>
    </md-sidenav>
</div>

Just to test I was doing with a button toggle that is basically Hiding and showing avatar and checkbox alternatively.

Answer 1

To hide the avatars and show the checkboxes on hover you can use CSS. Wrap the image and checkbox in a div and give it a class such as "avatarWrapper".

md-checkbox {
  display: none; /* Initially hide the checkbox */
}

/* When we hover over the wrapper, hide the avatar */
.avatarWrapper:hover > img.md-avatar {
  display: none;
}

/* When we hover over the wrapper, show the checkbox */
.avatarWrapper:hover > md-checkbox {
  display: inline-block;
}

To hide all the avatars and show the checkboxes when at least one checkbox is checked, you can use ng-class to add a CSS class which will hide/show the appropriate elements.

HTML: ng-class will add class "atLeastOneSelected" if atLeastOneSelected() returns true.

I've added it to the list instead of to an element inside the ng-repeat because there is no need for it to check once per repeated element.

<md-list flex ng-class="{'atLeastOneSelected': atLeastOneSelected()}">

JS: You haven't provided your data or data structure so I've made up some. I've bound the checkboxes to user.selected with ng-model.

$scope.users = [
  {
    avatar: "https://cdn1.iconfinder.com/data/icons/user-pictures/101/malecostume-512.png",
    name: "Matt",
    selected: false
  }, 
  {
    avatar: "https://cdn1.iconfinder.com/data/icons/user-pictures/101/malecostume-512.png",
    name: "David",
    selected: false
  }, 
  {
    avatar: "https://cdn1.iconfinder.com/data/icons/user-pictures/101/malecostume-512.png",
    name: "Tom",
    selected: false
  }
];

Function to check if at least one user is selected. Returns true/false.

$scope.atLeastOneSelected = function() {
  $scope.users.some(function(user) {
    return user.selected === true;
  });
};

CSS:

.atLeastOneSelected img.md-avatar {
  display: none;
}

.atLeastOneSelected md-checkbox {
  display: inline-block;
}

Codepen