refactor: use GeneralDialog in character stats table (#6963)

* use GeneralDialog

* remove unused import

* remove redundant margin

* reduce button size

Author: ElectricalBoy

lua/wikis/commons/Widget/CharacterStats/DetailsPopup.lua

@@ -20,9 +20,9 @@ local Table = Lua.import('Module:Table')
 
 local Widget = Lua.import('Module:Widget')
 local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+local Button = Lua.import('Module:Widget/Basic/Button')
 local DataTable = Lua.import('Module:Widget/Basic/DataTable')
-local DetailsPopup = Lua.import('Module:Widget/CharacterStats/DetailsPopup')
-local DetailsPopupContainer = Lua.import('Module:Widget/CharacterStats/DetailsPopup/Container')
+local Dialog = Lua.import('Module:Widget/Basic/Dialog')
 local Link = Lua.import('Module:Widget/Basic/Link')
 local WidgetUtil = Lua.import('Module:Widget/Util')
 
@@ -155,20 +155,23 @@ function CharacterStatsTable:_buildCharacterRow(characterData, characterIndex)
 					characterData.total.pick + characterData.bans, self.props.numGames
 				)}
 			} or nil,
-			HtmlWidgets.Td{children = DetailsPopupContainer{
-				children = DetailsPopup{
-					header = CharacterIcon.Icon{
-						character = characterData.name,
-						size = self.props.characterSize,
-						addTextLink = true
-					} .. ' Detailed Statistics',
-					children = HtmlWidgets.Div{
-						classes = {'character-stats-popup-info'},
-						children = {
-							CharacterStatsTable._buildPlayedByTeamTable(characterData.playedBy),
-							self:_buildPlayedTable('with', characterData.playedWith),
-							self:_buildPlayedTable('against', characterData.playedVs)
-						}
+			HtmlWidgets.Td{children = Dialog{
+				trigger = Button{
+					children = 'Show',
+					variant = 'secondary',
+					size = 'xs',
+				},
+				title = CharacterIcon.Icon{
+					character = characterData.name,
+					size = self.props.characterSize,
+					addTextLink = true
+				} .. ' Detailed Statistics',
+				children = HtmlWidgets.Div{
+					classes = {'character-stats-popup-info'},
+					children = {
+						CharacterStatsTable._buildPlayedByTeamTable(characterData.playedBy),
+						self:_buildPlayedTable('with', characterData.playedWith),
+						self:_buildPlayedTable('against', characterData.playedVs)
 					}
 				}
 			}}

lua/wikis/commons/Widget/CharacterStats/DetailsPopup/Container.lua

@@ -25,48 +25,15 @@ tr.character-stats-row > td {
 	width: 30px;
 }
 
-.character-stats-popup {
-	border: 1px solid #bbbbbb;
-	width: calc( 100% - 1rem );
-	background-color: #ffffff;
-	position: absolute;
-	left: 0.5rem;
-	margin-top: 1.5rem;
-	border-radius: 0.5rem;
-	box-shadow: 0 0.0625rem 0.25rem 0 var( --clr-on-surface-dark-primary-12 );
-	padding: 0.5rem;
-
-	.theme--dark & {
-		background-color: var( --clr-secondary-16 );
-		border-color: var( --clr-on-surface-dark-primary-8 );
-	}
-
-	&-header {
-		font-size: 20px;
-		font-weight: bold;
-	}
-
-	&-info {
-		display: flex;
-		gap: 0.5rem;
-		justify-content: center;
-		flex-wrap: wrap;
-		margin-top: 0.5rem;
-
-		> div {
-			display: inline-block;
-			flex: auto;
-			vertical-align: top;
-		}
-	}
-
-	&-button {
-		background: #d3d3d3;
-		background-color: #d3d3d3 !important;
-		border: 0 !important;
-		box-shadow: 2px 2px 2px rgba( 0, 0, 0, 0.1 );
-		font-size: 10px;
-		overflow: hidden;
-		height: 15px !important;
+.character-stats-popup-info {
+	display: flex;
+	gap: 0.5rem;
+	justify-content: center;
+	flex-wrap: wrap;
+
+	> div {
+		display: inline-block;
+		flex: auto;
+		vertical-align: top;
 	}
 }